From 69e1c6917b3b308bbadd392475bf2ad4a63fedf1 Mon Sep 17 00:00:00 2001 From: "Planoetscher Daniel (Student Com20)" <daniel.planoetscher@stud-inf.unibz.it> Date: Thu, 15 Apr 2021 13:55:02 +0200 Subject: [PATCH] adjusted routing system --- client/src/App.tsx | 13 ++++++------ client/src/adapters/api.ts | 2 +- .../helpers/Rerouters/LoginRoute.tsx | 19 ++++++++++++++++++ .../helpers/Rerouters/ProtectedRoute.tsx | 20 +++++++++++++++++++ client/src/pages/Register/register.scss | 1 + client/src/pages/Tasks/index.tsx | 10 +++++++--- 6 files changed, 54 insertions(+), 11 deletions(-) create mode 100644 client/src/components/helpers/Rerouters/LoginRoute.tsx create mode 100644 client/src/components/helpers/Rerouters/ProtectedRoute.tsx diff --git a/client/src/App.tsx b/client/src/App.tsx index 429313a..73eb7e1 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -1,24 +1,23 @@ import { Suspense, lazy } from 'react'; import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'; -import { isLoggedIn } from 'adapters/api'; +import ProtectedRoute from 'components/helpers/Rerouters/ProtectedRoute'; +import LoginRoute from 'components/helpers/Rerouters/LoginRoute'; const Home = lazy(() => import('pages/Home')); const Login = lazy(() => import('pages/Login')); const Register = lazy(() => import('pages/Register')); const Tasks = lazy(() => import('pages/Tasks')); -const Navigation = lazy(() => import('components/ui/Navigation')); export default function App() { return ( <Router> <Suspense fallback={false}> - {isLoggedIn() && <Navigation />} <Switch> - {!isLoggedIn() && <Route path="/register" component={Register} />} - {!isLoggedIn() && <Route exact path="/" component={Home} />} - {!isLoggedIn() && <Route path="/" component={Login} />} - <Route path="/" component={Tasks} /> + <ProtectedRoute path="/tasks" component={Tasks} /> + <LoginRoute path="/login" component={Login} /> + <LoginRoute path="/register" component={Register} /> + <Route path="/" component={Home} /> </Switch> </Suspense> </Router> diff --git a/client/src/adapters/api.ts b/client/src/adapters/api.ts index 929c441..2822704 100644 --- a/client/src/adapters/api.ts +++ b/client/src/adapters/api.ts @@ -1 +1 @@ -export const isLoggedIn = (): boolean => false; +export const isLoggedIn = (): boolean => true; diff --git a/client/src/components/helpers/Rerouters/LoginRoute.tsx b/client/src/components/helpers/Rerouters/LoginRoute.tsx new file mode 100644 index 0000000..56de569 --- /dev/null +++ b/client/src/components/helpers/Rerouters/LoginRoute.tsx @@ -0,0 +1,19 @@ +import { ComponentType } from 'react'; +import { Redirect, Route } from 'react-router-dom'; +import { isLoggedIn } from 'adapters/api'; + +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} /> + ); + } + return ( + <Redirect to="/tasks"/> + ); +} \ No newline at end of file diff --git a/client/src/components/helpers/Rerouters/ProtectedRoute.tsx b/client/src/components/helpers/Rerouters/ProtectedRoute.tsx new file mode 100644 index 0000000..1d9ff00 --- /dev/null +++ b/client/src/components/helpers/Rerouters/ProtectedRoute.tsx @@ -0,0 +1,20 @@ + +import { ComponentType } from 'react'; +import { Redirect, Route } from 'react-router-dom'; +import { isLoggedIn } from 'adapters/api'; + +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} /> + ); + } + return ( + <Redirect to="/login" /> + ); +} \ No newline at end of file diff --git a/client/src/pages/Register/register.scss b/client/src/pages/Register/register.scss index e69de29..8b13789 100644 --- a/client/src/pages/Register/register.scss +++ b/client/src/pages/Register/register.scss @@ -0,0 +1 @@ + diff --git a/client/src/pages/Tasks/index.tsx b/client/src/pages/Tasks/index.tsx index 9978280..8393561 100644 --- a/client/src/pages/Tasks/index.tsx +++ b/client/src/pages/Tasks/index.tsx @@ -1,9 +1,13 @@ +import Navigation from 'components/ui/Navigation'; import './tasks.scss'; export default function Tasks() { return ( - <main> - <h1>Tasks</h1> - </main> + <div className="tasks-page"> + <Navigation /> + <main> + <h1>Tasks</h1> + </main> + </div> ); } \ No newline at end of file -- GitLab