ajout routes

src/App.jsx

@@ -1,4 +1,3 @@
-// src/App.js
 import React, { useEffect, useState } from 'react';
 import { BrowserRouter as Router, Route, Routes, Navigate } from 'react-router-dom';
 import { ToastContainer } from 'react-toastify';
@@ -9,21 +8,13 @@ import ServerDetails from './pages/ServerDetails/ServerDetails';
 import { auth } from './service/firebase';
 import styles from './App.module.scss';
 import Loading from './pages/Loading/loading';
-import NotFound from './pages/NotFound/NotFound'; 
+import NotFoundPage from './pages/NotFoundPage/NotFoundPage';
 
 const App = () => {
   const [user, setUser] = useState(null);
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
-    const script = document.createElement('script');
-
-    script.src = 'https://static.cloudflareinsights.com/beacon.min.js';
-    script.async = true;
-    script.defer = true;
-    script.data = JSON.stringify({
-      token: '5cef39a7410e4a4e8ab3dfbe163b73d0',
-    });
     const unsubscribe = auth.onAuthStateChanged((user) => {
       setUser(user);
       setLoading(false);
@@ -42,9 +33,9 @@ const App = () => {
         <Routes>
           <Route path="/login" element={user ? <Navigate to="/dashboard" /> : <LoginPage />} />
           <Route path="/dashboard" element={user ? <DashboardPage user={user} /> : <Navigate to="/login" />} />
-          <Route path="/server/:serverName" element={user ? <ServerDetails user={user} /> : <Navigate to="/login" />} /> {/* Ajout de cette ligne */}
+          <Route path="/server/:serverName" element={user ? <ServerDetails user={user} /> : <Navigate to="/login" />} />
           <Route path="/" element={<Navigate to={user ? "/dashboard" : "/login"} />} />
-          <Route path="*" element={<NotFound />} /> {/*  route 404 */}
+          <Route path="*" element={<NotFoundPage />} />
         </Routes>
         <ToastContainer />
       </div>

src/components/serverCard/serverCard.jsx

@@ -1,4 +1,3 @@
-// src/components/serverCard/serverCard.jsx
 import React from 'react';
 import { Link } from 'react-router-dom';
 import styles from './serverCard.module.scss';
@@ -24,7 +23,8 @@ const ServerCard = ({ status, version, name, framework, onRunClick, onStopClick,
     }
   };
 
-  const handleRun = async () => {
+  const handleRun = async (event) => {
+    event.preventDefault();
     try {
       await onRunClick(name); 
     } catch (error) {
@@ -32,7 +32,8 @@ const ServerCard = ({ status, version, name, framework, onRunClick, onStopClick,
     }
   };
 
-  const handleStop = async () => {
+  const handleStop = async (event) => {
+    event.preventDefault();
     try {
       await onStopClick(name); 
     } catch (error) {
@@ -40,7 +41,8 @@ const ServerCard = ({ status, version, name, framework, onRunClick, onStopClick,
     }
   };
 
-  const handleDelete = async () => {
+  const handleDelete = async (event) => {
+    event.preventDefault();
     try {
       await onDeleteClick(name); 
     } catch (error) {

src/components/serverCard/serverCard.module.scss

@@ -49,6 +49,15 @@
   transition: background-color 0.3s ease; 
   margin-top: 1rem;
 }
+
+.runningButton:hover{
+  background-color: #8d213ec1;
+}
+
+.stoppedButton:hover{
+  background-color: #008d5fc1;
+}
+
 .deleteButton{
   width: 20px;
   height: 20px;

src/pages/NotFoundPage/NotFoundPage.jsx

@@ -1,7 +1,7 @@
 // src/pages/NotFoundPage/NotFoundPage.jsx
 import React from 'react';
 import Navbar from '../../components/navbar/Navbar';
-import styles from './NotFound.module.scss';
+import styles from './NotFoundPage.module.scss';
 
 const NotFoundPage = () => {
   return (

src/pages/ServerDetails/ServerDetails.jsx

@@ -1,6 +1,5 @@
-// src/pages/ServerDetails/ServerDetails.jsx
 import React, { useEffect, useState } from 'react';
-import { useParams } from 'react-router-dom';
+import { useParams, useNavigate } from 'react-router-dom';
 import Navbar from '../../components/navbar/Navbar';
 import styles from './ServerDetails.module.scss';
 import serviiApi from "../../service/api.tsx";
@@ -8,41 +7,56 @@ import Loading from '../Loading/loading';
 
 const ServerDetails = ({ user }) => {
   const { serverName } = useParams();
+  const navigate = useNavigate();
   const [server, setServer] = useState(null);
   const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
 
   useEffect(() => {
-    const loadServer = async () => {
+    const fetchServer = async () => {
       try {
-        const ApiResponse = await serviiApi.fetchServer(serverName);
-        setServer(ApiResponse.message);
+        const ApiResponse = await serviiApi.fetchServers();
+        const data = ApiResponse.message;
+        const foundServer = data.find(server => server.name === serverName);
+        
+        if (foundServer) {
+          setServer(foundServer);
+        } else {
+          setError('Server not found');
+        }
       } catch (error) {
-        console.error('Error fetching server data:', error);
+        console.error('Error fetching server:', error);
+        setError('Error fetching server');
       } finally {
         setLoading(false);
       }
     };
-    loadServer();
+
+    fetchServer();
   }, [serverName]);
 
   if (loading) {
     return <Loading />;
   }
 
+  if (error) {
+    return (
+      <div className={styles.serverDetailsContainer}>
+        <Navbar user={user} />
+        <div className={styles.error}>
+          <h1>{error}</h1>
+          <button onClick={() => navigate('/dashboard')}>Back to Dashboard</button>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div className={styles.serverDetailsContainer}>
       <Navbar user={user} />
-      {server ? (
       <div className={styles.details}>
         <h1>{server.name}</h1>
-          <p>Status: {server.running ? 'Running' : 'Stopped'}</p>
-          <p>Version: {server.version}</p>
-          <p>Framework: {server.framework}</p>
-          {/* Ajoutez d'autres détails ici */}
       </div>
-      ) : (
-        <div>Server not found</div>
-      )}
     </div>
   );
 };

src/pages/ServerDetails/ServerDetails.module.scss

@@ -0,0 +1,7 @@
+.details{
+    color: white;
+}
+
+.serverDetailsContainer{
+    margin-top: 10rem;
+}