optimise loading and api calls

2024-11-17 21:40:30 +00:00 · 2024-09-21 15:24:24 +02:00 · 2024-09-21 15:24:24 +02:00 · e2adb51f59
commit e2adb51f59
parent 4d10377087
4 changed files with 109 additions and 82 deletions
--- a/src/App.jsx
+++ b/src/App.jsx
@ -1,62 +1,76 @@
-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';
-import Javapick from './pages/CreateServer/Javapick/java';
-import Modpack from './pages/CreateServer/modpack/modpack';
-import Bedrock from './pages/CreateServer/bedrock/bedrock';
+
+const LoginPage = lazy(() => import('./pages/LoginPage/LoginPage'));
+const ServerDetails = lazy(() => import('./pages/ServerDetails/ServerDetails'));
+const CreatePage = lazy(() => import('./pages/CreateServer/CreateServer'));
+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}>
-        <Routes>
-          <Route path="/login" element={user ? <Navigate to="/dashboard" /> : <LoginPage />} />
-          <Route path="/dashboard" element={user ? <DashboardPage user={user} /> : <Navigate to="/login" />} />
-          <Route path="/createServer" element={user ? <CreatePage user={user} /> : <Navigate to="/login" />} />
-          <Route path="/createServer/java" element={user ? <Javapick user={user} /> : <Navigate to="/login" />} />
-          <Route path="/createServer/bedrock" element={user ? <Bedrock user={user} /> : <Navigate to="/login" />} />
-          <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 />} />
-        </Routes>
+        <Suspense fallback={<Loading />}>
+          <Routes>
+            <Route path="/login" element={user ? <Navigate to="/dashboard" /> : <LoginPage />} />
+            <Route path="/dashboard" element={user ? <DashboardPage user={user} /> : <Navigate to="/login" />} />
+            <Route path="/createServer" element={user ? <CreatePage user={user} /> : <Navigate to="/login" />} />
+            <Route path="/createServer/java" element={user ? <Javapick user={user} /> : <Navigate to="/login" />} />
+            <Route path="/createServer/bedrock" element={user ? <Bedrock user={user} /> : <Navigate to="/login" />} />
+            <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={user ? <DashboardPage user={user} /> : <Navigate to="/login" />} />
+          </Routes>
+        </Suspense>
        <ToastContainer
-            position="top-right"
-            autoClose={3500}
-            hideProgressBar={false}
-            newestOnTop={false}
-            closeOnClick
-            rtl={false}
-            pauseOnFocusLoss
-            draggable
-            pauseOnHover
-            theme="light"
-            />
+          position="top-right"
+          autoClose={3500}
+          hideProgressBar={false}
+          newestOnTop={false}
+          closeOnClick
+          rtl={false}
+          pauseOnFocusLoss
+          draggable
+          pauseOnHover
+          theme="light"
+        />
      </div>
    </Router>
  );
--- a/src/main.jsx
+++ b/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>
+  <App />
 );
--- a/src/pages/DashboardPage/DashboardPage.jsx
+++ b/src/pages/DashboardPage/DashboardPage.jsx
@ -8,46 +8,53 @@ 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 [subdomain, setSubdomain] = useState(null);
-  const [loading, setLoading] = useState(true);
+  const [servers, setServers] = useState(() => {
+    const cachedServers = JSON.parse(localStorage.getItem(CACHE_KEY_SERVERS));
+    return cachedServers || [];
+  });
+
+  const [subdomain, setSubdomain] = useState(' ');
+  const [loading, setLoading] = useState(servers.length === 0); 
  const [searchTerm, setSearchTerm] = useState('');
-  const [newSubdomain, setNewSubdomain] = 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();
      const data = ApiResponse.message;
      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();
-  }, [loadServers]);
+    updateServersFromApi(); 
+  }, [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} />
@ -127,9 +134,8 @@ const DashboardPage = ({ user }) => {
        </div>
    );
  }
-  

-  if (servers.length === 0) {
+  if (servers.length === 0 && !loading) {
    return (
      <div className={styles.dashboardContainer}>
        <Navbar user={user} />
--- a/src/pages/ServerProperties/ServerProperties.jsx
+++ b/src/pages/ServerProperties/ServerProperties.jsx
@ -15,27 +15,38 @@ const ServerProprieties = () => {
  const [error, setError] = useState(null);

  useEffect(() => {
-    const fetchServer = async () => {
-      try {
-        const ApiResponse = await serviiApi.fetchServers();
-        const data = ApiResponse.message;
-        const foundServer = data.find(server => server.name === serverName);
-        
-        if (foundServer) {
-          setServer(foundServer);
-          setInitialServer(foundServer); 
-        } else {
-          setError('Server not found');
-        }
-      } catch (error) {
-        console.error('Error fetching server:', error);
-        setError('Error fetching server');
-      } finally {
-        setLoading(false);
-      }
-    };
+    const cachedServers = JSON.parse(localStorage.getItem('cachedServers')) || [];
+    const foundServer = cachedServers.find(server => server.name === serverName);

-    fetchServer();
+    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');
+          }
+        } catch (error) {
+          console.error('Error fetching server:', error);
+          setError('Error fetching server');
+        } finally {
+          setLoading(false);
+        }
+      };
+
+      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' },