From e2adb51f59bea83a6f35c8f2d3e8f8194b1540c9 Mon Sep 17 00:00:00 2001 From: AntoninoP Date: Sat, 21 Sep 2024 15:24:24 +0200 Subject: [PATCH 1/2] optimise loading and api calls --- src/App.jsx | 82 +++++++++++-------- src/main.jsx | 5 +- src/pages/DashboardPage/DashboardPage.jsx | 52 ++++++------ .../ServerProperties/ServerProperties.jsx | 52 +++++++----- 4 files changed, 109 insertions(+), 82 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 4f52c07..5d92b87 100644 --- 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 ; } return (
- - : } /> - : } /> - : } /> - : } /> - : } /> - : } /> - : } /> - } /> - } /> - + }> + + : } /> + : } /> + : } /> + : } /> + : } /> + : } /> + : } /> + } /> + : } /> + + + position="top-right" + autoClose={3500} + hideProgressBar={false} + newestOnTop={false} + closeOnClick + rtl={false} + pauseOnFocusLoss + draggable + pauseOnHover + theme="light" + />
); diff --git a/src/main.jsx b/src/main.jsx index 1881be2..70be286 100644 --- 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( - - - + ); diff --git a/src/pages/DashboardPage/DashboardPage.jsx b/src/pages/DashboardPage/DashboardPage.jsx index 056b6d9..459ae41 100644 --- 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 (
@@ -127,9 +134,8 @@ const DashboardPage = ({ user }) => {
); } - - if (servers.length === 0) { + if (servers.length === 0 && !loading) { return (
diff --git a/src/pages/ServerProperties/ServerProperties.jsx b/src/pages/ServerProperties/ServerProperties.jsx index c74da6f..f8e45bd 100644 --- 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' }, From f90ef121025d95eeb433d1f463c5477ebbe41b82 Mon Sep 17 00:00:00 2001 From: AntoninoP Date: Sat, 21 Sep 2024 15:35:49 +0200 Subject: [PATCH 2/2] fix console and profile colors --- src/components/navbar/Navbar.module.scss | 6 +++--- .../DashboardPage/DashboardPage.module.scss | 4 ++-- .../ServerConsole/ServerConsole.module.scss | 19 ++++++++++--------- 3 files changed, 15 insertions(+), 14 deletions(-) diff --git a/src/components/navbar/Navbar.module.scss b/src/components/navbar/Navbar.module.scss index 8b7965a..dd41935 100644 --- a/src/components/navbar/Navbar.module.scss +++ b/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); } diff --git a/src/pages/DashboardPage/DashboardPage.module.scss b/src/pages/DashboardPage/DashboardPage.module.scss index 0b2fc5a..38b5dd6 100644 --- a/src/pages/DashboardPage/DashboardPage.module.scss +++ b/src/pages/DashboardPage/DashboardPage.module.scss @@ -80,8 +80,8 @@ html, body { } .AllserversTitle, .favoriteServerTitle, .iptitle { - font-size: 1.5rem; - font-weight: 500; + font-size: 1.25rem; + font-weight: 400; color: var(--text-color); margin: 1rem 0; } diff --git a/src/pages/ServerConsole/ServerConsole.module.scss b/src/pages/ServerConsole/ServerConsole.module.scss index 3e0808b..be5bece 100644 --- a/src/pages/ServerConsole/ServerConsole.module.scss +++ b/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; - color: #ffffff; + font-size: 1rem; + 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; - color: #ffffff; + background-color: white; font-size: 0.9rem; box-sizing: border-box; } @@ -76,8 +77,8 @@ .sendButton { margin-left: 0.5rem; padding: 0.5rem 1rem; - background-color: #3E3B59; - color: #ffffff; + background-color: #2f2f2f; + color: white; border: none; cursor: pointer; font-size: 0.9rem;