Merge pull request #49 from hubHarmony/lazyload

optimise loading and api calls

src/App.jsx

@@ -1,39 +1,52 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState, Suspense, lazy } from 'react';
 import { BrowserRouter as Router, Route, Routes, Navigate } from 'react-router-dom';
 import { ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
-import LoginPage from './pages/LoginPage/LoginPage';
-import DashboardPage from './pages/DashboardPage/DashboardPage';
-import ServerDetails from './pages/ServerDetails/ServerDetails';
 import { auth } from './service/firebase';
 import styles from './App.module.scss';
 import Loading from './pages/Loading/loading';
-import NotFoundPage from './pages/NotFoundPage/NotFoundPage';
+
-import CreatePage from './pages/CreateServer/CreateServer';
+const LoginPage = lazy(() => import('./pages/LoginPage/LoginPage'));
-import Javapick from './pages/CreateServer/Javapick/java';
+const ServerDetails = lazy(() => import('./pages/ServerDetails/ServerDetails'));
-import Modpack from './pages/CreateServer/modpack/modpack';
+const CreatePage = lazy(() => import('./pages/CreateServer/CreateServer'));
-import Bedrock from './pages/CreateServer/bedrock/bedrock';
+const Javapick = lazy(() => import('./pages/CreateServer/Javapick/java'));
+const Modpack = lazy(() => import('./pages/CreateServer/modpack/modpack'));
+const Bedrock = lazy(() => import('./pages/CreateServer/bedrock/bedrock'));
+const DashboardPage = lazy(() => import('./pages/DashboardPage/DashboardPage'));
 
 const App = () => {
-  const [user, setUser] = useState(null);
+  const [user, setUser] = useState(() => JSON.parse(localStorage.getItem('user')) || null);
   const [loading, setLoading] = useState(true);
+  const [showLoading, setShowLoading] = useState(false);
 
   useEffect(() => {
+    const timeoutId = setTimeout(() => setShowLoading(true), 6000); 
+
     const unsubscribe = auth.onAuthStateChanged((user) => {
+      if (user) {
+        localStorage.setItem('user', JSON.stringify(user));
+      } else {
+        localStorage.removeItem('user');
+      }
       setUser(user);
       setLoading(false);
+      clearTimeout(timeoutId); 
     });
 
-    return () => unsubscribe();
+    return () => {
+      unsubscribe();
+      clearTimeout(timeoutId); 
+    };
   }, []);
 
-  if (loading) {
+  if (loading && showLoading) {
     return <Loading />;
   }
 
   return (
     <Router>
       <div className={styles.container}>
+        <Suspense fallback={<Loading />}>
           <Routes>
             <Route path="/login" element={user ? <Navigate to="/dashboard" /> : <LoginPage />} />
             <Route path="/dashboard" element={user ? <DashboardPage user={user} /> : <Navigate to="/login" />} />
@@ -43,8 +56,9 @@ const App = () => {
             <Route path="/createServer/modpack" element={user ? <Modpack user={user} /> : <Navigate to="/login" />} />
             <Route path="/server/:serverName/*" element={user ? <ServerDetails user={user} /> : <Navigate to="/login" />} />
             <Route path="/" element={<Navigate to={user ? "/dashboard" : "/login"} />} />
-          <Route path="*" element={<NotFoundPage />} />
+            <Route path="*" element={user ? <DashboardPage user={user} /> : <Navigate to="/login" />} />
           </Routes>
+        </Suspense>
         <ToastContainer
           position="top-right"
           autoClose={3500}

src/components/navbar/Navbar.module.scss

@@ -42,14 +42,14 @@
   position: absolute;
   top: 4rem;
   right: 4rem;
-  background-color: #050816;
+  background-color: white;
   box-shadow: 0 0.167rem 0.833rem rgba(0, 0, 0, 0.15);
   border-radius: 0.8rem;
   overflow: hidden;
   z-index: 1001;
   width: 20rem;
-  border: .1rem solid #444444;
   font-size: 1.1rem;
+
 }
 
 .menuItem, .menuItemLogout {
@@ -64,7 +64,7 @@
 }
 
 .menuItem:hover, .menuItemLogout:hover {
-  background-color: #1f202479;
+  background-color: #d4d6d892;
   color: var(--primary-color);
 }
 

src/main.jsx

@@ -1,10 +1,7 @@
-import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App.jsx';
 import './main.css';
 
 ReactDOM.createRoot(document.getElementById('root')).render(
-  <React.StrictMode>
   <App />
-  </React.StrictMode>
 );

src/pages/DashboardPage/DashboardPage.jsx

@@ -8,26 +8,27 @@ import serviiApi from "../../service/api.tsx";
 import PropTypes from "prop-types";
 import styles from './DashboardPage.module.scss';
 
+const CACHE_KEY_SERVERS = 'cachedServers';
+const CACHE_KEY_TIMESTAMP = 'cacheTimestamp';
+
 const DashboardPage = ({ user }) => {
   const navigate = useNavigate();
 
-  const [servers, setServers] = useState([]);
+  const [servers, setServers] = useState(() => {
-  const [subdomain, setSubdomain] = useState(null);
+    const cachedServers = JSON.parse(localStorage.getItem(CACHE_KEY_SERVERS));
-  const [loading, setLoading] = useState(true);
+    return cachedServers || [];
+  });
+
+  const [subdomain, setSubdomain] = useState(' ');
+  const [loading, setLoading] = useState(servers.length === 0); 
   const [searchTerm, setSearchTerm] = useState('');
   const [newSubdomain, setNewSubdomain] = useState(' ');
 
-  const loadServers = useCallback(async () => {
+  const updateServersFromApi = useCallback(async () => {
     try {
-
       if (user?.uid) {
         const userSubdomain = await getUserSubdomain(user.uid);
-        setSubdomain(userSubdomain || '');
+        setSubdomain(userSubdomain || null);
-      }
-    } catch (error) {
-      console.error('Error fetching data:', error);
-    } finally {
-      setLoading(false);
       }
 
       const ApiResponse = await serviiApi.fetchServers();
@@ -35,19 +36,25 @@ const DashboardPage = ({ user }) => {
       const sortedServers = data.sort((a, b) => b.running - a.running);
       setServers(sortedServers);
 
-     
+      localStorage.setItem(CACHE_KEY_SERVERS, JSON.stringify(sortedServers));
+      localStorage.setItem(CACHE_KEY_TIMESTAMP, Date.now());
+    } catch (error) {
+      console.error('Error fetching data:', error);
+    } finally {
+      setLoading(false); 
+    }
   }, [user]);
 
   useEffect(() => {
-    loadServers();
+    updateServersFromApi(); 
-  }, [loadServers]);
+  }, [updateServersFromApi]);
 
   const handleCreateServer = () => navigate('/CreateServer');
 
   const handleRunServer = async (serverName) => {
     try {
       await serviiApi.serverRun(serverName);
-      await loadServers();
+      updateServersFromApi(); 
     } catch (error) {
       console.error('Error starting server:', error);
     }
@@ -56,7 +63,7 @@ const DashboardPage = ({ user }) => {
   const handleStopServer = async (serverName) => {
     try {
       await serviiApi.serverStop(serverName);
-      await loadServers();
+      updateServersFromApi(); 
     } catch (error) {
       console.error('Error stopping server:', error);
     }
@@ -65,7 +72,7 @@ const DashboardPage = ({ user }) => {
   const handleDeleteServer = async (serverName) => {
     try {
       await serviiApi.serverDelete(serverName);
-      await loadServers();
+      updateServersFromApi(); 
     } catch (error) {
       console.error('Error deleting server:', error);
     }
@@ -81,7 +88,7 @@ const DashboardPage = ({ user }) => {
       const response = await serviiApi.setSubdomain(newSubdomain);
       if (response.success) {
         setSubdomain(newSubdomain); 
-        loadServers(); 
+        updateServersFromApi(); 
       } else {
         console.error('Erreur lors de la création du sous-domaine');
       }
@@ -93,7 +100,7 @@ const DashboardPage = ({ user }) => {
   const favoriteServer = servers[0] || null;
   const serversWithoutFavorite = servers.filter(server => server !== favoriteServer);
 
-  if (loading) {
+  if (loading && servers.length === 0) {
     return (
       <div className={styles.dashboardContainer}>
         <Navbar user={user} />
@@ -128,8 +135,7 @@ const DashboardPage = ({ user }) => {
     );
   }
 
-
+  if (servers.length === 0 && !loading) {
-  if (servers.length === 0) {
     return (
       <div className={styles.dashboardContainer}>
         <Navbar user={user} />

src/pages/DashboardPage/DashboardPage.module.scss

@@ -80,8 +80,8 @@ html, body {
 }
 
 .AllserversTitle, .favoriteServerTitle, .iptitle {
-  font-size: 1.5rem;
+  font-size: 1.25rem;
-  font-weight: 500;
+  font-weight: 400;
   color: var(--text-color);
   margin: 1rem 0;
 }

src/pages/ServerConsole/ServerConsole.module.scss

@@ -12,7 +12,8 @@
   justify-content: flex-start;
   align-items: flex-start;
   flex-direction: column;
-  background-color: #100D25;
+  background-color: rgb(223, 222, 222);
+  color: black;
   width: 100%;
   max-width: 50rem;
   height: 38rem;
@@ -27,7 +28,7 @@
   display: flex;
   justify-content: flex-start;
   align-items: center;
-  background-color: #1D1836;
+  background-color: white;
   width: 100%;
   height: 3rem;
   font-size: 1rem;
@@ -46,8 +47,9 @@
 
 .logs {
   font-family: 'Courier New', Courier, monospace; 
-  font-size: 0.9rem;
+  font-size: 1rem;
-  color: #ffffff;
+  color: black;
+  font-weight: 500;
   white-space: pre-wrap; 
   line-height: 1.5;
   margin: 0; 
@@ -57,7 +59,7 @@
   display: flex;
   width: 100%;
   padding: 0.5rem;
-  background-color: #1D1836;
+  background-color: white;
   border-top: .1rem solid #343947;
   border-left: .1rem solid #343947;
   border-right: .1rem solid #343947;
@@ -67,8 +69,7 @@
   flex: 1;
   padding: 0.5rem;
   border: .1rem solid #343947;
-  background-color: #2C2A3E;
+  background-color: white;
-  color: #ffffff;
   font-size: 0.9rem;
   box-sizing: border-box;
 }
@@ -76,8 +77,8 @@
 .sendButton {
   margin-left: 0.5rem;
   padding: 0.5rem 1rem;
-  background-color: #3E3B59;
+  background-color: #2f2f2f;
-  color: #ffffff;
+  color: white;
   border: none;
   cursor: pointer;
   font-size: 0.9rem;

src/pages/ServerProperties/ServerProperties.jsx

@@ -15,15 +15,25 @@ const ServerProprieties = () => {
   const [error, setError] = useState(null);
 
   useEffect(() => {
-    const fetchServer = async () => {
+    const cachedServers = JSON.parse(localStorage.getItem('cachedServers')) || [];
-      try {
+    const foundServer = cachedServers.find(server => server.name === serverName);
-        const ApiResponse = await serviiApi.fetchServers();
-        const data = ApiResponse.message;
-        const foundServer = data.find(server => server.name === serverName);
 
     if (foundServer) {
       setServer(foundServer);
       setInitialServer(foundServer);
+      setLoading(false);
+    } else {
+      const fetchServer = async () => {
+        try {
+          const ApiResponse = await serviiApi.fetchServers();
+          const data = ApiResponse.message;
+          const serverFromApi = data.find(server => server.name === serverName);
+          
+          if (serverFromApi) {
+            setServer(serverFromApi);
+            setInitialServer(serverFromApi);
+            cachedServers.push(serverFromApi);
+            localStorage.setItem('cachedServers', JSON.stringify(cachedServers));
           } else {
             setError('Server not found');
           }
@@ -36,6 +46,7 @@ const ServerProprieties = () => {
       };
 
       fetchServer();
+    }
   }, [serverName]);
 
   const handleChange = (e) => {
@@ -46,7 +57,6 @@ const ServerProprieties = () => {
   const handleSave = async () => {
     try {
       const props = [];
-
       const serverProperties = [
         { key: 'maxPlayers', type: 'number', name: 'max-players' },
         { key: 'motd', type: 'string', name: 'motd' },