Merge pull request #19 from BinaryStudioAcademy/task/OV-9-protect-rou…

…ting

OV-9: + ProtectedRoute component

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

@@ -3,6 +3,7 @@ const AppRoute = {
     SIGN_IN: '/sign-in',
     SIGN_UP: '/sign-up',
     STUDIO: '/studio',
+    ANY: '*',
 } as const;
 
 export { AppRoute };

frontend/src/index.tsx

@@ -1,42 +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 { Studio } from '~/bundles/studio/pages/studio.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 />,
-            },
-            {
-                path: AppRoute.STUDIO,
-                element: <Studio />,
-            },
-        ],
-    },
-];
+import { routes } from '~/router/routes.js';
 
 createRoot(document.querySelector('#root') as HTMLElement).render(
     <StrictMode>

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

@@ -0,0 +1,20 @@
+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 { useAppSelector } from '~/bundles/common/hooks/hooks.js';
+
+const ProtectedRoute: React.FC = () => {
+    // const user = useAppSelector((state) => state.auth.user);
+
+    // TODO: for implementing persistence. The following line is temporary
+    const user = true;
+
+    if (!user) {
+        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,24 @@
+import { Navigate } from 'react-router-dom';
+
+import { AppRoute } from '~/bundles/common/enums/app-route.enum.js';
+import { Studio } from '~/bundles/studio/pages/studio.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.STUDIO,
+            element: <Studio />,
+        },
+        {
+            path: AppRoute.ANY,
+            element: <Navigate to={AppRoute.ROOT} replace />,
+        },
+    ],
+};
+
+export { protectedRoutes };

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

@@ -0,0 +1,15 @@
+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 />,
+    },
+];
+
+export { publicRoutes };