Private/RestrictedRoute to components folder

src/App.tsx

@@ -3,7 +3,7 @@ import { ThemeProvider } from '@material-ui/core/styles';
 import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
 import { AuthUser } from 'components/AuthUser/AuthUser';
 import { LandingPage } from 'components/NonAuthUser/LandingPage/LandingPage';
-import { PrivateRoute } from 'api/PrivateRoute/PrivateRoute';
+import { PrivateRoute } from 'components/PrivateRoute/PrivateRoute';
 import { AuthRoutes, NonAuthRoutes } from 'api/routes';
 import { NotFound } from 'components/NonAuthUser/NotFound/NotFound';
 import { ProfilePage } from 'components/AuthUser/Dashboard/ProfilePage/ProfilePage';

src/components/AuthUser/AuthUser.tsx

@@ -5,7 +5,7 @@ import { AuthRoutes, NonAuthRoutes } from 'api/routes';
 import { SignInForm } from 'components/AuthUser/SignInForm/SignInForm';
 import { SignUpForm } from 'components/AuthUser/SignUpForm/SignUpForm';
 import { ChoseRole } from 'components/AuthUser/ChoseRole/ChoseRole';
-import { RestrictedRoute } from 'api/RestrictedRoute/RestrictedRoute';
+import { RestrictedRoute } from 'components/RestrictedRoute/RestrictedRoute';
 
 export const AuthUser: FC = () => {
   const { path } = useRouteMatch();

src/components/PrivateRoute/PrivateRoute.tsx

+import React, { useState, useEffect, useContext } from 'react';
+import { Route, Redirect, RouteProps } from 'react-router-dom';
+import { NonAuthRoutes } from 'api/routes';
+import { AuthContext } from 'components/AuthUser/AuthContext';
+
+/**
+ * A wrapper for <Route> that redirects to the login screen if you're not yet authenticated.
+ * Every non-public route must be wrapped with this component.
+ * */
+type Props = {
+  Component: React.FC<RouteProps>;
+  path: string;
+  requiredRoles: string[];
+};
+
+/* eslint-disable react/jsx-props-no-spreading */
+export const PrivateRoute = ({
+  Component,
+  path,
+  requiredRoles,
+}: Props): JSX.Element => {
+  const { role, isAuth } = useContext(AuthContext);
+
+  // Check if the role is contained in the roles array (passed as props).
+  const userHasRequiredRole = requiredRoles.includes(role);
+
+  const message = userHasRequiredRole
+    ? 'Please log in to view this page'
+    : 'Your role is not allowed';
+
+  return (
+    <Route
+      exact={false}
+      path={path}
+      render={(props: RouteProps) =>
+        isAuth && userHasRequiredRole ? (
+          <Component {...props} />
+        ) : (
+          <Redirect
+            to={{
+              pathname: !userHasRequiredRole
+                ? `${NonAuthRoutes.auth}${NonAuthRoutes.signIn}`
+                : NonAuthRoutes.unauthorized,
+              state: {
+                message,
+                requestedPath: path,
+              },
+            }}
+          />
+        )
+      }
+    />
+  );
+};

src/components/RestrictedRoute/RestrictedRoute.tsx

+import React, { useState, useEffect, useContext } from 'react';
+import { Route, Redirect, RouteProps } from 'react-router-dom';
+import { AuthRoutes, NonAuthRoutes } from 'api/routes';
+import { isAuthenticated } from 'api/isAuthenticated';
+
+/**
+ *
+ * */
+type Props = {
+  Component: React.FC<RouteProps>;
+  restricted: boolean;
+  path: string;
+};
+
+/**
+ * Wrapper for Route that basing on if the user is authenticated,
+ * redirects to:
+ * - Entry point of the private route (the homepage);
+ * - Login page.
+ */
+
+/* eslint-disable react/jsx-props-no-spreading */
+export const RestrictedRoute = ({ Component, path }: Props): JSX.Element => {
+  const [authUser, setAuthUser] = useState<boolean>(false);
+  useEffect(() => {
+    isAuthenticated(setAuthUser);
+  });
+
+  return (
+    <Route
+      path={path}
+      render={(props: RouteProps) =>
+        authUser ? (
+          // Redirect to homepage.
+          <Redirect
+            to={{ pathname: `${AuthRoutes.dashboard}${AuthRoutes.home}` }}
+          />
+        ) : (
+          // Redirect to component.
+          <Component {...props} />
+        )
+      }
+    />
+  );
+};