Merge branch 'add-routes-enum'

4 files changed, 121 insertions, 5 deletions

diff --git a/gui/src/renderer/components/AppRouter.tsx b/gui/src/renderer/components/AppRouter.tsx
new file mode 100644
index 0000000000..1816541b49
--- /dev/null
+++ b/gui/src/renderer/components/AppRouter.tsx
@@ -0,0 +1,113 @@
+import { Action } from 'history';
+import * as React from 'react';
+import { Route, Switch } from 'react-router';
+import Launch from './Launch';
+import KeyboardNavigation from './KeyboardNavigation';
+import MainView from './MainView';
+import Focus, { IFocusHandle } from './Focus';
+import SplitTunnelingSettings from './SplitTunnelingSettings';
+import TransitionContainer, { TransitionView } from './TransitionContainer';
+import AccountPage from '../containers/AccountPage';
+import AdvancedSettingsPage from '../containers/AdvancedSettingsPage';
+import LoginPage from '../containers/LoginPage';
+import PlatformWindowContainer from '../containers/PlatformWindowContainer';
+import PreferencesPage from '../containers/PreferencesPage';
+import SelectLanguagePage from '../containers/SelectLanguagePage';
+import SelectLocationPage from '../containers/SelectLocationPage';
+import SettingsPage from '../containers/SettingsPage';
+import SupportPage from '../containers/SupportPage';
+import WireguardKeysPage from '../containers/WireguardKeysPage';
+import { IHistoryProps, ITransitionSpecification, transitions, withHistory } from '../lib/history';
+import {
+  SetupFinished,
+  TimeAdded,
+  VoucherInput,
+  VoucherVerificationSuccess,
+} from './ExpiredAccountAddTime';
+import { RoutePath } from '../lib/routes';
+
+interface IAppRoutesState {
+  currentLocation: IHistoryProps['history']['location'];
+  transition: ITransitionSpecification;
+  action?: Action;
+}
+
+class AppRouter extends React.Component<IHistoryProps, IAppRoutesState> {
+  private unobserveHistory?: () => void;
+
+  private focusRef = React.createRef<IFocusHandle>();
+
+  constructor(props: IHistoryProps) {
+    super(props);
+
+    this.state = {
+      currentLocation: props.history.location,
+      transition: transitions.none,
+    };
+  }
+
+  public componentDidMount() {
+    // React throttles updates, so it's impossible to capture the intermediate navigation without
+    // listening to the history directly.
+    this.unobserveHistory = this.props.history.listen((location, action, transition) => {
+      this.setState({
+        currentLocation: location,
+        transition,
+        action,
+      });
+    });
+  }
+
+  public componentWillUnmount() {
+    if (this.unobserveHistory) {
+      this.unobserveHistory();
+    }
+  }
+
+  public render() {
+    const location = this.state.currentLocation;
+
+    return (
+      <PlatformWindowContainer>
+        <KeyboardNavigation>
+          <Focus ref={this.focusRef}>
+            <TransitionContainer onTransitionEnd={this.onNavigation} {...this.state.transition}>
+              <TransitionView viewId={location.key || ''}>
+                <Switch key={location.key} location={location}>
+                  <Route exact path={RoutePath.launch} component={Launch} />
+                  <Route exact path={RoutePath.login} component={LoginPage} />
+                  <Route exact path={RoutePath.main} component={MainView} />
+                  <Route exact path={RoutePath.redeemVoucher} component={VoucherInput} />
+                  <Route
+                    exact
+                    path={RoutePath.voucherSuccess}
+                    component={VoucherVerificationSuccess}
+                  />
+                  <Route exact path={RoutePath.timeAdded} component={TimeAdded} />
+                  <Route exact path={RoutePath.setupFinished} component={SetupFinished} />
+                  <Route exact path={RoutePath.settings} component={SettingsPage} />
+                  <Route exact path={RoutePath.selectLanguage} component={SelectLanguagePage} />
+                  <Route exact path={RoutePath.accountSettings} component={AccountPage} />
+                  <Route exact path={RoutePath.preferences} component={PreferencesPage} />
+                  <Route exact path={RoutePath.advancedSettings} component={AdvancedSettingsPage} />
+                  <Route exact path={RoutePath.wireguardKeys} component={WireguardKeysPage} />
+                  <Route exact path={RoutePath.splitTunneling} component={SplitTunnelingSettings} />
+                  <Route exact path={RoutePath.support} component={SupportPage} />
+                  <Route exact path={RoutePath.selectLocation} component={SelectLocationPage} />
+                </Switch>
+              </TransitionView>
+            </TransitionContainer>
+          </Focus>
+        </KeyboardNavigation>
+      </PlatformWindowContainer>
+    );
+  }
+
+  private onNavigation = () => {
+    this.focusRef.current?.resetFocus();
+  };
+}
+
+const AppRoutesWithRouter = withHistory(AppRouter);
+
+export default AppRoutesWithRouter;
diff --git a/gui/src/renderer/components/ExpiredAccountAddTime.tsx b/gui/src/renderer/components/ExpiredAccountAddTime.tsx
index 24c335a551..43c2a4903f 100644
--- a/gui/src/renderer/components/ExpiredAccountAddTime.tsx
+++ b/gui/src/renderer/components/ExpiredAccountAddTime.tsx
@@ -8,6 +8,7 @@ import { messages } from '../../shared/gettext';
 import { useAppContext } from '../context';
 import useActions from '../lib/actionsHook';
 import { transitions, useHistory } from '../lib/history';
+import { RoutePath } from '../lib/routes';
 import account from '../redux/account/actions';
 import { IReduxState } from '../redux/store';
 import * as AppButton from './AppButton';
@@ -82,7 +83,7 @@ export function VoucherInput() {
   const history = useHistory();
 
   const onSuccess = useCallback(() => {
-    history.push('/main/voucher/success');
+    history.push(RoutePath.voucherSuccess);
   }, [history]);
 
   const navigateBack = useCallback(() => {
@@ -138,7 +139,7 @@ export function TimeAdded(props: ITimeAddedProps) {
 
   const navigateToSetupFinished = useCallback(() => {
     if (isNewAccount) {
-      history.push('/main/setup-finished');
+      history.push(RoutePath.setupFinished);
     } else {
       finish();
     }
@@ -263,7 +264,7 @@ function useFinishedCallback() {
       loggedIn();
     }
 
-    history.reset('/main', undefined, transitions.push);
+    history.reset(RoutePath.main, undefined, transitions.push);
   }, [isNewAccount, loggedIn, history]);
 
   return callback;
diff --git a/gui/src/renderer/components/HeaderBar.tsx b/gui/src/renderer/components/HeaderBar.tsx
index 35d2c2083a..42b074eaa3 100644
--- a/gui/src/renderer/components/HeaderBar.tsx
+++ b/gui/src/renderer/components/HeaderBar.tsx
@@ -9,6 +9,7 @@ import { IReduxState } from '../redux/store';
 import { FocusFallback } from './Focus';
 import { sourceSansPro } from './common-styles';
 import ImageView from './ImageView';
+import { RoutePath } from '../lib/routes';
 
 export enum HeaderBarStyle {
   default = 'default',
@@ -103,7 +104,7 @@ export function HeaderBarSettingsButton() {
   const history = useHistory();
 
   const openSettings = useCallback(() => {
-    history.show('/settings');
+    history.show(RoutePath.settings);
   }, [history]);
 
   return (
diff --git a/gui/src/renderer/components/MainView.tsx b/gui/src/renderer/components/MainView.tsx
index 3891a6e48b..eff5802666 100644
--- a/gui/src/renderer/components/MainView.tsx
+++ b/gui/src/renderer/components/MainView.tsx
@@ -5,6 +5,7 @@ import { IReduxState } from '../redux/store';
 import ConnectPage from '../containers/ConnectPage';
 import ExpiredAccountErrorViewContainer from '../containers/ExpiredAccountErrorViewContainer';
 import { useHistory } from '../lib/history';
+import { RoutePath } from '../lib/routes';
 
 export default function MainView() {
   const history = useHistory();
@@ -20,7 +21,7 @@ export default function MainView() {
     if (accountHasExpired) {
       setShowAccountExpired(true);
     } else if (showAccountExpired && !accountHasExpired) {
-      history.push('/main/time-added');
+      history.push(RoutePath.timeAdded);
     }
   }, [showAccountExpired, accountHasExpired]);