Refactor pages adding into App with app-config

frontend/src/App.jsx

@@ -6,42 +6,41 @@ import {
 import 'react-toastify/dist/ReactToastify.css';
 
 import { hooks } from './providers';
-import {
-  MainPage,
-  LoginPage,
-  NotFoundPage,
-  SignupPage,
-} from './pages';
+import config from './app-config';
+import pages from './pages';
 
-const ConditionalRoute = ({ children, redirectWhenAuthIsExist, redirectTo }) => {
+const PrivateRoute = ({ children, redirectTo }) => {
   const auth = hooks.useAuth();
 
-  return redirectWhenAuthIsExist === auth.loggedIn ? <Navigate to={redirectTo} /> : children;
+  return auth.loggedIn ? children : <Navigate to={redirectTo} />;
 };
 
 const App = () => (
   <div className="h-100" id="chat">
     <div className="d-flex flex-column h-100">
       <Router>
         <Routes>
-          <Route path="*" element={<NotFoundPage />} />
-          <Route
-            path="/"
-            element={(
-              <ConditionalRoute redirectWhenAuthIsExist={false} redirectTo="/login">
-                <MainPage />
-              </ConditionalRoute>
-            )}
-          />
-          <Route
-            path="/login"
-            element={(
-              <ConditionalRoute redirectWhenAuthIsExist redirectTo="/">
-                <LoginPage />
-              </ConditionalRoute>
-            )}
-          />
-          <Route path="/signup" element={<SignupPage />} />
+          {Object
+            .values(config.pages)
+            .map(({
+              id,
+              route,
+              isPrivate,
+              component,
+            }) => {
+              const Component = pages[component]();
+              return (
+                <Route
+                  key={id}
+                  path={route}
+                  element={isPrivate ? (
+                    <PrivateRoute redirectTo="/login">
+                      <Component />
+                    </PrivateRoute>
+                  ) : <Component />}
+                />
+              );
+            })}
         </Routes>
       </Router>
       <ToastContainer />

frontend/src/app-config.js

@@ -0,0 +1,30 @@
+const pages = {
+  notFoundPage: {
+    id: 0,
+    route: '*',
+    component: 'notFoundPage',
+    isPrivate: false,
+  },
+  mainPage: {
+    id: 1,
+    route: '/',
+    component: 'mainPage',
+    isPrivate: true,
+  },
+  loginPage: {
+    id: 2,
+    route: '/login',
+    component: 'loginPage',
+    isPrivate: false,
+  },
+  signupPage: {
+    id: 3,
+    route: '/signup',
+    component: 'signupPage',
+    isPrivate: false,
+  },
+};
+
+export default {
+  pages,
+};

frontend/src/pages/index.js

@@ -1,4 +1,11 @@
-export { default as LoginPage } from './LoginPage';
-export { default as MainPage } from './MainPage';
-export { default as NotFoundPage } from './NotFoundPage';
-export { default as SignupPage } from './SignupPage';
+import LoginPage from './LoginPage';
+import MainPage from './MainPage';
+import NotFoundPage from './NotFoundPage';
+import SignupPage from './SignupPage';
+
+export default {
+  loginPage: () => LoginPage,
+  mainPage: () => MainPage,
+  notFoundPage: () => NotFoundPage,
+  signupPage: () => SignupPage,
+};