From d5d024300df48573f8af8f066d5f71f5516af495 Mon Sep 17 00:00:00 2001
From: Brendan Mulholland <brendan@recital.software>
Date: Tue, 3 Oct 2023 01:22:03 +0200
Subject: [PATCH] chore(routing): Switch to new react-router syntax (#638)

This is step #2 of upgrading to React Router v6. https://reactrouter.com/en/main/upgrading/v5#upgrade-to-react-router-v51

As reference, I looked at
https://reacttraining.com/blog/react-router-v5-1 and https://gist.github.com/mjackson/d54b40a094277b7afdd6b81f51a0393f
---
 src/app.tsx | 50 ++++++++++++++++++++++++++++++--------------------
 1 file changed, 30 insertions(+), 20 deletions(-)

diff --git a/src/app.tsx b/src/app.tsx
index 93d06482f..95cf9fbbf 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -4,6 +4,7 @@ import {
   HashRouter as Router,
   Route,
   Switch,
+  useLocation,
 } from 'react-router-dom';
 
 import { AppContext, AppProvider } from './context/App';
@@ -15,24 +16,16 @@ import { NotificationsRoute } from './routes/Notifications';
 import { SettingsRoute } from './routes/Settings';
 import { Sidebar } from './components/Sidebar';
 
-export const PrivateRoute = ({ component: Component, ...rest }) => {
+function RequireAuth({ children }) {
   const { isLoggedIn } = useContext(AppContext);
+  const location = useLocation();
 
-  return (
-    <Route
-      {...rest}
-      render={(props) =>
-        isLoggedIn ? (
-          <Component {...props} />
-        ) : (
-          <Redirect
-            to={{ pathname: '/login', state: { from: props.location } }}
-          />
-        )
-      }
-    />
+  return isLoggedIn ? (
+    children
+  ) : (
+    <Redirect to={{ pathname: '/login', state: { from: location } }} />
   );
-};
+}
 
 export const App = () => {
   return (
@@ -43,11 +36,28 @@ export const App = () => {
           <Sidebar />
 
           <Switch>
-            <PrivateRoute path="/" exact component={NotificationsRoute} />
-            <PrivateRoute path="/settings" exact component={SettingsRoute} />
-            <Route path="/login" component={LoginRoute} />
-            <Route path="/login-enterprise" component={LoginEnterpriseRoute} />
-            <Route path="/login-token" component={LoginWithToken} />
+            <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>
         </div>
       </Router>