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 { 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>
);

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

@ -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);
}

5
src/main.jsx
View File

@ -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 />
);

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

@ -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} />
@ -128,8 +135,7 @@ const DashboardPage = ({ user }) => {
);
}
if (servers.length === 0) {
if (servers.length === 0 && !loading) {
return (
<div className={styles.dashboardContainer}>
<Navbar user={user} />

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

@ -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;
}

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

@ -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;

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

@ -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);
const cachedServers = JSON.parse(localStorage.getItem('cachedServers')) || [];
const foundServer = cachedServers.find(server => server.name === serverName);
if (foundServer) {
setServer(foundServer);
setInitialServer(foundServer);
} else {
setError('Server not found');
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);
}
} catch (error) {
console.error('Error fetching server:', error);
setError('Error fetching server');
} finally {
setLoading(false);
}
};
};
fetchServer();
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' },