Major refactor of the version migration

2026-11-04 01:18:34 +00:00 · 2021-05-26 00:16:23 -04:00
1 parent d9760b4535
commit fa6dcfe7fb
@@ -1674,6 +1674,12 @@
        "@types/node": "*"
      }
    },
+    "@types/history": {
+      "version": "4.7.8",
+      "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.8.tgz",
+      "integrity": "sha512-S78QIYirQcUoo6UJZx9CSP0O2ix9IaeAXwQi26Rhr/+mg7qqPy8TzaxHSUut7eGjL8WmLccT7/MXf304WjqHcA==",
+      "dev": true
+    },
    "@types/howler": {
      "version": "2.1.2",
      "resolved": "https://registry.npmjs.org/@types/howler/-/howler-2.1.2.tgz",
@@ -1756,6 +1762,27 @@
        "@types/react": "*"
      }
    },
+    "@types/react-router": {
+      "version": "5.1.14",
+      "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.14.tgz",
+      "integrity": "sha512-LAJpqYUaCTMT2anZheoidiIymt8MuX286zoVFPM3DVb23aQBH0mAkFvzpd4LKqiolV8bBtZWT5Qp7hClCNDENw==",
+      "dev": true,
+      "requires": {
+        "@types/history": "*",
+        "@types/react": "*"
+      }
+    },
+    "@types/react-router-dom": {
+      "version": "5.1.7",
+      "resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.1.7.tgz",
+      "integrity": "sha512-D5mHD6TbdV/DNHYsnwBTv+y73ei+mMjrkGrla86HthE4/PVvL1J94Bu3qABU+COXzpL23T1EZapVVpwHuBXiUg==",
+      "dev": true,
+      "requires": {
+        "@types/history": "*",
+        "@types/react": "*",
+        "@types/react-router": "*"
+      }
+    },
    "@types/stack-utils": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz",
@@ -6457,6 +6484,19 @@
      "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz",
      "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ=="
    },
+    "history": {
+      "version": "4.10.1",
+      "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
+      "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==",
+      "requires": {
+        "@babel/runtime": "^7.1.2",
+        "loose-envify": "^1.2.0",
+        "resolve-pathname": "^3.0.0",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0",
+        "value-equal": "^1.0.1"
+      }
+    },
    "hmac-drbg": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
@@ -6467,6 +6507,14 @@
        "minimalistic-crypto-utils": "^1.0.1"
      }
    },
+    "hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "requires": {
+        "react-is": "^16.7.0"
+      }
+    },
    "hosted-git-info": {
      "version": "2.8.8",
      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.8.tgz",
@@ -8530,6 +8578,25 @@
      "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
      "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg=="
    },
+    "mini-create-react-context": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz",
+      "integrity": "sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==",
+      "requires": {
+        "@babel/runtime": "^7.12.1",
+        "tiny-warning": "^1.0.3"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.14.0",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.14.0.tgz",
+          "integrity": "sha512-JELkvo/DlpNdJ7dlyw/eY7E0suy5i5GQH+Vlxaq1nsNJ+H7f4Vtv3jMeCEgRhZZQFXTjldYfQgv2qmM6M1v5wA==",
+          "requires": {
+            "regenerator-runtime": "^0.13.4"
+          }
+        }
+      }
+    },
    "mini-css-extract-plugin": {
      "version": "0.9.0",
      "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.9.0.tgz",
@@ -11172,6 +11239,52 @@
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
    },
+    "react-router": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz",
+      "integrity": "sha512-smz1DUuFHRKdcJC0jobGo8cVbhO3x50tCL4icacOlcwDOEQPq4TMqwx3sY1TP+DvtTgz4nm3thuo7A+BK2U0Dw==",
+      "requires": {
+        "@babel/runtime": "^7.1.2",
+        "history": "^4.9.0",
+        "hoist-non-react-statics": "^3.1.0",
+        "loose-envify": "^1.3.1",
+        "mini-create-react-context": "^0.4.0",
+        "path-to-regexp": "^1.7.0",
+        "prop-types": "^15.6.2",
+        "react-is": "^16.6.0",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "0.0.1",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
+        },
+        "path-to-regexp": {
+          "version": "1.8.0",
+          "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
+          "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
+          "requires": {
+            "isarray": "0.0.1"
+          }
+        }
+      }
+    },
+    "react-router-dom": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.2.0.tgz",
+      "integrity": "sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA==",
+      "requires": {
+        "@babel/runtime": "^7.1.2",
+        "history": "^4.9.0",
+        "loose-envify": "^1.3.1",
+        "prop-types": "^15.6.2",
+        "react-router": "5.2.0",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0"
+      }
+    },
    "react-scripts": {
      "version": "3.4.1",
      "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-3.4.1.tgz",
@@ -11590,6 +11703,11 @@
      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz",
      "integrity": "sha1-six699nWiBvItuZTM17rywoYh0g="
    },
+    "resolve-pathname": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz",
+      "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng=="
+    },
    "resolve-url": {
      "version": "0.2.1",
      "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
@@ -13116,6 +13234,16 @@
      "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",
      "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q="
    },
+    "tiny-invariant": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz",
+      "integrity": "sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw=="
+    },
+    "tiny-warning": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
+      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
+    },
    "tmp": {
      "version": "0.0.33",
      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
@@ -13505,6 +13633,11 @@
        "spdx-expression-parse": "^3.0.0"
      }
    },
+    "value-equal": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz",
+      "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw=="
+    },
    "vary": {
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
@@ -21,6 +21,7 @@
    "node-sass": "^4.14.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
+    "react-router-dom": "^5.2.0",
    "react-scripts": "3.4.1",
    "typescript": "^3.7.5",
    "uuid": "^8.3.2"
@@ -49,5 +50,7 @@
      "last 1 safari version"
    ]
  },
-  "devDependencies": {}
+  "devDependencies": {
+    "@types/react-router-dom": "^5.1.7"
+  }
 }
@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import App from './migration/OldVocodesContainer';
+import App from './v1/OldVocodesContainer';

 test('renders learn react link', () => {
  const { getByText } = render(<App />);
@@ -2,11 +2,12 @@ import 'bulma/css/bulma.css'
 import './App.scss';

 import React from 'react';
-import { NewOldVocodesSwitch } from './migration/NewOldVocodesSwitch';
-import { OldVocodesContainer } from './migration/OldVocodesContainer';
-import { NewVocodesContainer } from './migration/NewVocodesContainer';
-import { ApiConfig } from './api/ApiConfig';
-import { SessionStateResponse } from './api/SessionState';
+import { MigrationTopNav } from './migration/MigrationTopNav';
+import { OldVocodesContainer } from './v1/OldVocodesContainer';
+import { NewVocodesContainer } from './v2/NewVocodesContainer';
+import { ApiConfig } from './v1/api/ApiConfig';
+import { SessionStateResponse } from './v1/api/SessionState';
+import { SessionWrapper } from './session/SessionWrapper';

 enum MigrationMode {
  NEW_VOCODES,
@@ -27,8 +28,7 @@ interface State {

  // Rollout of vocodes 2.0
  enableAlpha: boolean,
-  loggedIn: boolean,
-  sessionState?: SessionStateResponse,
+  sessionWrapper: SessionWrapper,
 }

 class App extends React.Component<Props, State> {
@@ -43,7 +43,7 @@ class App extends React.Component<Props, State> {
    this.state = {
      enableAlpha: enableAlpha,
      migrationMode: migrationMode,
-      loggedIn: false,
+      sessionWrapper: SessionWrapper.emptySession(),
    }
  }

@@ -71,14 +71,16 @@ class App extends React.Component<Props, State> {
    })
    .then(res => res.json())
    .then(response => {
-      const session : SessionStateResponse = response;
+      const sessionResponse : SessionStateResponse = response;

-      if (session !== undefined) {
-        this.setState({ 
-          sessionState : session,
-          loggedIn: session.logged_in,
-        });
+      if (sessionResponse === undefined) {
+        return; // Endpoint error?
      }
+
+      const sessionWrapper = SessionWrapper.wrapResponse(sessionResponse);
+      this.setState({ 
+        sessionWrapper: sessionWrapper,
+      });
    })
    .catch(e => { /* Ignore. */ });
  }
@@ -115,9 +117,9 @@ class App extends React.Component<Props, State> {
      case MigrationMode.NEW_VOCODES:
        innerComponent = (
          <div>
-            <NewVocodesContainer
+            {/*<NewVocodesContainer
              sessionState={this.state.sessionState}
-              />
+            />*/}
          </div>
        );
        break;
@@ -136,16 +138,16 @@ class App extends React.Component<Props, State> {
    return (
      <div id="main" className="mainwrap">
        <div id="viewable">
-          <NewOldVocodesSwitch
+          <MigrationTopNav
            enableAlpha={this.state.enableAlpha}
            migrationMode={this.state.migrationMode}
            setMigrationModeCallback={this.setMigrationMode}
-            sessionState={this.state.sessionState}
+            sessionWrapper={this.state.sessionWrapper}
            />

-        <div className="migrationComponentWrapper">
-          {innerComponent}
-        </div>
+          <div className="migrationComponentWrapper">
+            {innerComponent}
+          </div>

        </div>
      </div>
@@ -0,0 +1,37 @@
+import React from 'react';
+import { MigrationMode } from '../App'
+import { MigrationTopNav_Session } from './MigrationTopNav_Session';
+import { MigrationTopNav_VersionSwitch } from './MigrationTopNav_VersionSwitch';
+import { SessionWrapper } from '../session/SessionWrapper';
+
+interface Props {
+  sessionWrapper: SessionWrapper,
+  enableAlpha: boolean,
+  migrationMode: MigrationMode,
+  setMigrationModeCallback: (mode: MigrationMode) => void,
+}
+
+function MigrationTopNav(props: Props) {
+  if (!props.enableAlpha) {
+    return <nav />
+  }
+
+  return (
+    <nav>
+      <MigrationTopNav_VersionSwitch
+        sessionWrapper={props.sessionWrapper}
+        enableAlpha={props.enableAlpha}
+        migrationMode={props.migrationMode}
+        setMigrationModeCallback={props.setMigrationModeCallback}
+        />
+      <MigrationTopNav_Session
+        sessionWrapper={props.sessionWrapper}
+        enableAlpha={props.enableAlpha}
+        migrationMode={props.migrationMode}
+        setMigrationModeCallback={props.setMigrationModeCallback}
+        />
+    </nav>
+  )
+}
+
+export { MigrationTopNav };
@@ -0,0 +1,41 @@
+import React from 'react';
+import { MigrationMode } from '../App'
+import { SessionWrapper } from '../session/SessionWrapper';
+
+interface Props {
+  sessionWrapper: SessionWrapper,
+  enableAlpha: boolean,
+  migrationMode: MigrationMode,
+  setMigrationModeCallback: (mode: MigrationMode) => void,
+}
+
+function MigrationTopNav_Session(props: Props) {
+  if (!props.enableAlpha) {
+    return <nav />
+  }
+
+  let loggedIn = props.sessionWrapper.isLoggedIn();
+  let displayName = props.sessionWrapper.getDisplayName();
+
+  if (displayName === 'undefined') {
+    displayName = 'My Account';
+  }
+
+  let sessionLink = <p />;
+
+  if (loggedIn) {
+    sessionLink = <button
+          className="button is-alert is-inverted is-pulled-right"
+          onClick={() => props.setMigrationModeCallback(MigrationMode.OLD_VOCODES)}
+          >{displayName}</button>
+  } else {
+    sessionLink = <button
+          className="button is-danger is-pulled-right"
+          onClick={() => props.setMigrationModeCallback(MigrationMode.OLD_VOCODES)}
+          >Sign Up / Login</button>
+  }
+
+  return sessionLink;
+}
+
+export { MigrationTopNav_Session };
@@ -0,0 +1,44 @@
+import React from 'react';
+import { MigrationMode } from '../App'
+import { SessionWrapper } from '../session/SessionWrapper';
+
+interface Props {
+  sessionWrapper: SessionWrapper,
+  enableAlpha: boolean,
+  migrationMode: MigrationMode,
+  setMigrationModeCallback: (mode: MigrationMode) => void,
+}
+
+function MigrationTopNav_VersionSwitch(props: Props) {
+  if (!props.enableAlpha) {
+    return <nav />
+  }
+
+  let loggedIn = props.sessionWrapper.isLoggedIn();
+  let displayName = props.sessionWrapper.getDisplayName();
+
+  if (displayName === 'undefined') {
+    displayName = 'My Account';
+  }
+
+  let switchLink = <p />;
+
+  switch (props.migrationMode) {
+    case MigrationMode.NEW_VOCODES:
+      switchLink = <button 
+            className="button is-danger is-inverted"
+            onClick={() => props.setMigrationModeCallback(MigrationMode.OLD_VOCODES)}
+            >Switch to old vocodes (80+ voices)</button>
+      break;
+    case MigrationMode.OLD_VOCODES:
+      switchLink = <button 
+            className="button is-danger is-inverted"
+            onClick={() => props.setMigrationModeCallback(MigrationMode.NEW_VOCODES)}
+            >Switch to new vocodes (custom voices, video uploads, and more!)</button>
+      break;
+  }
+
+  return switchLink;
+}
+
+export { MigrationTopNav_VersionSwitch };
@@ -1,67 +0,0 @@
-import React from 'react';
-import { MigrationMode } from '../App'
-import { SessionStateResponse } from '../api/SessionState';
-
-interface Props {
-  sessionState?: SessionStateResponse,
-  enableAlpha: boolean,
-  migrationMode: MigrationMode,
-  setMigrationModeCallback: (mode: MigrationMode) => void,
-}
-
-function NewOldVocodesSwitch(props: Props) {
-  if (!props.enableAlpha) {
-    return <nav />
-  }
-
-  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;
-    }
-  }
-
-  let switchLink = <p />;
-  let sessionLink = <p />;
-
-  switch (props.migrationMode) {
-    case MigrationMode.NEW_VOCODES:
-      switchLink = <button 
-            className="button is-danger is-inverted"
-            onClick={() => props.setMigrationModeCallback(MigrationMode.OLD_VOCODES)}
-            >Switch to old vocodes (80+ voices)</button>
-      break;
-    case MigrationMode.OLD_VOCODES:
-      switchLink = <button 
-            className="button is-danger is-inverted"
-            onClick={() => props.setMigrationModeCallback(MigrationMode.NEW_VOCODES)}
-            >Switch to new vocodes (custom voices, video uploads, and more!)</button>
-      break;
-  }
-
-  if (loggedIn) {
-    sessionLink = <button
-          className="button is-alert is-inverted is-pulled-right"
-          onClick={() => props.setMigrationModeCallback(MigrationMode.OLD_VOCODES)}
-          >{displayName}</button>
-  } else {
-    sessionLink = <button
-          className="button is-danger is-pulled-right"
-          onClick={() => props.setMigrationModeCallback(MigrationMode.OLD_VOCODES)}
-          >Sign Up / Login</button>
-  }
-
-  return (
-    <nav>
-      {switchLink}
-      {sessionLink}
-    </nav>
-  )
-}
-
-export { NewOldVocodesSwitch };
@@ -0,0 +1,32 @@
+import { SessionStateResponse } from "./SessionState";
+
+export class SessionWrapper {
+  sessionStateResponse?: SessionStateResponse;
+
+  private constructor(sessionStateResponse?: SessionStateResponse) {
+    this.sessionStateResponse = sessionStateResponse;
+  }
+
+  public static emptySession() : SessionWrapper {
+    return new SessionWrapper();
+  }
+
+  public static wrapResponse(sessionStateResponse: SessionStateResponse) : SessionWrapper {
+    return new SessionWrapper(sessionStateResponse);
+  }
+
+  public isLoggedIn() : boolean {
+    if (this.sessionStateResponse === undefined) {
+      return false;
+    }
+    return this.sessionStateResponse.logged_in;
+  }
+
+  public getUsername() : string | undefined {
+    return this.sessionStateResponse?.user?.username;
+  }
+
+  public getDisplayName() : string | undefined {
+    return this.sessionStateResponse?.user?.display_name;
+  }
+}
@@ -1,25 +1,25 @@
 import React from 'react';
-import { AboutComponent } from '../modes/about/AboutComponent';
-import { ExtrasMode } from '../modes/speak/SpeakComponent';
-import { Footer } from '../navigation/Footer';
-import { HistoryComponent } from '../modes/history/HistoryComponent';
+import { AboutComponent } from './modes/about/AboutComponent';
+import { ExtrasMode } from './modes/speak/SpeakComponent';
+import { Footer } from './navigation/Footer';
+import { HistoryComponent } from './modes/history/HistoryComponent';
 import { Mode } from '../AppMode';
-import { SpeakComponent } from '../modes/speak/SpeakComponent';
-import { Speaker, SpeakerCategory, SPEAKERS, SPEAKER_CATEGORIES, CATEGORY_ALL_BY_NAME, SPEAKERS_BY_CATEGORY } from '../model/Speakers';
-import { Spectrogram } from '../modes/speak/extras/Spectrogram';
-import { TermsComponent } from '../modes/terms/TermsComponent';
-import { TopNav } from '../navigation/TopNav';
-import { Utterance } from '../model/utterance';
-import { VideoComponent } from '../modes/video/VideoComponent';
-import { VideoJob, VideoJobStatus } from '../modes/video/VideoJob';
-import { VideoJobPoller } from '../modes/video/VideoJobPoller';
-import { VideoQueuePoller } from '../modes/video/VideoQueuePoller';
-import { VideoQueueStats } from '../modes/video/VideoQueueStats';
-import { SignupComponent } from '../modes/signup/SignupComponent';
-import { ApiConfig } from '../api/ApiConfig';
-import { SessionStateResponse } from '../api/SessionState';
-import { LoginComponent } from '../modes/login/LoginComponent';
-import { UploadComponent } from '../modes/upload/UploadComponent';
+import { SpeakComponent } from './modes/speak/SpeakComponent';
+import { Speaker, SpeakerCategory, SPEAKERS, SPEAKER_CATEGORIES, CATEGORY_ALL_BY_NAME, SPEAKERS_BY_CATEGORY } from './model/Speakers';
+import { Spectrogram } from './modes/speak/extras/Spectrogram';
+import { TermsComponent } from './modes/terms/TermsComponent';
+import { TopNav } from './navigation/TopNav';
+import { Utterance } from './model/utterance';
+import { VideoComponent } from './modes/video/VideoComponent';
+import { VideoJob, VideoJobStatus } from './modes/video/VideoJob';
+import { VideoJobPoller } from './modes/video/VideoJobPoller';
+import { VideoQueuePoller } from './modes/video/VideoQueuePoller';
+import { VideoQueueStats } from './modes/video/VideoQueueStats';
+import { SignupComponent } from './modes/signup/SignupComponent';
+import { ApiConfig } from './api/ApiConfig';
+import { SessionStateResponse } from './api/SessionState';
+import { LoginComponent } from './modes/login/LoginComponent';
+import { UploadComponent } from './modes/upload/UploadComponent';

 interface Props {
  // Certan browsers (iPhone) have pitiful support for drawing APIs. Worse yet,
@@ -0,0 +1,18 @@
+
+// Responses from the `/sessions` endpoint.
+export interface SessionStateResponse {
+  // API call was successful
+  success: boolean,
+
+  // Whether the user is logged in
+  logged_in: boolean,
+
+  // Extended user details (only if logged in)
+  user?: UserInfo,
+}
+
+export interface UserInfo {
+  user_token: string,
+  username: string,
+  display_name: string,
+}
@@ -1,6 +1,6 @@
 import React from 'react';
 import { ApiConfig } from '../../api/ApiConfig';
-import { Mode } from '../../AppMode';
+import { Mode } from '../../../AppMode';

 enum FieldTriState {
  EMPTY_FALSE,
@@ -1,6 +1,6 @@
 import React from 'react';
 import { ApiConfig } from '../../api/ApiConfig';
-import { Mode } from '../../AppMode';
+import { Mode } from '../../../AppMode';

 enum FieldTriState {
  EMPTY_FALSE,
@@ -6,10 +6,10 @@ import { SpeakerDropdown } from './dropdowns/SpeakerDropdown';
 import { SpeakerInfo } from './extras/SpeakerInfo';
 import { Spectrogram } from './extras/Spectrogram';
 import { SpectrogramComponent } from './extras/SpectrogramComponent';
-import { SpectrogramMode } from '../../migration/OldVocodesContainer';
+import { SpectrogramMode } from '../../OldVocodesContainer';
 import { StatusText } from './StatusText';
 import { Utterance } from '../../model/utterance';
-import { getRandomInt } from '../../Utils';
+import { getRandomInt } from '../../../Utils';
 import { NewsNotice } from './NewsNotice';

 enum StatusState {
@@ -1,5 +1,5 @@
 import { ColorMap, createColorMap, linearScale, RGBColor } from "@colormap/core";
-import { SpectrogramMode } from "../../../migration/OldVocodesContainer";
+import { SpectrogramMode } from "../../../OldVocodesContainer";
 import { VIRIDIS, INFERNO, MAGMA, BLACK_WHITE, CIVIDIS, PLASMA,  } from "@colormap/presets";
 import { BONE } from "../../../extra_colormaps/colormap-bone";
 import { COPPER } from "../../../extra_colormaps/colormap-copper";
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Spectrogram, nextSpectrogramMode } from './Spectrogram';
-import { SpectrogramMode } from '../../../migration/OldVocodesContainer';
+import { SpectrogramMode } from '../../../OldVocodesContainer';

 interface Props {
  currentSpectrogram?: Spectrogram,
@@ -1,6 +1,6 @@
 import React from 'react';
 import { ApiConfig } from '../../api/ApiConfig';
-import { Mode } from '../../AppMode';
+import { Mode } from '../../../AppMode';
 import { v4 } from 'uuid';

 enum UploadType {
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Mode } from '../AppMode'
+import { Mode } from '../../AppMode'

 interface Props {
  mode: Mode,
@@ -1,5 +1,5 @@
 import React from 'react';
-import { NewMode } from '../migration/NewVocodesContainer'
+import { NewMode } from '../../v2/NewVocodesContainer'
 import { SessionStateResponse } from '../api/SessionState';

 interface Props {
@@ -55,7 +55,7 @@ function NewTopNav(props: Props) {
          <button 
            className="button is-link is-large is-inverted"
            onClick={() => props.switchModeCallback(NewMode.MY_PROFILE_MODE)}
-            >{displayName}</button>
+            >Firehose</button>
        </div>
      );
    } else {
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Mode } from '../AppMode'
+import { Mode } from '../../AppMode'
 import { SessionStateResponse } from '../api/SessionState';

 interface Props {
@@ -1,8 +1,8 @@
 import React from 'react';
-import { NewTopNav } from '../navigation/NewTopNav';
-import { SessionStateResponse } from '../api/SessionState';
-import { LoginComponent } from '../modes/login/LoginComponent';
-import { SignupComponent } from '../modes/signup/SignupComponent';
+import { NewTopNav } from '../v1/navigation/NewTopNav';
+import { SessionStateResponse } from '../v1/api/SessionState';
+import { LoginComponent } from '../v1/modes/login/LoginComponent';
+import { SignupComponent } from '../v1/modes/signup/SignupComponent';


 enum NewMode {