profile component wip

vocodes/src/v1/api/ApiConfig.ts

@@ -45,6 +45,10 @@ class ApiConfig {
     return `${this.getScheme()}://${this.getNewApiHost()}/w2l/upload`;
   }
 
+  getProfile(username: string) : string {
+    return `${this.getScheme()}://${this.getNewApiHost()}/profile/${username}`;
+  }
+
   private getScheme() : string {
     return this.isLocalDev ? "http" : "https";
   }

vocodes/src/v2/NewVocodesContainer.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { NewTopNav } from './NewTopNav';
 import { LoginComponent } from './login/LoginComponent';
 import { SignupComponent } from './signup/SignupComponent';
-import { Switch, Route } from 'react-router-dom';
+import { Switch, Route, RouteProps } from 'react-router-dom';
 import { SessionWrapper } from '../session/SessionWrapper';
 import { UploadComponent } from './upload/UploadComponent';
 import { FirehoseComponent } from './firehose/FirehoseComponent';
@@ -55,19 +55,26 @@ class NewVocodesContainer extends React.Component<Props, State> {
               />
             </Route>
 
-            <Route path="/profile/:username/data">
-              <ProfileDataComponent
-                querySessionCallback={()=>{}}
-                sessionWrapper={this.props.sessionWrapper}
-              />
-            </Route>
 
-            <Route path="/profile">
-              <ProfileComponent
-                querySessionCallback={()=>{}}
-                sessionWrapper={this.props.sessionWrapper}
-              />
-            </Route>
+            <Route path="/profile/:username/data"
+              render={(routeProps: RouteProps) => (
+                <ProfileDataComponent
+                  querySessionCallback={()=>{}}
+                  sessionWrapper={this.props.sessionWrapper}
+                  routeProps={routeProps}
+                />
+              )}
+            />
+
+            <Route path="/profile/:username"
+              render={(routeProps: RouteProps) => (
+                <ProfileComponent
+                  querySessionCallback={()=>{}}
+                  sessionWrapper={this.props.sessionWrapper}
+                  routeProps={routeProps}
+                />
+              )}
+            />
 
             <Route path="/signup">
               <SignupComponent

vocodes/src/v2/profile/ProfileComponent.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ApiConfig } from '../../v1/api/ApiConfig';
-import { Mode } from '../../AppMode';
 import { SessionWrapper } from '../../session/SessionWrapper';
+import { RouteProps } from 'react-router-dom';
 
 enum FieldTriState {
   EMPTY_FALSE,
@@ -10,19 +10,12 @@ enum FieldTriState {
 }
 
 interface Props {
+  routeProps: RouteProps,
   sessionWrapper: SessionWrapper,
   querySessionCallback : () => void,
-  switchModeCallback?: (mode: Mode) => void,
 }
 
 interface State {
-  usernameOrEmail: string,
-  usernameOrEmailValid: FieldTriState,
-  usernameOrEmailInvalidReason: string,
-
-  password: string,
-  passwordValid: FieldTriState,
-  passwordInvalidReason: string,
 }
 
 class ProfileComponent extends React.Component<Props, State> {
@@ -30,128 +23,43 @@ class ProfileComponent extends React.Component<Props, State> {
   constructor(props: Props) {
     super(props);
     this.state = {
-      usernameOrEmail: "",
-      usernameOrEmailValid: FieldTriState.EMPTY_FALSE,
-      usernameOrEmailInvalidReason: "",
-
-      password: "",
-      passwordValid: FieldTriState.EMPTY_FALSE,
-      passwordInvalidReason: "",
     };
   }
 
-  handleUsernameOrEmailChange = (ev: React.FormEvent<HTMLInputElement>) => {
-    ev.preventDefault();
-
-    const usernameOrEmail  = (ev.target as HTMLInputElement).value;
-
-    this.setState({
-      usernameOrEmail: usernameOrEmail,
-    })
-
-    return false;
-  }
-
-  handlePasswordChange = (ev: React.FormEvent<HTMLInputElement>) => {
-    ev.preventDefault();
-
-    const password = (ev.target as HTMLInputElement).value;
-
-    this.setState({
-      password: password,
-    })
-
-    return false;
-  }
-
-  handleFormSubmit = (ev: React.FormEvent<HTMLFormElement>) : boolean => {
-    ev.preventDefault();
-
+  componentDidMount() {
     const api = new ApiConfig();
-    const endpointUrl = api.login();
-    
-    const request = {
-      username_or_email: this.state.usernameOrEmail,
-      password: this.state.password,
-    }
+    const endpointUrl = api.getProfile(this.getUsername());
 
     fetch(endpointUrl, {
-      method: 'POST',
+      method: 'GET',
       headers: {
         'Accept': 'application/json',
         'Content-Type': 'application/json',
       },
       credentials: 'include',
-      body: JSON.stringify(request),
     })
     .then(res => res.json())
     .then(res => {
-      console.log('login response', res)
+      console.log('response', res)
       if (res.success) {
-        console.log('querying new session');
-        this.props.querySessionCallback();
-
-        if (this.props.switchModeCallback !== undefined) {
-          this.props.switchModeCallback(Mode.SPEAK_MODE);
-        }
+        console.log('success');
         return;
       }
     })
     .catch(e => {
       //this.props.onSpeakErrorCallback();
     });
+  }
 
-    return false;
+  getUsername() : string {
+    console.log('route props', this.props.routeProps);
+    return 'echelon';
   }
 
   public render() {
-    if (this.props.sessionWrapper.isLoggedIn()) {
-      return <div>Invalid view for logged in users.</div>;
-    }
-
     return (
       <div>
-        <h1 className="title is-1"> Login </h1>
-
-        <p></p>
-
-        <form onSubmit={this.handleFormSubmit}>
-          <div className="field">
-            <label className="label">Username or Email</label>
-            <div className="control has-icons-left has-icons-right">
-              <input className="input" type="text" placeholder="Username or Email" value={this.state.usernameOrEmail} onChange={this.handleUsernameOrEmailChange} />
-              <span className="icon is-small is-left">
-                <i className="fas fa-user"></i>
-              </span>
-              <span className="icon is-small is-right">
-                <i className="fas fa-check"></i>
-              </span>
-            </div>
-            {/*<p className="help"></p>*/}
-          </div>
-
-          <div className="field">
-            <label className="label">Password</label>
-            <div className="control has-icons-left has-icons-right">
-              <input className="input" type="password" placeholder="Password" value={this.state.password} onChange={this.handlePasswordChange} />
-              <span className="icon is-small is-left">
-                <i className="fas fa-envelope"></i>
-              </span>
-              <span className="icon is-small is-right">
-                <i className="fas fa-exclamation-triangle"></i>
-              </span>
-            </div>
-            {/*<p className="help"></p>*/}
-          </div>
-
-          <br />
-
-          <div className="field is-grouped">
-            <div className="control">
-              <button className="button is-link is-large">Login</button>
-            </div>
-          </div>
-        </form>
+        <h1 className="title is-1"> Profile </h1>
       </div>
     )
   }

vocodes/src/v2/profile_data/ProfileDataComponent.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ApiConfig } from '../../v1/api/ApiConfig';
-import { Mode } from '../../AppMode';
 import { SessionWrapper } from '../../session/SessionWrapper';
+import { RouteProps } from 'react-router-dom';
 
 enum FieldTriState {
   EMPTY_FALSE,
@@ -10,19 +10,12 @@ enum FieldTriState {
 }
 
 interface Props {
+  routeProps: RouteProps,
   sessionWrapper: SessionWrapper,
   querySessionCallback : () => void,
-  switchModeCallback?: (mode: Mode) => void,
 }
 
 interface State {
-  usernameOrEmail: string,
-  usernameOrEmailValid: FieldTriState,
-  usernameOrEmailInvalidReason: string,
-
-  password: string,
-  passwordValid: FieldTriState,
-  passwordInvalidReason: string,
 }
 
 class ProfileDataComponent extends React.Component<Props, State> {
@@ -30,128 +23,43 @@ class ProfileDataComponent extends React.Component<Props, State> {
   constructor(props: Props) {
     super(props);
     this.state = {
-      usernameOrEmail: "",
-      usernameOrEmailValid: FieldTriState.EMPTY_FALSE,
-      usernameOrEmailInvalidReason: "",
-
-      password: "",
-      passwordValid: FieldTriState.EMPTY_FALSE,
-      passwordInvalidReason: "",
     };
   }
 
-  handleUsernameOrEmailChange = (ev: React.FormEvent<HTMLInputElement>) => {
-    ev.preventDefault();
-
-    const usernameOrEmail  = (ev.target as HTMLInputElement).value;
-
-    this.setState({
-      usernameOrEmail: usernameOrEmail,
-    })
-
-    return false;
-  }
-
-  handlePasswordChange = (ev: React.FormEvent<HTMLInputElement>) => {
-    ev.preventDefault();
-
-    const password = (ev.target as HTMLInputElement).value;
-
-    this.setState({
-      password: password,
-    })
-
-    return false;
-  }
-
-  handleFormSubmit = (ev: React.FormEvent<HTMLFormElement>) : boolean => {
-    ev.preventDefault();
-
+  componentDidMount() {
     const api = new ApiConfig();
-    const endpointUrl = api.login();
-    
-    const request = {
-      username_or_email: this.state.usernameOrEmail,
-      password: this.state.password,
-    }
+    const endpointUrl = api.getProfile(this.getUsername());
 
     fetch(endpointUrl, {
-      method: 'POST',
+      method: 'GET',
       headers: {
         'Accept': 'application/json',
         'Content-Type': 'application/json',
       },
       credentials: 'include',
-      body: JSON.stringify(request),
     })
     .then(res => res.json())
     .then(res => {
-      console.log('login response', res)
+      console.log('response', res)
       if (res.success) {
-        console.log('querying new session');
-        this.props.querySessionCallback();
-
-        if (this.props.switchModeCallback !== undefined) {
-          this.props.switchModeCallback(Mode.SPEAK_MODE);
-        }
+        console.log('success');
         return;
       }
     })
     .catch(e => {
       //this.props.onSpeakErrorCallback();
     });
+  }
 
-    return false;
+  getUsername() : string {
+    console.log('route props', this.props.routeProps);
+    return 'echelon';
   }
 
   public render() {
-    if (this.props.sessionWrapper.isLoggedIn()) {
-      return <div>Invalid view for logged in users.</div>;
-    }
-
     return (
       <div>
-        <h1 className="title is-1"> Login </h1>
-
-        <p></p>
-
-        <form onSubmit={this.handleFormSubmit}>
-          <div className="field">
-            <label className="label">Username or Email</label>
-            <div className="control has-icons-left has-icons-right">
-              <input className="input" type="text" placeholder="Username or Email" value={this.state.usernameOrEmail} onChange={this.handleUsernameOrEmailChange} />
-              <span className="icon is-small is-left">
-                <i className="fas fa-user"></i>
-              </span>
-              <span className="icon is-small is-right">
-                <i className="fas fa-check"></i>
-              </span>
-            </div>
-            {/*<p className="help"></p>*/}
-          </div>
-
-          <div className="field">
-            <label className="label">Password</label>
-            <div className="control has-icons-left has-icons-right">
-              <input className="input" type="password" placeholder="Password" value={this.state.password} onChange={this.handlePasswordChange} />
-              <span className="icon is-small is-left">
-                <i className="fas fa-envelope"></i>
-              </span>
-              <span className="icon is-small is-right">
-                <i className="fas fa-exclamation-triangle"></i>
-              </span>
-            </div>
-            {/*<p className="help"></p>*/}
-          </div>
-
-          <br />
-
-          <div className="field is-grouped">
-            <div className="control">
-              <button className="button is-link is-large">Login</button>
-            </div>
-          </div>
-        </form>
+        <h1 className="title is-1"> Profile </h1>
       </div>
     )
   }