From aaa2e306ba369303d5ebffcdd6e7e3900787fca3 Mon Sep 17 00:00:00 2001 From: Brandon Thomas Date: Thu, 27 May 2021 17:14:12 -0400 Subject: [PATCH] rename components, profile data component stub --- vocodes/src/v2/NewTopNav.tsx | 135 ------------------ vocodes/src/v2/NewTopNavFc.tsx | 53 +++++++ vocodes/src/v2/NewVocodesContainer.tsx | 14 +- ...ginFunctionalComponent.tsx => LoginFc.tsx} | 4 +- vocodes/src/v2/profile_data/ProfileDataFc.tsx | 71 +++++++++ .../w2l_template_view/W2lTemplateViewFc.tsx | 2 - 6 files changed, 132 insertions(+), 147 deletions(-) delete mode 100644 vocodes/src/v2/NewTopNav.tsx create mode 100644 vocodes/src/v2/NewTopNavFc.tsx rename vocodes/src/v2/login/{LoginFunctionalComponent.tsx => LoginFc.tsx} (97%) create mode 100644 vocodes/src/v2/profile_data/ProfileDataFc.tsx diff --git a/vocodes/src/v2/NewTopNav.tsx b/vocodes/src/v2/NewTopNav.tsx deleted file mode 100644 index 8801a1e70f..0000000000 --- a/vocodes/src/v2/NewTopNav.tsx +++ /dev/null @@ -1,135 +0,0 @@ -import React from 'react'; -import { SessionStateResponse } from '../v1/api/SessionState'; -import { SessionWrapper } from '../session/SessionWrapper'; -import { Link } from 'react-router-dom'; - -interface Props { - sessionState?: SessionStateResponse, - sessionWrapper: SessionWrapper, - ///historyBadgeCount: number, - //isHistoryCountBadgeVisible: boolean, - logoutHandler: () => void, -} - -function NewTopNav(props: Props) { - let badge = ; - - /*if (props.historyBadgeCount > 0) { - let className = "tag is-info is-light"; - - if (props.isHistoryCountBadgeVisible) { - className = "tag is-danger"; - } - - badge = {props.historyBadgeCount}; - }*/ - - let loggedIn = false; - let displayName = "My Account"; - - if (props.sessionState !== undefined) { - console.log('sessionstate', props.sessionState); - loggedIn = props.sessionState.logged_in; - if (props.sessionState.user !== undefined && - props.sessionState.user !== null) { - displayName = props.sessionState.user.display_name; - } - } - - // Vo.codes 2.0 - let loginManagement = ; - let extendedFeatures = ; - let column1 =
; - let column2 =
; - - if (true) { - if (loggedIn) { - loginManagement = ( - - {}}>{displayName} - {}}>Log Out - - ); - column1 = ( -
- -
- ); - } else { - loginManagement = ( - - {}}>Login - {}} className="signup">Sign Up - - ); - column1 = ( -
- -
- ); - column2 = ( -
- -
- ); - } - - extendedFeatures = ( -
- NEW Community Features let you use Your Own Voices and Video: -
-
- {}}>TTS - {}}>Video - {}}>Upload - {}}>My Data -
- ); - } - - let myDataLink = `/profile/${displayName}/data`; - - return ( - - ) -} - -export { NewTopNav }; diff --git a/vocodes/src/v2/NewTopNavFc.tsx b/vocodes/src/v2/NewTopNavFc.tsx new file mode 100644 index 0000000000..e677a3ad2c --- /dev/null +++ b/vocodes/src/v2/NewTopNavFc.tsx @@ -0,0 +1,53 @@ +import React from 'react'; +import { SessionStateResponse } from '../v1/api/SessionState'; +import { SessionWrapper } from '../session/SessionWrapper'; +import { Link } from 'react-router-dom'; + +interface Props { + sessionWrapper: SessionWrapper, + logoutHandler: () => void, +} + +function NewTopNavFc(props: Props) { + let myDataLink = '/signup'; + + if (props.sessionWrapper.isLoggedIn()) { + let username = props.sessionWrapper.getUsername(); + myDataLink = `/profile/${username}/data`; + } + + return ( + + ) +} + +export { NewTopNavFc }; diff --git a/vocodes/src/v2/NewVocodesContainer.tsx b/vocodes/src/v2/NewVocodesContainer.tsx index 443149f7cd..2700e9b02c 100644 --- a/vocodes/src/v2/NewVocodesContainer.tsx +++ b/vocodes/src/v2/NewVocodesContainer.tsx @@ -1,8 +1,7 @@ import React from 'react'; import { FirehoseComponent } from './firehose/FirehoseComponent'; -import { LoginComponent } from './login/LoginComponent'; -import { LoginFunctionalComponent } from './login/LoginFunctionalComponent'; -import { NewTopNav } from './NewTopNav'; +import { LoginFc } from './login/LoginFc'; +import { NewTopNavFc } from './NewTopNavFc'; import { ProfileComponent } from './profile/ProfileComponent'; import { ProfileDataComponent } from './profile_data/ProfileDataComponent'; import { SessionWrapper } from '../session/SessionWrapper'; @@ -16,6 +15,7 @@ import { W2lTemplateListFc } from './w2l_template_list/W2lTemplateListFc'; import { UploadTtsModelFc } from './upload/UploadTtsModelFc'; import { UploadComponent } from './upload/UploadComponent'; import { W2lTemplateViewFc } from './w2l_template_view/W2lTemplateViewFc'; +import { ProfileDataFc } from './profile_data/ProfileDataFc'; interface Props { sessionWrapper: SessionWrapper, @@ -42,7 +42,7 @@ class NewVocodesContainer extends React.Component {
- @@ -56,7 +56,7 @@ class NewVocodesContainer extends React.Component { - @@ -65,10 +65,8 @@ class NewVocodesContainer extends React.Component { ( - {}} + )} /> diff --git a/vocodes/src/v2/login/LoginFunctionalComponent.tsx b/vocodes/src/v2/login/LoginFc.tsx similarity index 97% rename from vocodes/src/v2/login/LoginFunctionalComponent.tsx rename to vocodes/src/v2/login/LoginFc.tsx index 8d125a0a18..dfaf23d958 100644 --- a/vocodes/src/v2/login/LoginFunctionalComponent.tsx +++ b/vocodes/src/v2/login/LoginFc.tsx @@ -14,7 +14,7 @@ interface Props { querySessionAction: () => void, } -function LoginFunctionalComponent(props: Props) { +function LoginFc(props: Props) { let history = useHistory(); const [password, setPassword] = useState('') @@ -123,4 +123,4 @@ function LoginFunctionalComponent(props: Props) { ) } -export { LoginFunctionalComponent }; +export { LoginFc }; diff --git a/vocodes/src/v2/profile_data/ProfileDataFc.tsx b/vocodes/src/v2/profile_data/ProfileDataFc.tsx new file mode 100644 index 0000000000..c44ff6874c --- /dev/null +++ b/vocodes/src/v2/profile_data/ProfileDataFc.tsx @@ -0,0 +1,71 @@ +import React, { useState, useEffect } from 'react'; +import { ApiConfig } from '../../v1/api/ApiConfig'; +import { SessionWrapper } from '../../session/SessionWrapper'; +import { RouteProps, useHistory, useParams, Link } from 'react-router-dom'; + +interface W2lTemplateViewResponsePayload { + success: boolean, + template: W2lTemplate, +} + +interface W2lTemplate { + template_token: string, + template_type: string, + creator_user_token: string, + username: string, + display_name: string, + updatable_slug: string, + title: string, + frame_width: number, + frame_height: number, + duration_millis: number, + maybe_image_object_name: string, + maybe_video_object_name: string, + created_at: string, + updated_at: string, +} + +interface Props { + sessionWrapper: SessionWrapper, +} + +function ProfileDataFc(props: Props) { + //let history = useHistory(); + //let { templateSlug } = useParams(); + + //const [w2lTemplate, setW2lTemplate] = useState(undefined); + + useEffect(() => { + /*const api = new ApiConfig(); + const endpointUrl = api.viewW2l(templateSlug); + + fetch(endpointUrl, { + method: 'GET', + headers: { + 'Accept': 'application/json', + }, + credentials: 'include', + }) + .then(res => res.json()) + .then(res => { + console.log('list', res); + const templatesResponse : W2lTemplateViewResponsePayload = res; + if (!templatesResponse.success) { + return; + } + + setW2lTemplate(templatesResponse.template) + }) + .catch(e => { + //this.props.onSpeakErrorCallback(); + });*/ + }, []); // NB: Empty array dependency sets to run ONLY on mount + + return ( +
+

Profile Data

+
+ ) +} + +export { ProfileDataFc }; diff --git a/vocodes/src/v2/w2l_template_view/W2lTemplateViewFc.tsx b/vocodes/src/v2/w2l_template_view/W2lTemplateViewFc.tsx index b282717dd4..444b72a899 100644 --- a/vocodes/src/v2/w2l_template_view/W2lTemplateViewFc.tsx +++ b/vocodes/src/v2/w2l_template_view/W2lTemplateViewFc.tsx @@ -108,8 +108,6 @@ function W2lTemplateViewFc(props: Props) { - -
) }