+ gestion loader amélioré

src/App.jsx

@@ -7,13 +7,7 @@ import LoginPage from './pages/LoginPage/LoginPage';
 import DashboardPage from './pages/DashboardPage/DashboardPage';
 import { auth } from './service/firebase';
 import styles from './App.module.scss';
-
-const Loading = () => (
-  <div className={styles.loading}>
-    <div className={styles.spinner}></div>
-    <p style={{ color: 'white' }}>Chargement...</p>
-  </div>
-);
+import Loading from './pages/Loading/loading';
 
 const App = () => {
   const [user, setUser] = useState(null);

src/App.module.scss

@@ -1,28 +0,0 @@
-
-  .loading {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    height: 100vh;
-    font-size: 1.5rem;
-  }
-  
-  .spinner {
-    border: 4px solid rgba(0, 0, 0, 0.1);
-    width: 6rem;
-    height: 6rem;
-    border-radius: 50%;
-    border-left-color: #09f;
-    animation: spin 1s ease infinite;
-  }
-  
-  @keyframes spin {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(360deg);
-    }
-  }
-  

src/components/CreateServer/CreateServer.jsx

@@ -4,8 +4,10 @@ import { getUserSubdomain } from "../../service/firebase";
 import serviiApi from "../../service/api.tsx";
 
 const CreateServer = ({ user, onCreateServer }) => {
-  const [subdomain, setSubdomain] = useState('loading'); // Utiliser 'loading' au lieu de null
+  const [subdomain, setSubdomain] = useState('loading');
   const [subdomainInput, setSubdomainInput] = useState('');
+  const [serverName, setServerName] = useState('');
+  const [serverVersion, setServerVersion] = useState('');
 
   const loadSubdomain = async () => {
     try {
@@ -33,6 +35,14 @@ const CreateServer = ({ user, onCreateServer }) => {
     }
   };
 
+  const handleCreateServer = async () => {
+    try {
+      await onCreateServer(serverName, serverVersion);
+    } catch (error) {
+      console.error('Error creating server:', error);
+    }
+  };
+
   if (subdomain === 'loading') {
     return (
       <div className={styles.container}>
@@ -63,8 +73,23 @@ const CreateServer = ({ user, onCreateServer }) => {
         <div className={styles.container}>
           <div className={styles.mainCard}>
             <div className={styles.SubTitle}>Création du serveur</div>
-            <input className={styles.Input} type="text" placeholder="Nom du serveur" />
-            <button className={styles.btnServCreate} onClick={onCreateServer}> {/* Utilisation de onCreateServer ici */}
+            <input
+              className={styles.Input}
+              type="text"
+              placeholder="Nom du serveur"
+              value={serverName}
+              onChange={(e) => setServerName(e.target.value)}
+            />
+            <select
+              name="version"
+              id="version-select"
+              value={serverVersion}
+              onChange={(e) => setServerVersion(e.target.value)}
+            >
+              <option value="">Version</option>
+              <option value="1.20.6">1.20.6</option>
+            </select>
+            <button className={styles.btnServCreate} onClick={handleCreateServer}>
               Créer
             </button>
           </div>

src/pages/DashboardPage/DashboardPage.jsx

@@ -4,24 +4,25 @@ import Navbar from '../../components/navbar/Navbar';
 import styles from './DashboardPage.module.scss';
 import NoServer from '../NoServer/NoServer';
 import { getUserSubdomain } from "../../service/firebase";
-import '../../service/api.tsx';
 import serviiApi from "../../service/api.tsx";
-import Api from "../../service/api.tsx";
-
+import Loading from '../Loading/loading';
 
 const DashboardPage = ({ user }) => {
   const [servers, setServers] = useState([]);
   const [subdomain, setSubdomain] = useState("");
+  const [loading, setLoading] = useState(true);
 
   const loadServers = async () => {
     try {
       const ApiResponse = await serviiApi.fetchServers();
-      const data = ApiResponse.message
+      const data = ApiResponse.message;
       setServers(data);
       const userSubdomain = await getUserSubdomain(user.uid);
       setSubdomain(userSubdomain);
     } catch (error) {
       console.error('Error fetching data:', error);
+    } finally {
+      setLoading(false);
     }
   };
 
@@ -29,11 +30,10 @@ const DashboardPage = ({ user }) => {
     loadServers();
   }, []);
 
-  const handleCreateServer = async () => {
+  const handleCreateServer = async (serverName, serverVersion) => {
     try {
-      const serverName = prompt('Enter the name for the new server:');
-      if (!serverName) return;
-      await serviiApi.serverCreate(serverName, "1.20.6", "paper");
+      if (!serverName || !serverVersion) return;
+      await serviiApi.serverCreate(serverName, serverVersion, "paper");
       await loadServers();
     } catch (error) {
       console.error('Error creating server:', error);
@@ -68,6 +68,9 @@ const DashboardPage = ({ user }) => {
   return (
     <div className={styles.dashboardContainer}>
       <Navbar user={user} />
+      {loading ? (
+        <Loading />
+      ) : (
         <div className={styles.cardsContainer}>
           {servers.length === 0 ? (
             <NoServer user={user} onCreateServer={handleCreateServer} />
@@ -87,6 +90,7 @@ const DashboardPage = ({ user }) => {
             ))
           )}
         </div>
+      )}
     </div>
   );
 };

src/pages/Loading/loading.jsx

@@ -0,0 +1,10 @@
+import styles from './loading.module.scss';
+
+const Loading = () => (
+    <div className={styles.loading}>
+      <div className={styles.spinner}></div>
+      <p style={{ color: 'white' }}>Chargement...</p>
+    </div>
+  );
+
+export default Loading;

src/pages/Loading/loading.module.scss

@@ -0,0 +1,28 @@
+
+.loading {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+    font-size: 1.5rem;
+  }
+  
+  .spinner {
+    border: 4px solid rgba(0, 0, 0, 0.1);
+    width: 6rem;
+    height: 6rem;
+    border-radius: 50%;
+    border-left-color: #09f;
+    animation: spin 1s ease infinite;
+  }
+  
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+  

src/pages/NoServer/NoServer.jsx

@@ -8,15 +8,15 @@ const NoServer = ({ user, onCreateServer }) => {
   return (
     <div className={styles.container}>
       <div className={styles.mainCard}>
-        { isCreating === false ? (
+        {isCreating === false ? (
           <>
-            <div className={styles.nsSubTitle}>Erreur </div>
+            <div className={styles.nsSubTitle}>Erreur</div>
             <div className={styles.nsTitle}>Aucun serveur possédé</div>
             <button className={styles.btnServCreate} onClick={() => setIsCreating(true)}>Créer un nouveau serveur</button>
           </>
         ) : (
           <>
-            <CreateServer user={user} onCreateServer={onCreateServer} /> {}
+            <CreateServer user={user} onCreateServer={onCreateServer} />
           </>
         )}
       </div>