Implement account based route

src/App.tsx

@@ -5,14 +5,19 @@ import { AuthUser } from 'components/AuthUser/AuthUser';
 import { LandingPage } from 'components/LandingPage/LandingPage';
 import { PrivateRoute } from 'components/api/PrivateRoute/PrivateRoute';
 import { AuthRoutes, NonAuthRoutes } from 'components/api/routes';
+import { Roles } from 'components/api/userRoles';
 
 export const App: FC = () => (
   <Router>
     <div data-testid="App">
       <Switch>
-        <Route path={NonAuthRoutes.login} component={AuthUser} />
+        <Route path={NonAuthRoutes.signIn} component={AuthUser} />
         <Route exact path={NonAuthRoutes.home} component={LandingPage} />
-        <PrivateRoute path={AuthRoutes.dashboard} Component={HomePage} />
+        <PrivateRoute
+          path={AuthRoutes.dashboard}
+          Component={HomePage}
+          requiredRoles={[Roles.admin, Roles.operator, Roles.senior]}
+        />
       </Switch>
     </div>
   </Router>

src/components/api/PrivateRoute/PrivateRoute.tsx

@@ -9,12 +9,21 @@ import { NonAuthRoutes } from 'components/api/routes';
 type Props = {
   Component: React.FC<RouteProps>;
   path: string;
+  requiredRoles: string[];
 };
 
 /* eslint-disable react/jsx-props-no-spreading */
-export const PrivateRoute = ({ Component, path }: Props): JSX.Element => {
+export const PrivateRoute = ({
+  Component,
+  path,
+  requiredRoles,
+}: Props): JSX.Element => {
   const isAuthed = false;
-  const message = 'Please log in to view this page';
+  const userHasRequiredRole = requiredRoles.includes('admin');
+
+  const message = userHasRequiredRole
+    ? 'Please log in to view this page'
+    : 'Your role is not allowed';
   return (
     <Route
       exact={false}
@@ -25,7 +34,9 @@ export const PrivateRoute = ({ Component, path }: Props): JSX.Element => {
         ) : (
           <Redirect
             to={{
-              pathname: NonAuthRoutes.login,
+              pathname: userHasRequiredRole
+                ? NonAuthRoutes.signIn
+                : NonAuthRoutes.unauthorized,
               state: {
                 message,
                 requestedPath: path,

src/components/api/routes.ts

+/**
+ * Allowed routes for authenticated users.
+ * Routes must be defined there and then reused across components
+ * importing AuthRoutes and NonAuthRoutes
+ */
 export enum AuthRoutes {
   dashboard = '/dashboard',
   account = '/account',
 }
 
+/**
+ * Allowed routes for non authenticated users
+ */
 export enum NonAuthRoutes {
   home = '/',
-  login = '/login',
+  signIn = '/signIn',
   unauthorized = '/unauthorized',
 }