OV-9: + ProtectedRoute component

.github/ISSUE_TEMPLATE/bug-report.yml

@@ -2,7 +2,7 @@ name: Bug Report
 description: Report a bug
 title: 'BUG:'
 labels: ['BUG']
-projects: "BinaryStudioAcademy/30"
+projects: 'BinaryStudioAcademy/30'
 body:
     - type: markdown
       attributes:

.github/ISSUE_TEMPLATE/feature.yml

@@ -1,22 +1,22 @@
 name: Feature
 description: Abstract feature description
-title: "FEAT:"
-projects: "BinaryStudioAcademy/30"
+title: 'FEAT:'
+projects: 'BinaryStudioAcademy/30'
 body:
-  - type: textarea
-    id: what-feature
-    attributes:
-      label: What feature?
-      placeholder: Add descriptions
-    validations:
-      required: true
-  - type: textarea
-    id: screenshots
-    attributes:
-      label: Add screenshots
-      placeholder: Add screenshots, mockups, etc.
-  - type: textarea
-    id: acceptance-criteria
-    attributes:
-      label: Acceptance criteria
-      placeholder: Add acceptance criteria.
+    - type: textarea
+      id: what-feature
+      attributes:
+          label: What feature?
+          placeholder: Add descriptions
+      validations:
+          required: true
+    - type: textarea
+      id: screenshots
+      attributes:
+          label: Add screenshots
+          placeholder: Add screenshots, mockups, etc.
+    - type: textarea
+      id: acceptance-criteria
+      attributes:
+          label: Acceptance criteria
+          placeholder: Add acceptance criteria.

frontend/src/bundles/common/enums/app-route.enum.ts

@@ -2,6 +2,8 @@ const AppRoute = {
     ROOT: '/',
     SIGN_IN: '/sign-in',
     SIGN_UP: '/sign-up',
+    PROTECTED: '/protected',
+    ANY: '*',
 } as const;
 
 export { AppRoute };

frontend/src/framework/config/base-config.package.ts

@@ -10,9 +10,7 @@ class BaseConfig implements Config {
     private get envSchema(): EnvironmentSchema {
         return {
             APP: {
-                ENVIRONMENT: import.meta.env[
-                    'VITE_APP_NODE_ENV'
-                ],
+                ENVIRONMENT: import.meta.env['VITE_APP_NODE_ENV'],
             },
             API: {
                 ORIGIN_URL: import.meta.env[

frontend/src/framework/config/types/environment-schema.type.ts

@@ -1,5 +1,5 @@
 import { type AppEnvironment } from '~/bundles/common/enums/enums.js';
-import  { type ValueOf } from '~/bundles/common/types/types.js';
+import { type ValueOf } from '~/bundles/common/types/types.js';
 
 type EnvironmentSchema = {
     APP: {

frontend/src/framework/http-api/types/http-api-options.type.ts

@@ -1,5 +1,5 @@
 import { type ContentType } from '~/bundles/common/enums/enums.js';
-import  { type ValueOf } from '~/bundles/common/types/types.js';
+import { type ValueOf } from '~/bundles/common/types/types.js';
 import { type HttpOptions } from '~/framework/http/http.js';
 
 type HttpApiOptions = Omit<HttpOptions, 'headers' | 'payload'> & {

frontend/src/index.tsx

@@ -1,37 +1,14 @@
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 
-import { App } from '~/app/app.js';
-import { Auth } from '~/bundles/auth/pages/auth.js';
 import {
     ComponentsProvider,
     RouterProvider,
     StoreProvider,
 } from '~/bundles/common/components/components.js';
-import { AppRoute } from '~/bundles/common/enums/enums.js';
 import { store } from '~/framework/store/store.js';
 import { theme } from '~/framework/theme/theme.js';
-
-const routes = [
-    {
-        path: AppRoute.ROOT,
-        element: <App />,
-        children: [
-            {
-                path: AppRoute.ROOT,
-                element: 'Root',
-            },
-            {
-                path: AppRoute.SIGN_IN,
-                element: <Auth />,
-            },
-            {
-                path: AppRoute.SIGN_UP,
-                element: <Auth />,
-            },
-        ],
-    },
-];
+import { routes } from '~/router/routes.js';
 
 createRoot(document.querySelector('#root') as HTMLElement).render(
     <StrictMode>

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

@@ -0,0 +1,16 @@
+import { Navigate } from 'react-router-dom';
+
+import { RouterOutlet } from '~/bundles/common/components/components.js';
+import { AppRoute } from '~/bundles/common/enums/app-route.enum.js';
+import { DataStatus } from '~/bundles/common/enums/data-status.enum.js';
+import { useAppSelector } from '~/bundles/common/hooks/hooks.js';
+
+const ProtectedRoute: React.FC = () => {
+    const dataStatus = useAppSelector((state) => state.auth.dataStatus);
+    if (dataStatus !== DataStatus.FULFILLED) {
+        return <Navigate to={AppRoute.SIGN_IN} replace />;
+    }
+    return <RouterOutlet />;
+};
+
+export { ProtectedRoute };

frontend/src/router/routes.tsx

@@ -0,0 +1,15 @@
+import { App } from '~/app/app.js';
+import { AppRoute } from '~/bundles/common/enums/app-route.enum.js';
+
+import { protectedRoutes } from './routes/protected-routes.js';
+import { publicRoutes } from './routes/public-routes.js';
+
+const routes = [
+    {
+        path: AppRoute.ROOT,
+        element: <App />,
+        children: [protectedRoutes, ...publicRoutes],
+    },
+];
+
+export { routes };

frontend/src/router/routes/protected-routes.tsx

@@ -0,0 +1,23 @@
+import { Navigate } from 'react-router-dom';
+
+import { AppRoute } from '~/bundles/common/enums/app-route.enum.js';
+
+import { ProtectedRoute } from '../components/protected-route.js';
+
+const protectedRoutes = {
+    path: AppRoute.ROOT,
+    element: <ProtectedRoute />,
+    children: [
+        //TODO Add protected routes here in element property and specify the correct path
+        {
+            path: AppRoute.PROTECTED,
+            element: <div>test</div>,
+        },
+        {
+            path: AppRoute.ANY,
+            element: <Navigate to={AppRoute.ROOT} />,
+        },
+    ],
+};
+
+export { protectedRoutes };

frontend/src/router/routes/public-routes.tsx

@@ -0,0 +1,21 @@
+import { Navigate } from 'react-router-dom';
+
+import { Auth } from '~/bundles/auth/pages/auth.js';
+import { AppRoute } from '~/bundles/common/enums/app-route.enum.js';
+
+const publicRoutes = [
+    {
+        path: AppRoute.SIGN_IN,
+        element: <Auth />,
+    },
+    {
+        path: AppRoute.SIGN_UP,
+        element: <Auth />,
+    },
+    {
+        path: AppRoute.ANY,
+        element: <Navigate to={AppRoute.SIGN_IN} />,
+    },
+];
+
+export { publicRoutes };