Implement mock Private route basing on user role

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,