diff --git a/frontend/src/bundles/common/enums/app-route.enum.ts b/frontend/src/bundles/common/enums/app-route.enum.ts index 9d1c5334e..7e9dd441d 100644 --- a/frontend/src/bundles/common/enums/app-route.enum.ts +++ b/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 }; diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx index 901c2d1de..b07af5537 100644 --- a/frontend/src/index.tsx +++ b/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: , - children: [ - { - path: AppRoute.ROOT, - element: 'Root', - }, - { - path: AppRoute.SIGN_IN, - element: , - }, - { - path: AppRoute.SIGN_UP, - element: , - }, - { - path: AppRoute.STUDIO, - element: , - }, - ], - }, -]; +import { routes } from '~/router/routes.js'; createRoot(document.querySelector('#root') as HTMLElement).render( diff --git a/frontend/src/router/components/protected-route.tsx b/frontend/src/router/components/protected-route.tsx new file mode 100644 index 000000000..130755f91 --- /dev/null +++ b/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 ; + } + + return ; +}; + +export { ProtectedRoute }; diff --git a/frontend/src/router/routes.tsx b/frontend/src/router/routes.tsx new file mode 100644 index 000000000..9131d0b2c --- /dev/null +++ b/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: , + children: [protectedRoutes, ...publicRoutes], + }, +]; + +export { routes }; diff --git a/frontend/src/router/routes/protected-routes.tsx b/frontend/src/router/routes/protected-routes.tsx new file mode 100644 index 000000000..4724f0a4b --- /dev/null +++ b/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: , + children: [ + //TODO Add protected routes here in element property and specify the correct path + { + path: AppRoute.STUDIO, + element: , + }, + { + path: AppRoute.ANY, + element: , + }, + ], +}; + +export { protectedRoutes }; diff --git a/frontend/src/router/routes/public-routes.tsx b/frontend/src/router/routes/public-routes.tsx new file mode 100644 index 000000000..ead9cf5ff --- /dev/null +++ b/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: , + }, + { + path: AppRoute.SIGN_UP, + element: , + }, +]; + +export { publicRoutes };