From 1212375d651cde09444ec5987351d96bc9418b44 Mon Sep 17 00:00:00 2001
From: AntoninoP <antoninopiraino70pgmail.com>
Date: Sun, 22 Sep 2024 23:57:46 +0200
Subject: [PATCH] +ajout modal confirmation suppresion

---
 .../DeleteConfirmationModal.jsx               |  20 +++
 .../DeleteConfirmationModal.module.scss       |  62 +++++++
 src/pages/DashboardPage/DashboardPage.jsx     | 160 ++++++++++--------
 3 files changed, 172 insertions(+), 70 deletions(-)
 create mode 100644 src/components/DeleteConfirmationModal/DeleteConfirmationModal.jsx
 create mode 100644 src/components/DeleteConfirmationModal/DeleteConfirmationModal.module.scss

diff --git a/src/components/DeleteConfirmationModal/DeleteConfirmationModal.jsx b/src/components/DeleteConfirmationModal/DeleteConfirmationModal.jsx
new file mode 100644
index 0000000..1d02f39
--- /dev/null
+++ b/src/components/DeleteConfirmationModal/DeleteConfirmationModal.jsx
@@ -0,0 +1,20 @@
+import styles from './DeleteConfirmationModal.module.scss';
+
+const DeleteConfirmationModal = ({ isOpen, onClose, onDelete }) => {
+  if (!isOpen) return null;
+
+  return (
+    <div className={styles.modalOverlay}>
+      <div className={styles.modal}>
+        <h2>Êtes-vous sûr de vouloir supprimer ?</h2>
+        <p>Cette action est irréversible.</p>
+        <div className={styles.modalButtons}>
+          <button className={styles.cancelButton} onClick={onClose}>Annuler</button>
+          <button className={styles.deleteButton} onClick={onDelete}>Supprimer</button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DeleteConfirmationModal;
diff --git a/src/components/DeleteConfirmationModal/DeleteConfirmationModal.module.scss b/src/components/DeleteConfirmationModal/DeleteConfirmationModal.module.scss
new file mode 100644
index 0000000..70ed127
--- /dev/null
+++ b/src/components/DeleteConfirmationModal/DeleteConfirmationModal.module.scss
@@ -0,0 +1,62 @@
+.modalOverlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.modal {
+  background-color: white;
+  border-radius: 0.67rem; 
+  padding: 1.67rem; 
+  box-shadow: 0 0.33rem 2.5rem rgba(0, 0, 0, 0.1); 
+  max-width: 33.33rem; 
+  width: 100%;
+  text-align: center;
+}
+
+h2 {
+  margin: 0 0 0.83rem; 
+}
+
+p {
+  margin: 0 0 1.67rem; 
+}
+
+.modalButtons {
+  display: flex;
+  justify-content: space-between;
+}
+
+.cancelButton {
+  background-color: #f0f0f0;
+  color: #333;
+  border: none;
+  padding: 0.83rem 1.25rem; 
+  border-radius: 0.42rem;
+  font-size: 1rem;
+  cursor: pointer;
+
+  &:hover {
+    background-color: #e0e0e0;
+  }
+}
+
+.deleteButton {
+  background-color: #be3939;
+  color: white;
+  border: none;
+  padding: 0.83rem 1.25rem; 
+  border-radius: 0.42rem; 
+  font-size: 1rem;
+  cursor: pointer;
+
+  &:hover {
+    background-color: rgba(255, 59, 59, 0.76);
+  }
+}
diff --git a/src/pages/DashboardPage/DashboardPage.jsx b/src/pages/DashboardPage/DashboardPage.jsx
index 459ae41..bec1a02 100644
--- a/src/pages/DashboardPage/DashboardPage.jsx
+++ b/src/pages/DashboardPage/DashboardPage.jsx
@@ -7,6 +7,7 @@ import { getUserSubdomain } from "../../service/firebase";
 import serviiApi from "../../service/api.tsx";
 import PropTypes from "prop-types";
 import styles from './DashboardPage.module.scss';
+import DeleteConfirmationModal from '../../components/DeleteConfirmationModal/DeleteConfirmationModal';
 
 const CACHE_KEY_SERVERS = 'cachedServers';
 const CACHE_KEY_TIMESTAMP = 'cacheTimestamp';
@@ -23,6 +24,9 @@ const DashboardPage = ({ user }) => {
   const [loading, setLoading] = useState(servers.length === 0); 
   const [searchTerm, setSearchTerm] = useState('');
   const [newSubdomain, setNewSubdomain] = useState(' ');
+  
+  const [isModalOpen, setModalOpen] = useState(false);
+  const [serverToDelete, setServerToDelete] = useState(null);
 
   const updateServersFromApi = useCallback(async () => {
     try {
@@ -69,12 +73,16 @@ const DashboardPage = ({ user }) => {
     }
   };
 
-  const handleDeleteServer = async (serverName) => {
-    try {
-      await serviiApi.serverDelete(serverName);
-      updateServersFromApi(); 
-    } catch (error) {
-      console.error('Error deleting server:', error);
+  const handleDeleteServer = async () => {
+    if (serverToDelete) {
+      try {
+        await serviiApi.serverDelete(serverToDelete);
+        setModalOpen(false);
+        setServerToDelete(null);
+        updateServersFromApi(); 
+      } catch (error) {
+        console.error('Error deleting server:', error);
+      }
     }
   };
 
@@ -152,71 +160,83 @@ const DashboardPage = ({ user }) => {
   return (
     <div className={styles.dashboardContainer}>
       <Navbar user={user} />
-        <div className={styles.mainContent}>
-          <div className={styles.iptitle}>
-            Adresse de connexion à vos serveurs : 
-            <span onClick={handleCopyAddress} className={styles.subdomain}>
-              {" " + subdomain}.servii.fr
-            </span>
-          </div>
-
-          <div className={styles.headerContainer}>
-            <input
-              type="text"
-              placeholder="Filtrer par nom"
-              value={searchTerm}
-              onChange={(e) => setSearchTerm(e.target.value)}
-              className={styles.searchInput}
-            />
-            <button className={styles.btnCreate} onClick={handleCreateServer}>
-              <div className={styles.plusIcon}>+</div>
-              <div>Créer un nouveau serveur</div>
-            </button>
-          </div>
-
-          <div className={styles.FavoriteServerContainer}>
-            {favoriteServer ? (
-              <div className={styles.favoriteServerCard}>
-                <ServerCard
-                  key={favoriteServer.id}
-                  status={favoriteServer.running}
-                  version={favoriteServer.version}
-                  name={favoriteServer.name}
-                  framework={favoriteServer.framework}
-                  maxPlayers={favoriteServer.maxPlayers}
-                  countPlayers={favoriteServer.onlinePlayers}
-                  onRunClick={() => handleRunServer(favoriteServer.name)}
-                  onStopClick={() => handleStopServer(favoriteServer.name)}
-                  onDeleteClick={() => handleDeleteServer(favoriteServer.name)}
-                  subdomain={subdomain}
-                  favoriteServer={true}
-                />
-              </div>
-            ) : null}
-          </div>
-          
-          <div className={styles.cardsContainer}>
-            {serversWithoutFavorite.length > 0 ? (
-              serversWithoutFavorite.filter(server => 
-                server.name.toLowerCase().includes(searchTerm.toLowerCase())
-              ).map((server) => (
-                <ServerCard
-                  key={server.id}
-                  status={server.running}
-                  version={server.version}
-                  name={server.name}
-                  framework={server.framework}
-                  maxPlayers={server.maxPlayers}
-                  countPlayers={server.onlinePlayers}
-                  onRunClick={() => handleRunServer(server.name)}
-                  onStopClick={() => handleStopServer(server.name)}
-                  onDeleteClick={() => handleDeleteServer(server.name)}
-                  subdomain={subdomain}
-                />
-              ))
-            ) : null}
-          </div>
+      <div className={styles.mainContent}>
+        <div className={styles.iptitle}>
+          Adresse de connexion à vos serveurs : 
+          <span onClick={handleCopyAddress} className={styles.subdomain}>
+            {" " + subdomain}.servii.fr
+          </span>
         </div>
+
+        <div className={styles.headerContainer}>
+          <input
+            type="text"
+            placeholder="Filtrer par nom"
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            className={styles.searchInput}
+          />
+          <button className={styles.btnCreate} onClick={handleCreateServer}>
+            <div className={styles.plusIcon}>+</div>
+            <div>Créer un nouveau serveur</div>
+          </button>
+        </div>
+
+        <div className={styles.FavoriteServerContainer}>
+          {favoriteServer ? (
+            <div className={styles.favoriteServerCard}>
+              <ServerCard
+                key={favoriteServer.id}
+                status={favoriteServer.running}
+                version={favoriteServer.version}
+                name={favoriteServer.name}
+                framework={favoriteServer.framework}
+                maxPlayers={favoriteServer.maxPlayers}
+                countPlayers={favoriteServer.onlinePlayers}
+                onRunClick={() => handleRunServer(favoriteServer.name)}
+                onStopClick={() => handleStopServer(favoriteServer.name)}
+                onDeleteClick={() => {
+                  setServerToDelete(favoriteServer.name);
+                  setModalOpen(true);
+                }}
+                subdomain={subdomain}
+                favoriteServer={true}
+              />
+            </div>
+          ) : null}
+        </div>
+        
+        <div className={styles.cardsContainer}>
+          {serversWithoutFavorite.length > 0 ? (
+            serversWithoutFavorite.filter(server => 
+              server.name.toLowerCase().includes(searchTerm.toLowerCase())
+            ).map((server) => (
+              <ServerCard
+                key={server.id}
+                status={server.running}
+                version={server.version}
+                name={server.name}
+                framework={server.framework}
+                maxPlayers={server.maxPlayers}
+                countPlayers={server.onlinePlayers}
+                onRunClick={() => handleRunServer(server.name)}
+                onStopClick={() => handleStopServer(server.name)}
+                onDeleteClick={() => {
+                  setServerToDelete(server.name);
+                  setModalOpen(true);
+                }}
+                subdomain={subdomain}
+              />
+            ))
+          ) : null}
+        </div>
+      </div>
+
+      <DeleteConfirmationModal
+        isOpen={isModalOpen}
+        onClose={() => setModalOpen(false)}
+        onDelete={handleDeleteServer}
+      />
     </div>
   );
 };