Added few functions to the platform

components/GroupSettingsModal.tsx

@@ -2,6 +2,8 @@
 
 import { useState, useEffect } from 'react';
 import useSWR from 'swr';
+import AlertModal from './AlertModal';
+import ConfirmModal from './ConfirmModal';
 
 interface User {
   id: string;
@@ -41,6 +43,16 @@ export default function GroupSettingsModal({
   const [selectedUsers, setSelectedUsers] = useState<string[]>([]);
   const [isUpdating, setIsUpdating] = useState(false);
   const [isAdding, setIsAdding] = useState(false);
+  const [alertModal, setAlertModal] = useState<{
+    show: boolean;
+    type: 'success' | 'error' | 'info' | 'warning';
+    title: string;
+    message: string;
+  } | null>(null);
+  const [confirmModal, setConfirmModal] = useState<{
+    show: boolean;
+    userId: string | null;
+  } | null>(null);
 
   const { data: users, error } = useSWR<User[]>(
     search ? `/api/users?search=${encodeURIComponent(search)}` : null,
@@ -51,7 +63,12 @@ export default function GroupSettingsModal({
 
   const handleUpdateName = async () => {
     if (!groupName.trim()) {
-      alert('Le nom du groupe ne peut pas être vide');
+      setAlertModal({
+        show: true,
+        type: 'warning',
+        title: 'Nom requis',
+        message: 'Le nom du groupe ne peut pas être vide',
+      });
       return;
     }
 
@@ -70,11 +87,21 @@ export default function GroupSettingsModal({
         onClose();
       } else {
         const error = await response.json();
-        alert(error.error || 'Erreur lors de la mise à jour');
+        setAlertModal({
+          show: true,
+          type: 'error',
+          title: 'Erreur',
+          message: error.error || 'Erreur lors de la mise à jour',
+        });
       }
     } catch (error) {
       console.error('Erreur:', error);
-      alert('Erreur lors de la mise à jour');
+      setAlertModal({
+        show: true,
+        type: 'error',
+        title: 'Erreur',
+        message: 'Erreur lors de la mise à jour',
+      });
     } finally {
       setIsUpdating(false);
     }
@@ -82,7 +109,12 @@ export default function GroupSettingsModal({
 
   const handleAddParticipants = async () => {
     if (selectedUsers.length === 0) {
-      alert('Veuillez sélectionner au moins un utilisateur');
+      setAlertModal({
+        show: true,
+        type: 'warning',
+        title: 'Sélection requise',
+        message: 'Veuillez sélectionner au moins un utilisateur',
+      });
       return;
     }
 
@@ -102,24 +134,39 @@ export default function GroupSettingsModal({
         onUpdate();
       } else {
         const error = await response.json();
-        alert(error.error || 'Erreur lors de l\'ajout des participants');
+        setAlertModal({
+          show: true,
+          type: 'error',
+          title: 'Erreur',
+          message: error.error || 'Erreur lors de l\'ajout des participants',
+        });
       }
     } catch (error) {
       console.error('Erreur:', error);
-      alert('Erreur lors de l\'ajout des participants');
+      setAlertModal({
+        show: true,
+        type: 'error',
+        title: 'Erreur',
+        message: 'Erreur lors de l\'ajout des participants',
+      });
     } finally {
       setIsAdding(false);
     }
   };
 
   const handleRemoveParticipant = async (userId: string) => {
-    if (!confirm('Êtes-vous sûr de vouloir retirer cet utilisateur du groupe ?')) {
-      return;
-    }
+    setConfirmModal({
+      show: true,
+      userId,
+    });
+  };
+
+  const confirmRemoveParticipant = async () => {
+    if (!confirmModal?.userId) return;
 
     try {
       const response = await fetch(
-        `/api/conversations/${conversation.id}/participants?userId=${userId}`,
+        `/api/conversations/${conversation.id}/participants?userId=${confirmModal.userId}`,
         {
           method: 'DELETE',
         }
@@ -127,13 +174,26 @@ export default function GroupSettingsModal({
 
       if (response.ok) {
         onUpdate();
+        setConfirmModal(null);
       } else {
         const error = await response.json();
-        alert(error.error || 'Erreur lors du retrait du participant');
+        setAlertModal({
+          show: true,
+          type: 'error',
+          title: 'Erreur',
+          message: error.error || 'Erreur lors du retrait du participant',
+        });
+        setConfirmModal(null);
       }
     } catch (error) {
       console.error('Erreur:', error);
-      alert('Erreur lors du retrait du participant');
+      setAlertModal({
+        show: true,
+        type: 'error',
+        title: 'Erreur',
+        message: 'Erreur lors du retrait du participant',
+      });
+      setConfirmModal(null);
     }
   };
 
@@ -295,6 +355,31 @@ export default function GroupSettingsModal({
           </button>
         </div>
       </div>
+
+      {/* Modal d'alerte */}
+      {alertModal && (
+        <AlertModal
+          isOpen={alertModal.show}
+          type={alertModal.type}
+          title={alertModal.title}
+          message={alertModal.message}
+          onClose={() => setAlertModal(null)}
+        />
+      )}
+
+      {/* Modal de confirmation */}
+      {confirmModal && (
+        <ConfirmModal
+          isOpen={confirmModal.show}
+          title="Retirer un participant"
+          message="Êtes-vous sûr de vouloir retirer cet utilisateur du groupe ?"
+          confirmText="Retirer"
+          cancelText="Annuler"
+          confirmColor="danger"
+          onConfirm={confirmRemoveParticipant}
+          onCancel={() => setConfirmModal(null)}
+        />
+      )}
     </div>
   );
 }