From 9d4ee4ed792dc30fa163f177897af280dc21857b Mon Sep 17 00:00:00 2001 From: Brandon Thomas Date: Wed, 26 May 2021 03:01:05 -0400 Subject: [PATCH] profile component wip --- vocodes/src/v1/api/ApiConfig.ts | 4 + vocodes/src/v2/NewVocodesContainer.tsx | 33 +++-- vocodes/src/v2/profile/ProfileComponent.tsx | 116 ++---------------- .../v2/profile_data/ProfileDataComponent.tsx | 116 ++---------------- 4 files changed, 48 insertions(+), 221 deletions(-) diff --git a/vocodes/src/v1/api/ApiConfig.ts b/vocodes/src/v1/api/ApiConfig.ts index dada4e7ffb..e407d49823 100644 --- a/vocodes/src/v1/api/ApiConfig.ts +++ b/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"; } diff --git a/vocodes/src/v2/NewVocodesContainer.tsx b/vocodes/src/v2/NewVocodesContainer.tsx index e4465e8c59..acf9c84689 100644 --- a/vocodes/src/v2/NewVocodesContainer.tsx +++ b/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 { /> - - {}} - sessionWrapper={this.props.sessionWrapper} - /> - - - {}} - sessionWrapper={this.props.sessionWrapper} - /> - + ( + {}} + sessionWrapper={this.props.sessionWrapper} + routeProps={routeProps} + /> + )} + /> + + ( + {}} + sessionWrapper={this.props.sessionWrapper} + routeProps={routeProps} + /> + )} + /> void, - switchModeCallback?: (mode: Mode) => void, } interface State { - usernameOrEmail: string, - usernameOrEmailValid: FieldTriState, - usernameOrEmailInvalidReason: string, - - password: string, - passwordValid: FieldTriState, - passwordInvalidReason: string, } class ProfileComponent extends React.Component { @@ -30,128 +23,43 @@ class ProfileComponent extends React.Component { constructor(props: Props) { super(props); this.state = { - usernameOrEmail: "", - usernameOrEmailValid: FieldTriState.EMPTY_FALSE, - usernameOrEmailInvalidReason: "", - - password: "", - passwordValid: FieldTriState.EMPTY_FALSE, - passwordInvalidReason: "", }; } - handleUsernameOrEmailChange = (ev: React.FormEvent) => { - ev.preventDefault(); - - const usernameOrEmail = (ev.target as HTMLInputElement).value; - - this.setState({ - usernameOrEmail: usernameOrEmail, - }) - - return false; - } - - handlePasswordChange = (ev: React.FormEvent) => { - ev.preventDefault(); - - const password = (ev.target as HTMLInputElement).value; - - this.setState({ - password: password, - }) - - return false; - } - - handleFormSubmit = (ev: React.FormEvent) : 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
Invalid view for logged in users.
; - } - return (
-

Login

- -

- -
-
- -
- - - - - - - -
- {/*

*/} -
- -
- -
- - - - - - - -
- {/*

*/} -
- -
- -
-
- -
-
-
+

Profile

) } diff --git a/vocodes/src/v2/profile_data/ProfileDataComponent.tsx b/vocodes/src/v2/profile_data/ProfileDataComponent.tsx index e858395c02..b90e77bb84 100644 --- a/vocodes/src/v2/profile_data/ProfileDataComponent.tsx +++ b/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 { @@ -30,128 +23,43 @@ class ProfileDataComponent extends React.Component { constructor(props: Props) { super(props); this.state = { - usernameOrEmail: "", - usernameOrEmailValid: FieldTriState.EMPTY_FALSE, - usernameOrEmailInvalidReason: "", - - password: "", - passwordValid: FieldTriState.EMPTY_FALSE, - passwordInvalidReason: "", }; } - handleUsernameOrEmailChange = (ev: React.FormEvent) => { - ev.preventDefault(); - - const usernameOrEmail = (ev.target as HTMLInputElement).value; - - this.setState({ - usernameOrEmail: usernameOrEmail, - }) - - return false; - } - - handlePasswordChange = (ev: React.FormEvent) => { - ev.preventDefault(); - - const password = (ev.target as HTMLInputElement).value; - - this.setState({ - password: password, - }) - - return false; - } - - handleFormSubmit = (ev: React.FormEvent) : 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
Invalid view for logged in users.
; - } - return (
-

Login

- -

- -
-
- -
- - - - - - - -
- {/*

*/} -
- -
- -
- - - - - - - -
- {/*

*/} -
- -
- -
-
- -
-
-
+

Profile

) }