Fix authenticated routing issues

src/components/App/index.jsx

@@ -1,35 +1,12 @@
-import React, { Suspense } from 'react';
-import {
-  BrowserRouter,
-  Switch,
-  Route
-} from 'react-router-dom';
+import React from 'react';
 import { UserProvider } from '../Contexts/UserContext';
-import { ProtectedRoute } from '../Routes/ProtectedRoute';
-import { MessageBar } from '../MessageBar';
-
-const SignInForm = React.lazy(() => import('../SignInForm'));
-const SignUpForm = React.lazy(() => import('../SignUpForm'));
-const FileUploadForm = React.lazy(() => import('../FileUploadForm'));
+import SiteRoutes from '../Routes/SiteRoutes';
 
 function App() {
   return (
-    <Suspense fallback={"Loading..."}>
     <UserProvider>
-        <MessageBar />
-        <BrowserRouter>
-          <Switch>
-            <Route path="/" exact>
-              <SignInForm />
-            </Route>
-            <Route path="/signup">
-              <SignUpForm />
-            </Route>
-            <ProtectedRoute path="/upload" render={() => <FileUploadForm />} />
-          </Switch>    
-        </BrowserRouter>
+      <SiteRoutes />
     </UserProvider>
-    </Suspense>
   );
 }
 

src/components/Routes/AuthRoute.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Redirect, Route } from 'react-router-dom';
+
+export const TYPES = {
+  PUBLIC: 0,
+  GUEST: 1,
+  PROTECTED: 2,
+};
+
+export const AuthRoute = ({ token, type, ...others }) => {
+  if (!token && type === TYPES.PROTECTED) {
+      return <Redirect to="/" />;
+  }
+  else if (token && type === TYPES.GUEST) {
+    return <Redirect to="/home" />;
+  }
+  return <Route render {...others} />;
+}

src/components/Routes/ProtectedRoute.jsx

@@ -3,7 +3,9 @@ import { Redirect, Route } from 'react-router-dom';
 import { useUserContext }  from '../Contexts/UserContext';
 
 export const ProtectedRoute = ({ render, ...others }) => {
-    const { token, setError } = useUserContext();
+    const context = useUserContext();
+    const { token, setError } = context;
+    debugger;
     if (!token) {
         setError('Please sign in to access');
         return <Redirect to="/" />;

src/components/Routes/SiteRoutes.jsx

@@ -0,0 +1,34 @@
+import React, { Suspense } from 'react';
+import {
+  BrowserRouter,
+  Switch,
+  Route
+} from 'react-router-dom';
+
+import { AuthRoute, TYPES } from '../Routes/AuthRoute'
+import { MessageBar } from '../MessageBar';
+import { useUserContext }  from '../Contexts/UserContext';
+
+const SignInForm = React.lazy(() => import('../SignInForm'));
+const SignUpForm = React.lazy(() => import('../SignUpForm'));
+const FileUploadForm = React.lazy(() => import('../FileUploadForm'));
+
+const SiteRoutes = () => {
+  const { token } = useUserContext();
+  console.log('SiteRoutes', token);
+  return (
+    <Suspense fallback={"Loading..."}> 
+      <MessageBar />
+      <BrowserRouter>
+        <Switch>
+          <AuthRoute path="/" exact render={() => <SignInForm />} type={TYPES.GUEST} token={token} />
+          <AuthRoute path="/signup" exact render={() => <SignUpForm />} type={TYPES.GUEST} token={token} />
+          <AuthRoute path="/home" render={() => <FileUploadForm />} type={TYPES.PROTECTED} token={token} />
+        </Switch>    
+      </BrowserRouter>
+    </Suspense>
+  );
+};
+
+
+export default SiteRoutes;