diff --git a/vocodes/src/App.scss b/vocodes/src/App.scss index 1abc06c139..bec7def98c 100644 --- a/vocodes/src/App.scss +++ b/vocodes/src/App.scss @@ -21,6 +21,11 @@ body { margin: auto; } +.migrationComponentWrapper { + margin-top: 1em; + border-top: 4px solid #ccc; +} + canvas#spectrogram { margin: 0.5em 0; transform: scaleY(-1); /* Spectrograms are flipped */ diff --git a/vocodes/src/App.tsx b/vocodes/src/App.tsx index ead97a3b75..4dfcec870b 100644 --- a/vocodes/src/App.tsx +++ b/vocodes/src/App.tsx @@ -4,6 +4,7 @@ import './App.scss'; import React from 'react'; import { NewOldVocodesSwitch } from './migration/NewOldVocodesSwitch'; import { OldVocodesContainer } from './migration/OldVocodesContainer'; +import { NewVocodesContainer } from './migration/NewVocodesContainer'; enum MigrationMode { NEW_VOCODES, @@ -50,6 +51,12 @@ class App extends React.Component { switch (this.state.migrationMode) { case MigrationMode.NEW_VOCODES: + innerComponent = ( +
+ +
+ ); break; case MigrationMode.OLD_VOCODES: @@ -72,8 +79,9 @@ class App extends React.Component { setMigrationModeCallback={this.setMigrationMode} /> - {innerComponent} - +
+ {innerComponent} +
diff --git a/vocodes/src/migration/NewVocodesContainer.tsx b/vocodes/src/migration/NewVocodesContainer.tsx index e69de29bb2..2f5c7ecad2 100644 --- a/vocodes/src/migration/NewVocodesContainer.tsx +++ b/vocodes/src/migration/NewVocodesContainer.tsx @@ -0,0 +1,62 @@ +import React from 'react'; +import { NewTopNav } from '../navigation/NewTopNav'; + + +enum NewMode { + LOGIN_MODE, + SIGNUP_MODE, + COMMUNITY_TTS_MODE, + COMMUNITY_W2L_MODE, + UPLOAD_MODE, + MY_DATA_MODE, + MY_PROFILE_MODE, + EDIT_MY_PROFILE_MODE, +} + +interface Props { +} + +interface State { + mode: NewMode, +} + +class NewVocodesContainer extends React.Component { + + constructor(props: Props) { + super(props); + + this.state = { + mode: NewMode.SIGNUP_MODE, + } + } + + switchMode = (mode: NewMode) => { + this.setState({mode: mode}); + } + + logout = () => { + } + + public render() { + let innerComponent =
; + + return ( +
+
+ + + + {innerComponent} + + +
+
+ ) + } +} + +export { NewVocodesContainer, NewMode } diff --git a/vocodes/src/navigation/NewTopNav.tsx b/vocodes/src/navigation/NewTopNav.tsx new file mode 100644 index 0000000000..e63c7eb565 --- /dev/null +++ b/vocodes/src/navigation/NewTopNav.tsx @@ -0,0 +1,130 @@ +import React from 'react'; +import { NewMode } from '../migration/NewVocodesContainer' +import { SessionStateResponse } from '../api/SessionState'; + +interface Props { + sessionState?: SessionStateResponse, + mode: NewMode, + ///historyBadgeCount: number, + //isHistoryCountBadgeVisible: boolean, + switchModeCallback: (mode: NewMode ) => void, + 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 = ; + + if (true) { + if (loggedIn) { + loginManagement = ( + + props.switchModeCallback(NewMode.MY_PROFILE_MODE)}>{displayName} + props.logoutHandler()}>Log Out + + ); + } else { + loginManagement = ( + + props.switchModeCallback(NewMode.LOGIN_MODE)}>Login + props.switchModeCallback(NewMode.SIGNUP_MODE)} className="signup">Sign Up + + ); + } + + extendedFeatures = ( + + ); + } + + return ( + + ) +} + +export { NewTopNav };