Migrate app to react-router v6 syntax; TODO tests

Author: Brendan Mulholland

src/app.tsx

@@ -1,9 +1,9 @@
 import React, { useContext } from 'react';
 import {
-  Redirect,
+  Navigate,
   HashRouter as Router,
   Route,
-  Switch,
+  Routes,
   useLocation,
 } from 'react-router-dom';
 
@@ -23,7 +23,7 @@ function RequireAuth({ children }) {
   return isLoggedIn ? (
     children
   ) : (
-    <Redirect to={{ pathname: '/login', state: { from: location } }} />
+    <Navigate to="/login" replace state={{ from: location }} />
   );
 }
 
@@ -35,30 +35,31 @@ export const App = () => {
           <Loading />
           <Sidebar />
 
-          <Switch>
-            <Route path="/" exact>
-              <RequireAuth>
-                <NotificationsRoute />
-              </RequireAuth>
-            </Route>
-            <Route path="/settings" exact>
-              <RequireAuth>
-                <SettingsRoute />
-              </RequireAuth>
-            </Route>
-            <Route path="/login">
-              <LoginRoute />
-            </Route>
-            <Route path="/login">
-              <LoginRoute />
-            </Route>
-            <Route path="/login-enterprise">
-              <LoginEnterpriseRoute />
-            </Route>
-            <Route path="/login-token">
-              <LoginWithToken />
-            </Route>
-          </Switch>
+          <Routes>
+            <Route
+              path="/"
+              element={
+                <RequireAuth>
+                  <NotificationsRoute />
+                </RequireAuth>
+              }
+            />
+            <Route
+              path="/settings"
+              element={
+                <RequireAuth>
+                  <SettingsRoute />
+                </RequireAuth>
+              }
+            />
+            <Route path="/login" element={<LoginRoute />} />
+            <Route path="/login" element={<LoginRoute />} />
+            <Route
+              path="/login-enterprise"
+              element={<LoginEnterpriseRoute />}
+            />
+            <Route path="/login-token" element={<LoginWithToken />} />
+          </Routes>
         </div>
       </Router>
     </AppProvider>

src/components/Sidebar.tsx

@@ -1,7 +1,7 @@
 import { BellIcon } from '@primer/octicons-react';
 import { ipcRenderer, shell } from 'electron';
 import React, { useCallback, useContext, useMemo } from 'react';
-import { useHistory, useLocation } from 'react-router-dom';
+import { useNavigate, useLocation } from 'react-router-dom';
 
 import { Logo } from '../components/Logo';
 import { AppContext } from '../context/App';
@@ -11,7 +11,7 @@ import { IconRefresh } from '../icons/Refresh';
 import { Constants } from '../utils/constants';
 
 export const Sidebar: React.FC = () => {
-  const history = useHistory();
+  const navigate = useNavigate();
   const location = useLocation();
 
   const { isLoggedIn } = useContext(AppContext);
@@ -66,7 +66,7 @@ export const Sidebar: React.FC = () => {
             <button
               className={footerButtonClasses}
               onClick={() => {
-                history.replace('/');
+                navigate('/', { replace: true });
                 fetchNotifications();
               }}
               aria-label="Refresh Notifications"
@@ -78,9 +78,9 @@ export const Sidebar: React.FC = () => {
               className={footerButtonClasses}
               onClick={() => {
                 if (location.pathname.startsWith('/settings')) {
-                  history.replace('/');
+                  navigate('/', { replace: true });
                 } else {
-                  history.push('/settings');
+                  navigate('/settings');
                 }
               }}
               aria-label="Settings"

src/routes/Login.tsx

@@ -1,19 +1,19 @@
 const { ipcRenderer } = require('electron');
 
 import React, { useCallback, useContext, useEffect } from 'react';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 
 import { AppContext } from '../context/App';
 import { Logo } from '../components/Logo';
 
 export const LoginRoute: React.FC = () => {
-  const history = useHistory();
+  const navigate = useNavigate();
   const { isLoggedIn, login } = useContext(AppContext);
 
   useEffect(() => {
     if (isLoggedIn) {
       ipcRenderer.send('reopen-window');
-      history.replace('/');
+      navigate('/', { replace: true });
     }
   }, [isLoggedIn]);
 
@@ -46,15 +46,15 @@ export const LoginRoute: React.FC = () => {
 
       <button
         className={loginButtonClass}
-        onClick={() => history.push('/login-enterprise')}
+        onClick={() => navigate('/login-enterprise')}
         aria-label="Login with GitHub Enterprise"
       >
         Login to GitHub Enterprise
       </button>
 
       <button
         className="bg-none hover:text-gray-800 dark:text-gray-100 dark:hover:text-gray-300 mt-4 focus:outline-none"
-        onClick={() => history.push('/login-token')}
+        onClick={() => navigate('/login-token')}
         aria-label="Login with Personal Token"
       >
         <small>or login with a personal token</small>

src/routes/LoginEnterprise.tsx

@@ -3,7 +3,7 @@ const ipcRenderer = require('electron').ipcRenderer;
 import React, { useCallback, useContext, useEffect } from 'react';
 import { Form, FormRenderProps } from 'react-final-form';
 import { ArrowLeftIcon } from '@primer/octicons-react';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 
 import { AppContext } from '../context/App';
 import { FieldInput } from '../components/fields/FieldInput';
@@ -55,12 +55,12 @@ export const LoginEnterpriseRoute: React.FC = () => {
     accounts: { enterpriseAccounts },
     loginEnterprise,
   } = useContext(AppContext);
-  const history = useHistory();
+  const navigate = useNavigate();
 
   useEffect(() => {
     if (enterpriseAccounts.length) {
       ipcRenderer.send('reopen-window');
-      history.goBack();
+      navigate(-1);
     }
   }, [enterpriseAccounts]);
 
@@ -109,7 +109,7 @@ export const LoginEnterpriseRoute: React.FC = () => {
         <button
           className="focus:outline-none"
           aria-label="Go Back"
-          onClick={() => history.goBack()}
+          onClick={() => navigate(-1)}
         >
           <ArrowLeftIcon size={20} className="hover:text-gray-400" />
         </button>

src/routes/LoginWithToken.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useContext, useState } from 'react';
 import { Form, FormRenderProps } from 'react-final-form';
 import { ArrowLeftIcon } from '@primer/octicons-react';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import { shell } from 'electron';
 
 import { AppContext } from '../context/App';
@@ -42,7 +42,7 @@ export const validate = (values: IValues): IFormErrors => {
 
 export const LoginWithToken: React.FC = () => {
   const { validateToken } = useContext(AppContext);
-  const history = useHistory();
+  const navigate = useNavigate();
   const [isValidToken, setIsValidToken] = useState<boolean>(true);
 
   const openLink = useCallback((url: string) => {
@@ -108,8 +108,8 @@ export const LoginWithToken: React.FC = () => {
   const submit = useCallback(async (data: IValues) => {
     setIsValidToken(true);
     try {
+      navigate(-1);
       await validateToken(data as AuthTokenOptions);
-      history.goBack();
     } catch (err) {
       setIsValidToken(false);
     }
@@ -121,7 +121,7 @@ export const LoginWithToken: React.FC = () => {
         <button
           className="focus:outline-none"
           aria-label="Go Back"
-          onClick={() => history.goBack()}
+          onClick={() => navigate(-1)}
         >
           <ArrowLeftIcon size={20} className="hover:text-gray-400" />
         </button>

src/routes/Settings.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useContext } from 'react';
 import { ipcRenderer, remote } from 'electron';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import { ArrowLeftIcon } from '@primer/octicons-react';
 
 import { AppContext } from '../context/App';
@@ -17,7 +17,7 @@ const isLinux = remote.process.platform === 'linux';
 
 export const SettingsRoute: React.FC = () => {
   const { settings, updateSetting, logout } = useContext(AppContext);
-  const history = useHistory();
+  const navigate = useNavigate();
 
   ipcRenderer.on('update-native-theme', (_, updatedAppearance: Appearance) => {
     if (settings.appearance === Appearance.SYSTEM) {
@@ -27,7 +27,7 @@ export const SettingsRoute: React.FC = () => {
 
   const logoutUser = useCallback(() => {
     logout();
-    history.goBack();
+    navigate(-1);
     updateTrayIcon();
   }, []);
 
@@ -36,7 +36,7 @@ export const SettingsRoute: React.FC = () => {
   }, []);
 
   const goToEnterprise = useCallback(() => {
-    return history.replace('/login-enterprise');
+    return navigate('/login-enterprise', { replace: true });
   }, []);
 
   const footerButtonClass =
@@ -48,7 +48,7 @@ export const SettingsRoute: React.FC = () => {
         <button
           className="focus:outline-none"
           aria-label="Go Back"
-          onClick={() => history.goBack()}
+          onClick={() => navigate(-1)}
         >
           <ArrowLeftIcon size={20} className="hover:text-gray-400" />
         </button>