th-24: Add protected routing [FE] (#60)

* th-24: + stylelint:fix script

* th-24: + protected route component

* th-24: + protected route example

* th-24: + Outlet into ProtectedRoute return statement

* th-24: + protected route example

* th-24: + add spinner into the ProtectedRoute component

* th-24: * changes routes declaration to JSX approach

* th-24: * updates the ProtectedRoute component, adds a RouterOutlet

* th-24: * updates the ProtectedRoute declaration in the router component

* th-20: * removes wrapper over Route

* th-24: * removes unused vars

* th-24: + User type

* th-24: + auth selectors

* th-24: * updates protected route component to use the data from the store

* th-24: * header and spinner styles

* th-24: - remove UserGroup enum, now used enum from shared

* th-24: * update User type imports

* th-24: * changes imports

* th-24: * now Navigate sends to 404 page

* th-24: * update UserSignInResponseDto type

* th-24: * now ProtectedRoute displays 404 page instead of redirecting

* th-24: * update UserSignInResponseDto

---------

Co-authored-by: Pavel Sukhinin <[email protected]>

Author: h0wter

frontend/src/libs/components/components.ts

@@ -13,6 +13,7 @@ export { Image } from './image/image.js';
 export { Input } from './input/input.js';
 export { Link } from './link/link.js';
 export { Modal } from './modal/modal.js';
+export { ProtectedRoute } from './protected-route/protected-route.js';
 export { Radio } from './radio/radio.js';
 export { Router } from './router/router.jsx';
 export { RouterProvider } from './router-provider/router-provider.jsx';

frontend/src/libs/components/header/header.tsx

@@ -1,7 +1,7 @@
 import { AppRoute } from '~/libs/enums/enums.js';
 import { useCallback, useNavigate } from '~/libs/hooks/hooks.js';
 
-import { AppLogo, Link } from '../components.js';
+import { AppLogo, Button, Link } from '../components.js';
 import styles from './styles.module.scss';
 
 const Header: React.FC = () => {
@@ -18,9 +18,12 @@ const Header: React.FC = () => {
           <AppLogo />
         </Link>
         <div className={styles.navMenu}>
-          <button type="button" onClick={handleSignIn}>
-            Sign In
-          </button>
+          <Button
+            label="Sign In"
+            className={styles.btn}
+            type="button"
+            onClick={handleSignIn}
+          />
         </div>
       </div>
     </header>

frontend/src/libs/components/header/styles.module.scss

@@ -1,7 +1,6 @@
 @import "src/assets/css/vars.scss";
 
 .container {
-  position: absolute;
   width: 100%;
 }
 
@@ -13,9 +12,12 @@
   padding-right: 29px;
   padding-left: 48px;
   background-color: $header-background;
-  border-radius: 10px;
 }
 
 .logoContainer {
   width: 186px;
 }
+
+.btn {
+  padding-inline: 60px;
+}

frontend/src/libs/components/protected-route/protected-route.tsx

@@ -0,0 +1,32 @@
+import { DataStatus } from '~/libs/enums/enums.js';
+import { useAppSelector } from '~/libs/hooks/hooks.js';
+import { type ValueOf } from '~/libs/types/types.js';
+import { type UserGroupKey } from '~/packages/users/libs/enums/enums.js';
+import { NotFound } from '~/pages/not-found/not-found.js';
+import { selectIsLoading, selectUser } from '~/slices/auth/selectors.js';
+
+import { RouterOutlet } from '../router/router.js';
+import { Spinner } from '../spinner/spinner.js';
+
+type Properties = {
+  allowedUserGroup: ValueOf<typeof UserGroupKey>;
+};
+
+const ProtectedRoute = ({
+  allowedUserGroup,
+}: Properties): React.ReactElement | null => {
+  const isLoading = useAppSelector(selectIsLoading);
+  const user = useAppSelector(selectUser);
+
+  if (isLoading === DataStatus.PENDING) {
+    return <Spinner size="sm" />;
+  }
+
+  return user && allowedUserGroup === user.group.key ? (
+    <RouterOutlet />
+  ) : (
+    <NotFound />
+  );
+};
+
+export { ProtectedRoute };

frontend/src/libs/components/router-provider/router-provider.tsx

@@ -1,15 +1,18 @@
+import React from 'react';
 import {
-  type RouteObject,
   createBrowserRouter,
+  createRoutesFromElements,
   RouterProvider as LibraryRouterProvider,
 } from 'react-router-dom';
 
 type Properties = {
-  routes: RouteObject[];
+  children: React.ReactNode;
 };
 
-const RouterProvider: React.FC<Properties> = ({ routes }: Properties) => (
-  <LibraryRouterProvider router={createBrowserRouter(routes)} />
-);
+const RouterProvider: React.FC<Properties> = ({ children }: Properties) => {
+  const routes = createRoutesFromElements(children);
+
+  return <LibraryRouterProvider router={createBrowserRouter(routes)} />;
+};
 
 export { RouterProvider };

frontend/src/libs/components/router/router.tsx

@@ -1,52 +1,40 @@
+import { Route } from 'react-router-dom';
+
 import { AppRoute } from '~/libs/enums/enums.js';
+import { UserGroupKey } from '~/packages/users/libs/enums/enums.js';
 import { Auth } from '~/pages/auth/auth.js';
 import { Dashboard } from '~/pages/dashboard/dashboard.js';
 import { NotFound } from '~/pages/not-found/not-found.js';
 import { WelcomePage } from '~/pages/welcome/welcome.js';
 
 import { App } from '../app/app.js';
+import { ProtectedRoute } from '../components.js';
 import { PageLayout } from '../page-layout/page-layout.js';
 import { RouterProvider } from '../router-provider/router-provider.js';
 
 const Router = (): JSX.Element => (
-  <RouterProvider
-    routes={[
-      {
-        path: AppRoute.ROOT,
-        element: <App />,
-        children: [
-          {
-            path: AppRoute.ROOT,
-            element: 'Root',
-          },
-          {
-            path: AppRoute.WELCOME,
-            element: <WelcomePage />,
-          },
-          {
-            path: AppRoute.SIGN_IN,
-            element: <Auth />,
-          },
-          {
-            path: AppRoute.SIGN_UP,
-            element: <Auth />,
-          },
-          {
-            path: AppRoute.ANY,
-            element: <NotFound />,
-          },
-        ],
-      },
-      {
-        path: AppRoute.DASHBOARD,
-        element: (
+  <RouterProvider>
+    <Route path={AppRoute.ROOT} element={<App />}>
+      <Route path={AppRoute.WELCOME} element={<WelcomePage />} />
+      <Route path={AppRoute.SIGN_IN} element={<Auth />} />
+      <Route path={AppRoute.SIGN_UP} element={<Auth />} />
+    </Route>
+    <Route
+      path={AppRoute.ROOT}
+      element={<ProtectedRoute allowedUserGroup={UserGroupKey.BUSINESS} />}
+    >
+      <Route
+        path={AppRoute.DASHBOARD}
+        element={
           <PageLayout>
             <Dashboard />
           </PageLayout>
-        ),
-      },
-    ]}
-  />
+        }
+      />
+    </Route>
+    <Route path={AppRoute.ANY} element={<NotFound />} />
+  </RouterProvider>
 );
 
 export { Router };
+export { Outlet as RouterOutlet } from 'react-router-dom';

frontend/src/libs/components/spinner/styles.module.scss

@@ -9,6 +9,7 @@
 
 .container {
   display: flex;
+  flex-grow: 1;
   width: 100%;
   height: 100%;
   background-color: white;

frontend/src/libs/types/store.type.ts

@@ -0,0 +1,5 @@
+import { type store } from '~/libs/packages/store/store.js';
+
+type RootState = ReturnType<typeof store.instance.getState>;
+
+export { type RootState };

frontend/src/libs/types/types.ts

@@ -2,6 +2,7 @@ export { type AsyncThunkConfig } from './async-thunk-config.type.js';
 export { type FormField } from './form.type.js';
 export { type SelectOption } from './select-option.type.js';
 export { type TabName, type TabsType } from './sidebar.type.js';
+export { type RootState } from './store.type.js';
 export { type DeepPartial, type FieldValues } from 'react-hook-form';
 export {
   type BusinessSignUpRequestDto,

frontend/src/slices/auth/auth.slice.ts

@@ -1,10 +1,8 @@
 import { createSlice } from '@reduxjs/toolkit';
 
 import { DataStatus } from '~/libs/enums/enums.js';
-import {
-  type UserSignInResponseDto,
-  type ValueOf,
-} from '~/libs/types/types.js';
+import { type ValueOf } from '~/libs/types/types.js';
+import { type UserSignInResponseDto } from '~/packages/users/users.js';
 
 import { signIn, signUp } from './actions.js';