From 4b6d5ac4a027442c5a4fb164ef2bb9fc4323aaa2 Mon Sep 17 00:00:00 2001
From: Hazem Krimi <krimihazem1@gmail.com>
Date: Tue, 28 Mar 2023 22:13:03 +0100
Subject: [PATCH] Fix router

---
 src/App.tsx                             | 364 +++++++++++++++++-------
 src/components/Protected/index.tsx      |  19 ++
 src/components/ProtectedRoute/index.tsx |  13 -
 src/components/Public/index.tsx         |  19 ++
 src/components/PublicRoute/index.tsx    |  11 -
 src/components/index.tsx                |   8 +-
 6 files changed, 305 insertions(+), 129 deletions(-)
 create mode 100644 src/components/Protected/index.tsx
 delete mode 100644 src/components/ProtectedRoute/index.tsx
 create mode 100644 src/components/Public/index.tsx
 delete mode 100644 src/components/PublicRoute/index.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 365cc2a..1145618 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,10 +1,10 @@
 import jwtDecode from 'jwt-decode';
 import { useEffect } from 'react';
-import { Routes, Navigate } from 'react-router-dom';
+import { Routes, Route, Navigate } from 'react-router-dom';
 import { useLazyQuery, useReactiveVar } from '@apollo/client';
 import {
-  ProtectedRoute,
-  PublicRoute,
+  Protected,
+  Public,
   Navbar,
   Sidebar,
   Spinner,
@@ -91,109 +91,271 @@ const App = () => {
         </>
       )}
       <Routes>
-        <ProtectedRoute path='/'>
+        <Route path='/' element={
+          <Protected>
           {role !== 'admin' ? (
             <Navigate to='/project' />
           ) : (
             <Navigate to='/clients' />
           )}
-        </ProtectedRoute>
-        <ProtectedRoute path='/project'>
-          <Project />
-        </ProtectedRoute>
-        <ProtectedRoute path='/project/:id'>
-          <Project />
-        </ProtectedRoute>
-        <ProtectedRoute path='/payments/:id'>
-          <Payments />
-        </ProtectedRoute>
-        <ProtectedRoute path='/add-project'>
-          <AddProject />
-        </ProtectedRoute>
-        <ProtectedRoute path='/project-settings/:id'>
-          <UpdateProject />
-        </ProtectedRoute>
-        <ProtectedRoute path='/support-messaging/:project'>
-          <SupportMessaging />
-        </ProtectedRoute>
-        <ProtectedRoute path='/support-messaging/:project/:id'>
-          <SupportMessaging />
-        </ProtectedRoute>
-        <ProtectedRoute path='/template'>
-          <Template />
-        </ProtectedRoute>
-        <ProtectedRoute path='/template/:id'>
-          <Template />
-        </ProtectedRoute>
-        <ProtectedRoute path='/add-template'>
-          <AddTemplate />
-        </ProtectedRoute>
-        <ProtectedRoute path='/template-settings/:id'>
-          <TemplateSettings />
-        </ProtectedRoute>
-        <ProtectedRoute path='/add-template'>
-          <AddTemplate />
-        </ProtectedRoute>
-        <ProtectedRoute path='/feature'>
-          <Feature />
-        </ProtectedRoute>
-        <ProtectedRoute path='/feature/:id'>
-          <Feature />
-        </ProtectedRoute>
-        <ProtectedRoute path='/add-feature'>
-          <AddFeature />
-        </ProtectedRoute>
-        <ProtectedRoute path='/feature-settings/:id'>
-          <FeatureSettings />
-        </ProtectedRoute>
-        <ProtectedRoute path='/category'>
-          <Category />
-        </ProtectedRoute>
-        <ProtectedRoute path='/category/:id'>
-          <Category />
-        </ProtectedRoute>
-        <ProtectedRoute path='/add-category'>
-          <AddCategory />
-        </ProtectedRoute>
-        <ProtectedRoute path='/category-settings/:id'>
-          <CategorySettings />
-        </ProtectedRoute>
-        <ProtectedRoute path='/prototype/:id'>
-          <Prototype />
-        </ProtectedRoute>
-        <ProtectedRoute path='/clients'>
-          <Users />
-        </ProtectedRoute>
-        <ProtectedRoute path='/product-owners'>
-          <Users />
-        </ProtectedRoute>
-        <ProtectedRoute path='/developers'>
-          <Users />
-        </ProtectedRoute>
-        <ProtectedRoute path='/create-user/:role'>
-          <CreateUser />
-        </ProtectedRoute>
-        <ProtectedRoute path='/user-settings/:id'>
-          <UserSettings />
-        </ProtectedRoute>
-        <ProtectedRoute path='/settings'>
-          <Settings />
-        </ProtectedRoute>
-        <PublicRoute path='/login'>
-          <Login />
-        </PublicRoute>
-        <PublicRoute path='/signup'>
-          <Signup />
-        </PublicRoute>
-        <ProtectedRoute path='/additional-info'>
-          <AdditionalInfo />
-        </ProtectedRoute>
-        <PublicRoute path='/forgot-password'>
-          <ForgotPassword />
-        </PublicRoute>
-        <PublicRoute path='/recover-account'>
-          <RecoverAccount />
-        </PublicRoute>
+        </Protected>
+        } />
+        <Route
+          path='/project'
+          element={
+            <Protected>
+              <Project />
+            </Protected>
+          }
+        />
+        <Route
+          path='/project/:id'
+          element={
+            <Protected>
+              <Project />
+            </Protected>
+          }
+        />
+        <Route
+          path='/payments/:id'
+          element={
+            <Protected>
+              <Payments />
+            </Protected>
+          }
+        />
+        <Route
+          path='/add-project'
+          element={
+            <Protected>
+              <AddProject />
+            </Protected>
+          }
+        />
+        <Route
+          path='/project-settings/:id'
+          element={
+            <Protected>
+              <UpdateProject />
+            </Protected>
+          }
+        />
+        <Route
+          path='/support-messaging/:project'
+          element={
+            <Protected>
+              <SupportMessaging />
+            </Protected>
+          }
+        />
+        <Route
+          path='/support-messaging/:project/:id'
+          element={
+            <Protected>
+              <SupportMessaging />
+            </Protected>
+          }
+        />
+        <Route
+          path='/template'
+          element={
+            <Protected>
+              <Template />
+            </Protected>
+          }
+        />
+        <Route
+          path='/template/:id'
+          element={
+            <Protected>
+              <Template />
+            </Protected>
+          }
+        />
+        <Route
+          path='/add-template'
+          element={
+            <Protected>
+              <AddTemplate />
+            </Protected>
+          }
+        />
+        <Route
+          path='/template-settings/:id'
+          element={
+            <Protected>
+              <TemplateSettings />
+            </Protected>
+          }
+        />
+        <Route
+          path='/add-template'
+          element={
+            <Protected>
+              <AddTemplate />
+            </Protected>
+          }
+        />
+        <Route
+          path='/feature'
+          element={
+            <Protected>
+              <Feature />
+            </Protected>
+          }
+        />
+        <Route
+          path='/feature/:id'
+          element={
+            <Protected>
+              <Feature />
+            </Protected>
+          }
+        />
+        <Route
+          path='/add-feature'
+          element={
+            <Protected>
+              <AddFeature />
+            </Protected>
+          }
+        />
+        <Route
+          path='/feature-settings/:id'
+          element={
+            <Protected>
+              <FeatureSettings />
+            </Protected>
+          }
+        />
+        <Route
+          path='/category'
+          element={
+            <Protected>
+              <Category />
+            </Protected>
+          }
+        />
+        <Route
+          path='/category/:id'
+          element={
+            <Protected>
+              <Category />
+            </Protected>
+          }
+        />
+        <Route
+          path='/add-category'
+          element={
+            <Protected>
+              <AddCategory />
+            </Protected>
+          }
+        />
+        <Route
+          path='/category-settings/:id'
+          element={
+            <Protected>
+              <CategorySettings />
+            </Protected>
+          }
+        />
+        <Route
+          path='/prototype/:id'
+          element={
+            <Protected>
+              <Prototype />
+            </Protected>
+          }
+        />
+        <Route
+          path='/clients'
+          element={
+            <Protected>
+              <Users />
+            </Protected>
+          }
+        />
+        <Route
+          path='/product-owners'
+          element={
+            <Protected>
+              <Users />
+            </Protected>
+          }
+        />
+        <Route
+          path='/developers'
+          element={
+            <Protected>
+              <Users />
+            </Protected>
+          }
+        />
+        <Route
+          path='/create-user/:role'
+          element={
+            <Protected>
+              <CreateUser />
+            </Protected>
+          }
+        />
+        <Route
+          path='/user-settings/:id'
+          element={
+            <Protected>
+              <UserSettings />
+            </Protected>
+          }
+        />
+        <Route
+          path='/settings'
+          element={
+            <Protected>
+              <Settings />
+            </Protected>
+          }
+        />
+        <Route
+          path='/login'
+          element={
+            <Public>
+              <Login />
+            </Public>
+          }
+        />
+        <Route
+          path='/signup'
+          element={
+            <Public>
+              <Signup />
+            </Public>
+          }
+        />
+        <Route
+          path='/additional-info'
+          element={
+            <Protected>
+              <AdditionalInfo />
+            </Protected>
+          }
+        />
+        <Route
+          path='/forgot-password'
+          element={
+            <Public>
+              <ForgotPassword />
+            </Public>
+          }
+        />
+        <Route
+          path='/recover-account'
+          element={
+            <Public>
+              <RecoverAccount />
+            </Public>
+          }
+        />
       </Routes>
     </>
   ) : (
diff --git a/src/components/Protected/index.tsx b/src/components/Protected/index.tsx
new file mode 100644
index 0000000..04abfe3
--- /dev/null
+++ b/src/components/Protected/index.tsx
@@ -0,0 +1,19 @@
+import { useReactiveVar } from '@apollo/client';
+import { Navigate } from 'react-router-dom';
+import { tokenVar } from '../../graphql/state';
+
+type Props = {
+  children: React.ReactNode;
+};
+
+const Protected = ({ children }: Props) => {
+  const token = useReactiveVar(tokenVar);
+
+  return (
+    <>
+      {token ? children : <Navigate to='/login' />}
+    </>
+  );
+};
+
+export default Protected;
diff --git a/src/components/ProtectedRoute/index.tsx b/src/components/ProtectedRoute/index.tsx
deleted file mode 100644
index 4e0b81a..0000000
--- a/src/components/ProtectedRoute/index.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { useReactiveVar } from '@apollo/client';
-import { Navigate, Route, RouteProps } from 'react-router-dom';
-import { tokenVar } from '../../graphql/state';
-
-const ProtectedRoute: React.FC<RouteProps> = ({ children, ...rest }) => {
-  const token = useReactiveVar(tokenVar);
-
-  return (
-    <Route {...rest} element={token ? children : <Navigate to='/login' />} />
-  );
-};
-
-export default ProtectedRoute;
diff --git a/src/components/Public/index.tsx b/src/components/Public/index.tsx
new file mode 100644
index 0000000..fac62d5
--- /dev/null
+++ b/src/components/Public/index.tsx
@@ -0,0 +1,19 @@
+import { useReactiveVar } from '@apollo/client';
+import { Navigate } from 'react-router-dom';
+import { tokenVar } from '../../graphql/state';
+
+type Props = {
+  children: React.ReactNode;
+};
+
+const Public = ({ children }: Props) => {
+  const token = useReactiveVar(tokenVar);
+
+  return (
+    <>
+      {!token ? children : <Navigate to='/' />}
+    </>
+  );
+};
+
+export default Public;
diff --git a/src/components/PublicRoute/index.tsx b/src/components/PublicRoute/index.tsx
deleted file mode 100644
index 815693c..0000000
--- a/src/components/PublicRoute/index.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { useReactiveVar } from '@apollo/client';
-import { Navigate, Route, RouteProps } from 'react-router-dom';
-import { tokenVar } from '../../graphql/state';
-
-const PublicRoute: React.FC<RouteProps> = ({ children, ...rest }) => {
-  const token = useReactiveVar(tokenVar);
-
-  return <Route {...rest} element={!token ? children : <Navigate to='/' />} />;
-};
-
-export default PublicRoute;
diff --git a/src/components/index.tsx b/src/components/index.tsx
index eb55e63..bb8929c 100644
--- a/src/components/index.tsx
+++ b/src/components/index.tsx
@@ -15,8 +15,8 @@ import CheckBox from './CheckBox';
 import Menu from './Menu';
 import Navbar from './Navbar';
 import Sidebar from './Sidebar';
-import ProtectedRoute from './ProtectedRoute';
-import PublicRoute from './PublicRoute';
+import Protected from './Protected';
+import Public from './Public';
 import SectionSelector from './SectionSelector';
 import Modal from './Modal';
 import SidebarItem from './SidebarItem';
@@ -48,8 +48,8 @@ export {
   CheckBox,
   Navbar,
   Sidebar,
-  ProtectedRoute,
-  PublicRoute,
+  Protected,
+  Public,
   SectionSelector,
   Modal,
   SidebarItem,