rename components, profile data component stub

vocodes/src/v2/NewTopNav.tsx

@@ -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 = <span />;
-
-  /*if (props.historyBadgeCount > 0) {
-    let className = "tag is-info is-light";
-
-    if (props.isHistoryCountBadgeVisible) {
-      className = "tag is-danger";
-    }
-
-    badge = <span className={className}>{props.historyBadgeCount}</span>;
-  }*/
-
-  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 = <span />;
-  let extendedFeatures = <span />;
-  let column1 = <div></div>;
-  let column2 = <div></div>;
-
-  if (true) {
-    if (loggedIn) {
-      loginManagement = (
-        <span>
-          <a href="#profile" onClick={() => {}}>{displayName}</a>
-          <a href="#logout" onClick={() => {}}>Log Out</a>
-        </span>
-      );
-      column1 = (
-        <div className="column">
-          <button 
-            className="button is-link is-large is-inverted"
-            onClick={() => {}}
-            >Firehose</button>
-        </div>
-      );
-    } else {
-      loginManagement = (
-        <span>
-          <a href="#login" onClick={() => {}}>Login</a>
-          <a href="#signup" onClick={() => {}} className="signup">Sign Up</a>
-        </span>
-      );
-      column1 = (
-        <div className="column">
-          <button 
-            className="button is-link is-large is-inverted"
-            onClick={() => {}}
-            >Sign Up</button>
-        </div>
-      );
-      column2 = (
-        <div className="column">
-          <button 
-            className="button is-link is-large is-inverted"
-            onClick={() => {}}
-            >Login</button>
-        </div>
-      );
-    }
-
-    extendedFeatures = (
-      <div className="notification is-info is-light">
-          <strong>NEW Community Features let you use Your Own Voices and Video:</strong>
-          <br />
-          <br />
-          <a href="#community_tts" onClick={() => {}}>TTS</a>
-          <a href="#community_video" onClick={() => {}}>Video</a>
-          <a href="#upload" onClick={() => {}}>Upload</a>
-          <a href="#my_data" onClick={() => {}}>My Data</a>
-      </div>
-    );
-  }
-
-  let myDataLink = `/profile/${displayName}/data`;
-
-  return (
-    <nav>
-      <div className="columns">
-        <div className="column">
-          <Link to="/tts"
-            className="button is-link is-medium is-inverted"
-            >Text to Speech️</Link>
-        </div>
-        <div className="column">
-          <Link to="/video"
-            className="button is-link is-medium is-inverted"
-            >Video</Link>
-        </div>
-        <div className="column">
-          <Link to="/upload"
-            className="button is-link is-medium is-inverted"
-            >Upload</Link>
-        </div>
-        <div className="column">
-          <Link to={myDataLink}
-            className="button is-link is-medium is-inverted"
-            >My Data</Link>
-        </div>
-        <div className="column">
-          <Link to="/firehose"
-            className="button is-link is-medium is-inverted"
-            >Firehose</Link>
-        </div>
-      </div>
-      <hr />
-    </nav>
-  )
-}
-
-export { NewTopNav };

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 (
+    <nav>
+      <div className="columns">
+        <div className="column">
+          <Link to="/tts"
+            className="button is-link is-medium is-inverted"
+            >Text to Speech️</Link>
+        </div>
+        <div className="column">
+          <Link to="/video"
+            className="button is-link is-medium is-inverted"
+            >Video</Link>
+        </div>
+        <div className="column">
+          <Link to="/upload"
+            className="button is-link is-medium is-inverted"
+            >Upload</Link>
+        </div>
+        <div className="column">
+          <Link to={myDataLink}
+            className="button is-link is-medium is-inverted"
+            >My Data</Link>
+        </div>
+        <div className="column">
+          <Link to="/firehose"
+            className="button is-link is-medium is-inverted"
+            >Firehose</Link>
+        </div>
+      </div>
+      <hr />
+    </nav>
+  )
+}
+
+export { NewTopNavFc };

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<Props, State> {
       <div id="main" className="mainwrap">
         <div id="viewable">
 
-          <NewTopNav
+          <NewTopNavFc
             logoutHandler={this.logout}
             sessionWrapper={this.props.sessionWrapper}
             />
@@ -56,7 +56,7 @@ class NewVocodesContainer extends React.Component<Props, State> {
             </Route>
 
             <Route path="/login">
-              <LoginFunctionalComponent
+              <LoginFc
                 sessionWrapper={this.props.sessionWrapper}
                 querySessionAction={this.props.querySessionAction}
               />
@@ -65,10 +65,8 @@ class NewVocodesContainer extends React.Component<Props, State> {
 
             <Route path="/profile/:username/data"
               render={(routeProps: RouteProps) => (
-                <ProfileDataComponent
-                  querySessionCallback={()=>{}}
+                <ProfileDataFc
                   sessionWrapper={this.props.sessionWrapper}
-                  routeProps={routeProps}
                 />
               )}
             />

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 };

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<W2lTemplate|undefined>(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 (
+    <div>
+      <h1 className="title is-1"> Profile Data </h1>
+    </div>
+  )
+}
+
+export { ProfileDataFc };

vocodes/src/v2/w2l_template_view/W2lTemplateViewFc.tsx

@@ -108,8 +108,6 @@ function W2lTemplateViewFc(props: Props) {
           </tr>
         </tbody>
       </table>
-
-
     </div>
   )
 }