ajout call api pour afficher les serveurs

src/App.jsx

@@ -1,3 +1,4 @@
+// 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';

src/pages/DashboardPage/DashboardPage.jsx

@@ -1,16 +1,62 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
+import { getAuth } from 'firebase/auth';
 import ServerCard from '../../components/serverCard/serverCard';
 import Navbar from '../../components/navbar/Navbar';
 import styles from './DashboardPage.module.scss';
 
 const DashboardPage = ({ user }) => {
+  const [servers, setServers] = useState([]);
+  const auth = getAuth();
+
+  useEffect(() => {
+    const fetchServers = async () => {
+      try {
+        const currentUser = auth.currentUser;
+        if (!currentUser) {
+          console.error('No current user found');
+          return;
+        }
+        const userId = currentUser.uid;  
+        console.log('User ID:', userId);  
+
+        const response = await fetch('http://api.servii.fr:3000/FetchServers', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            'Authorization': `Bearer ${userId}` 
+          },
+          body: JSON.stringify({ token: userId })  
+        });
+        if (!response.ok) {
+          const errorText = await response.text();
+          console.error('Error response text:', errorText); 
+          throw new Error(`Network response was not ok: ${response.statusText}`);
+        }
+        const data = await response.json();
+        console.log('Data:', data);  
+        setServers(data);
+      } catch (error) {
+        console.error('Error fetching servers:', error);
+      }
+    };
+
+    fetchServers();
+  }, [auth]);
+
   return (
     <div className={styles.dashboardContainer}>
       <Navbar user={user} />
       <div className={styles.cardsContainer}>
-        <ServerCard color="#f0f0f0" status="En cours" version="1.16.5" link="http://example.com" name="test1" />
-        <ServerCard color="#f0f0f0" status="Démarrage" version="1.17.1" link="http://example.com" name="test2" />
-        <ServerCard color="#f0f0f0" status="Hors ligne" version="1.15.2" link="http://example.com" name="test3" />
+        {servers.map((server, index) => (
+          <ServerCard
+            key={index}
+            color="#f0f0f0"
+            status={server.running ? 'En cours' : 'Hors ligne'}
+            version={server.version}
+            link={`http://example.com/${server.name}`} 
+            name={server.name}
+          />
+        ))}
       </div>
     </div>
   );

src/pages/LoginPage/LoginPage.jsx

@@ -1,6 +1,7 @@
+// src/pages/LoginPage/LoginPage.js
 import React from 'react';
-import { auth, googleProvider, signInWithPopup } from './firebase'; 
 import { useNavigate } from 'react-router-dom';
+import { auth, googleProvider, signInWithPopup } from './firebase';
 import styles from './LoginPage.module.scss';
 
 const LoginPage = () => {
@@ -17,12 +18,12 @@ const LoginPage = () => {
 
   return (
     <div className={styles.container}>
-          <div className={styles.mainCard}>
-           <h1>Page de connexion</h1>
-            <button onClick={handleLogin} className={styles.logbtn}>          
-              Se connecter avec Google
-            </button>
-          </div>
+      <div className={styles.mainCard}>
+        <h1>Page de connexion</h1>
+        <button onClick={handleLogin} className={styles.logbtn}>
+          Se connecter avec Google
+        </button>
+      </div>
     </div>
   );
 };

src/pages/LoginPage/firebase.js

@@ -1,3 +1,4 @@
+// src/firebase.js
 import { initializeApp } from 'firebase/app';
 import { getAuth, GoogleAuthProvider, signInWithPopup } from 'firebase/auth';