charleslemaux/servii-frontend
1
0
Fork 0
mirror of https://github.com/hubHarmony/servii-frontend.git synced 2024-11-17 21:40:30 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #49 from hubHarmony/lazyload

Browse Source 
optimise loading and api calls
This commit is contained in:
Antoninop 2024-09-21 15:38:35 +02:00 committed by GitHub
commit efbdf52a48
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 124 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
src/App.jsx
View File

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

6
src/components/navbar/Navbar.module.scss
View File

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

5
src/main.jsx
View File

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

50
src/pages/DashboardPage/DashboardPage.jsx
View File

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

4
src/pages/DashboardPage/DashboardPage.module.scss
View File

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

19
src/pages/ServerConsole/ServerConsole.module.scss
View File

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

48
src/pages/ServerProperties/ServerProperties.jsx
View File

@ -15,27 +15,38 @@ const ServerProprieties = () => {
const [error, setError] = useState(null); const [error, setError] = useState(null);
useEffect(() => { 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) { if (foundServer) {
setServer(foundServer); setServer(foundServer);
setInitialServer(foundServer); setInitialServer(foundServer);
} else { setLoading(false);
setError('Server not found'); } 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);
} }
} catch (error) { };
console.error('Error fetching server:', error);
setError('Error fetching server');
} finally {
setLoading(false);
}
};
fetchServer(); fetchServer();
}
}, [serverName]); }, [serverName]);
const handleChange = (e) => { const handleChange = (e) => {
@ -46,7 +57,6 @@ const ServerProprieties = () => {
const handleSave = async () => { const handleSave = async () => {
try { try {
const props = []; const props = [];
const serverProperties = [ const serverProperties = [
{ key: 'maxPlayers', type: 'number', name: 'max-players' }, { key: 'maxPlayers', type: 'number', name: 'max-players' },
{ key: 'motd', type: 'string', name: 'motd' }, { key: 'motd', type: 'string', name: 'motd' },