Updated ProtectedRoute and LoginRoute

client/src/App.tsx

 
 import { Suspense, lazy } from 'react';
-import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
+import { BrowserRouter as Router, Switch, Route,  } from 'react-router-dom';
 import ProtectedRoute from 'components/helpers/Rerouters/ProtectedRoute'; 
 import LoginRoute from 'components/helpers/Rerouters/LoginRoute'; 
 
@@ -16,9 +16,9 @@ export default function App() {
         <Router>
             <Suspense fallback={false}>
                 <Switch>
-                    <ProtectedRoute path="/tasks" component={<Tasks />} />
-                    <ProtectedRoute path="/projects" component={<Projects />} />
-                    <ProtectedRoute path="/stats" component={<Stats />} />
+                    <ProtectedRoute path="/tasks" component={Tasks} />
+                    <ProtectedRoute path="/projects" component={Projects} />
+                    <ProtectedRoute path="/stats" component={Stats} />
                     <LoginRoute path="/login" component={Login} />
                     <LoginRoute path="/register" component={Register} />
                     <Route path="/" component={Home} />

client/src/adapters/api.ts

-export const isLoggedIn = (): boolean => true;
+
+export function isLoggedIn() {
+    return true;
+}
+

client/src/components/helpers/Rerouters/LoginRoute.tsx

-import { ComponentType } from 'react';
-import { Redirect, Route } from 'react-router-dom';
+
+import { Route, RouteProps, useHistory } from 'react-router-dom';
 import { isLoggedIn } from 'adapters/api';
+import { useEffect } from 'react';
 
-interface Props {
-    path: string,
-    exact?: boolean,
-    component: ComponentType<any>
-}
-export default function ProtectedRoute({ path, exact, component }: Props) {
-    if (!isLoggedIn()) {
-        return (
-            <Route path={path} exact={exact} component={component} />
-        );
-    }
+export default function LoginRoute(props: RouteProps) {
+    const history = useHistory();
+    useEffect(() => {
+        if (isLoggedIn()) {
+            if (history.length === 0) {
+                history.push('/tasks');
+            } else {
+                history.goBack();;
+            }
+        }
+    })
     return (
-        <Redirect to="/tasks"/>
+        <Route {...props} />
     );
-}
\ No newline at end of file
+}
+

client/src/components/helpers/Rerouters/ProtectedRoute.tsx

 
-import { Redirect, Route } from 'react-router-dom';
+import { Route, RouteProps, useHistory } from 'react-router-dom';
 import { isLoggedIn } from 'adapters/api';
-import Navigation from 'components/ui/Navigation';
-import Header from 'components/ui/Header';
+import { useEffect } from 'react';
 
-interface Props {
-    path: string,
-    exact?: boolean,
-    component: JSX.Element
-}
-
-
-export default function ProtectedRoute({ path, exact, component }: Props) {
-    console.log(component);
-
-
-    if (isLoggedIn()) {
-        return (
-            <Route path={path} exact={exact} render={() =>
-                <>
-                    <Header />
-                    <Navigation />
-                    { component }
-                </>
-            } />
-        );
-    }
+export default function ProtectedRoute(props: RouteProps) {
+    const history = useHistory();
+    useEffect(() => {
+        if (!isLoggedIn()) {
+            history.push('/login');
+        }
+    })
     return (
-        <Redirect to="/login" />
+        <Route {...props} />
     );
-}
\ No newline at end of file
+}
+