Specify possible routes in enum

4 files changed, 29 insertions, 34 deletions

diff --git a/gui/src/renderer/components/AppRouter.tsx b/gui/src/renderer/components/AppRouter.tsx
index 7c534597af..1816541b49 100644
--- a/gui/src/renderer/components/AppRouter.tsx
+++ b/gui/src/renderer/components/AppRouter.tsx
@@ -1,6 +1,6 @@
 import { Action } from 'history';
 import * as React from 'react';
-import { Route as ReactRouterRoute, Switch } from 'react-router';
+import { Route, Switch } from 'react-router';
 import Launch from './Launch';
 import KeyboardNavigation from './KeyboardNavigation';
 import MainView from './MainView';
@@ -32,18 +32,6 @@ interface IAppRoutesState {
   action?: Action;
 }
 
-interface IRouteProps<T> {
-  component: React.ComponentType<T>;
-  path: RoutePath | RoutePath[];
-  exact?: boolean;
-}
-
-function Route<T>(props: IRouteProps<T>) {
-  return (
-    <ReactRouterRoute path={props.path} exact={props.exact ?? true} component={props.component} />
-  );
-}
-
 class AppRouter extends React.Component<IHistoryProps, IAppRoutesState> {
   private unobserveHistory?: () => void;
 
@@ -86,22 +74,26 @@ class AppRouter extends React.Component<IHistoryProps, IAppRoutesState> {
             <TransitionContainer onTransitionEnd={this.onNavigation} {...this.state.transition}>
               <TransitionView viewId={location.key || ''}>
                 <Switch key={location.key} location={location}>
-                  <Route path={RoutePath.launch} component={Launch} />
-                  <Route path={RoutePath.login} component={LoginPage} />
-                  <Route path={RoutePath.main} component={MainView} />
-                  <Route path={RoutePath.redeemVoucher} component={VoucherInput} />
-                  <Route path={RoutePath.voucherSuccess} component={VoucherVerificationSuccess} />
-                  <Route path={RoutePath.timeAdded} component={TimeAdded} />
-                  <Route path={RoutePath.setupFinished} component={SetupFinished} />
-                  <Route path={RoutePath.settings} component={SettingsPage} />
-                  <Route path={RoutePath.selectLanguage} component={SelectLanguagePage} />
-                  <Route path={RoutePath.accountSettings} component={AccountPage} />
-                  <Route path={RoutePath.preferences} component={PreferencesPage} />
-                  <Route path={RoutePath.advancedSettings} component={AdvancedSettingsPage} />
-                  <Route path={RoutePath.wireguardKeys} component={WireguardKeysPage} />
-                  <Route path={RoutePath.splitTunneling} component={SplitTunnelingSettings} />
-                  <Route path={RoutePath.support} component={SupportPage} />
-                  <Route path={RoutePath.selectLocation} component={SelectLocationPage} />
+                  <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>
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]);