From 426801e59b6de084333cd79b925726678c37dd3f Mon Sep 17 00:00:00 2001
From: Ivan Samozhenov <i_dont_known@mail.ru>
Date: Wed, 17 Jan 2024 11:41:58 +0300
Subject: [PATCH] =?UTF-8?q?Update=20lazy=20load=20of=20pages,=20improve=20?=
 =?UTF-8?q?UX=201.=20Update=20app.config.js=20=E2=80=94=20pages=20componen?=
 =?UTF-8?q?ts=20are=20inported=20here=202.=20Add=20suspense=20component=20?=
 =?UTF-8?q?into=20every=20route=20of=20App=203.=20Add=20CenteredSpinner=20?=
 =?UTF-8?q?component=20for=20fallback,=20also=20for=20chat=20while=20it=20?=
 =?UTF-8?q?fetching=204.=20Remove=20pages/index.js?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/App.jsx                          | 47 +++++++++++--------
 frontend/src/{app-config.js => app.config.js} | 11 +++--
 frontend/src/components/CenteredSpinner.jsx   | 15 ++++++
 frontend/src/pages/MainPage.jsx               | 14 ++----
 frontend/src/pages/index.js                   | 11 -----
 5 files changed, 55 insertions(+), 43 deletions(-)
 rename frontend/src/{app-config.js => app.config.js} (54%)
 create mode 100644 frontend/src/components/CenteredSpinner.jsx
 delete mode 100644 frontend/src/pages/index.js

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 728c8bc..fe1aff2 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -1,19 +1,30 @@
-import React from 'react';
+import React, { Suspense } from 'react';
 import { ToastContainer } from 'react-toastify';
 import {
   BrowserRouter as Router, Routes, Route, Navigate,
 } from 'react-router-dom';
 import 'react-toastify/dist/ReactToastify.css';
 
+import CenteredSpinner from './components/CenteredSpinner';
+import config from './app.config';
 import { hooks } from './providers';
-import config from './app-config';
-import pages from './pages';
 
 const PrivateRoute = ({ children, redirectTo }) => {
   const auth = hooks.useAuth();
 
   return auth.loggedIn ? children : <Navigate to={redirectTo} />;
 };
+const WrappedRouteComponent = ({ children, isPrivate, redirectTo }) => (
+  <Suspense fallback={<CenteredSpinner />}>
+    {isPrivate ? (
+      <PrivateRoute redirectTo={redirectTo}>
+        {children}
+      </PrivateRoute>
+    ) : children}
+  </Suspense>
+);
+
+const { pages } = config;
 
 const App = () => (
   <div className="h-100" id="chat">
@@ -21,26 +32,24 @@ const App = () => (
       <Router>
         <Routes>
           {Object
-            .values(config.pages)
+            .values(pages)
             .map(({
               id,
               route,
               isPrivate,
-              component,
-            }) => {
-              const Component = pages[component]();
-              return (
-                <Route
-                  key={id}
-                  path={route}
-                  element={isPrivate ? (
-                    <PrivateRoute redirectTo="/login">
-                      <Component />
-                    </PrivateRoute>
-                  ) : <Component />}
-                />
-              );
-            })}
+              Component,
+              redirectTo,
+            }) => (
+              <Route
+                key={id}
+                path={route}
+                element={(
+                  <WrappedRouteComponent isPrivate={isPrivate} redirectTo={redirectTo}>
+                    <Component />
+                  </WrappedRouteComponent>
+                )}
+              />
+            ))}
         </Routes>
       </Router>
       <ToastContainer />
diff --git a/frontend/src/app-config.js b/frontend/src/app.config.js
similarity index 54%
rename from frontend/src/app-config.js
rename to frontend/src/app.config.js
index 1ec5a62..2c4f372 100644
--- a/frontend/src/app-config.js
+++ b/frontend/src/app.config.js
@@ -1,26 +1,29 @@
+import { lazy } from 'react';
+
 const pages = {
   notFoundPage: {
     id: 0,
     route: '*',
-    component: 'notFoundPage',
+    Component: lazy(() => import('./pages/NotFoundPage')),
     isPrivate: false,
   },
   mainPage: {
     id: 1,
     route: '/',
-    component: 'mainPage',
+    redirectTo: '/login',
+    Component: lazy(() => import('./pages/MainPage')),
     isPrivate: true,
   },
   loginPage: {
     id: 2,
     route: '/login',
-    component: 'loginPage',
+    Component: lazy(() => import('./pages/LoginPage')),
     isPrivate: false,
   },
   signupPage: {
     id: 3,
     route: '/signup',
-    component: 'signupPage',
+    Component: lazy(() => import('./pages/SignupPage')),
     isPrivate: false,
   },
 };
diff --git a/frontend/src/components/CenteredSpinner.jsx b/frontend/src/components/CenteredSpinner.jsx
new file mode 100644
index 0000000..65c2338
--- /dev/null
+++ b/frontend/src/components/CenteredSpinner.jsx
@@ -0,0 +1,15 @@
+import { Spinner } from 'react-bootstrap';
+import { useTranslation } from 'react-i18next';
+
+const CenteredSpinner = () => {
+  const { t } = useTranslation();
+  return (
+    <div className="d-flex justify-content-center align-items-center h-100">
+      <Spinner animation="border" variant="primary">
+        <span className="visually-hidden">{t('processes.loading')}</span>
+      </Spinner>
+    </div>
+  );
+};
+
+export default CenteredSpinner;
diff --git a/frontend/src/pages/MainPage.jsx b/frontend/src/pages/MainPage.jsx
index ee3d95b..dbb1bb3 100644
--- a/frontend/src/pages/MainPage.jsx
+++ b/frontend/src/pages/MainPage.jsx
@@ -1,14 +1,14 @@
 import React, { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { Spinner } from 'react-bootstrap';
 import { useDispatch } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 
-import { Navbar, Chat } from '../components';
-import { hooks } from '../providers';
+import getAuthHeader from '../utils/getAuthHeader';
+import CenteredSpinner from '../components/CenteredSpinner';
+import { Chat, Navbar } from '../components';
 import { fetchChatData } from '../api/serverApi';
+import { hooks } from '../providers';
 import { serverRoutes } from '../utils/routes';
-import getAuthHeader from '../utils/getAuthHeader';
 import { addChannels, setDefaultChannel, setActive } from '../slices/channelsSlice';
 import { addMessages } from '../slices/messagesSlice';
 import toasts from '../utils/toasts';
@@ -51,11 +51,7 @@ const MainPage = () => {
     connectToChat();
   }, [auth, dispatch, navigate, socket, t]);
   return (fetchStatus !== 'idle') ? (
-    <div className="d-flex justify-content-center align-items-center h-100">
-      <Spinner animation="border" variant="primary">
-        <span className="visually-hidden">{t('processes.loading')}</span>
-      </Spinner>
-    </div>
+    <CenteredSpinner />
   ) : (
     <>
       <Navbar />
diff --git a/frontend/src/pages/index.js b/frontend/src/pages/index.js
deleted file mode 100644
index 8205be9..0000000
--- a/frontend/src/pages/index.js
+++ /dev/null
@@ -1,11 +0,0 @@
-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,
-};