From d10f0e7b9a6b6c9bf0061fcba88504755a241d02 Mon Sep 17 00:00:00 2001
From: Guillaume Dorce <polynux.dev@gmail.com>
Date: Wed, 28 Sep 2022 21:32:19 +0200
Subject: [PATCH] only one popup

---
 client/src/components/MessageWrapper.tsx |  2 +-
 client/src/components/PopupMessage.tsx   | 27 +++++++++++-------------
 2 files changed, 13 insertions(+), 16 deletions(-)

diff --git a/client/src/components/MessageWrapper.tsx b/client/src/components/MessageWrapper.tsx
index 39ced17..259abf3 100644
--- a/client/src/components/MessageWrapper.tsx
+++ b/client/src/components/MessageWrapper.tsx
@@ -28,7 +28,7 @@ const MessageWrapper = () => {
   return (
     <main className="messages-wrapper flex flex-col p-4 gap-4 overflow-scroll w-full max-w-3xl">
       {messages.isLoading ? '' : messages.data?.map((message: any) => (
-        <Message user={message.author} text={message.content} image={message.image} date={message.createdAt} id={message.id}/>
+        <Message user={message.author} text={message.content} image={message.image} date={message.createdAt} id={message.id} key={message.id}/>
       ))}
     </main>
   );
diff --git a/client/src/components/PopupMessage.tsx b/client/src/components/PopupMessage.tsx
index 18c2e52..659d373 100644
--- a/client/src/components/PopupMessage.tsx
+++ b/client/src/components/PopupMessage.tsx
@@ -9,10 +9,7 @@ const PopupMessage = ({ id }: { id: string }) => {
 
   useEffect(() => {
     const handleClick = (e: any) => {
-      if (
-        (show && !e.target.closest('.popup-btn')) ||
-        (e.target.closest('.popup') && !e.target.closest('.popup-btn'))
-      ) {
+      if ((e.target.closest('.popup-btn') === null) || (e.target.closest('#messageId' + id) === null)) {
         setShow(false);
       }
     };
@@ -57,17 +54,17 @@ const PopupMessage = ({ id }: { id: string }) => {
       <Modal show={showDelete}>
         <div className="text-white mb-2">Voulez vous vraiment supprimer ce message ?</div>
         <button
-            className="popup-item bg-red text-white border-red border-2 rounded-xl p-2 mr-2 transition-all hover:cursor-pointer hover:bg-white hover:text-red"
-            onClick={() => setShowDelete(!showDelete)}
-          >
-            Supprimer
-          </button>
-          <button
-            className="popup-item text-grey-light rounded-xl p-2 transition-all hover:cursor-pointer hover:bg-grey-light hover:text-grey-dark"
-            onClick={() => setShowDelete(!showDelete)}
-          >
-            Annuler
-          </button>
+          className="popup-item bg-red text-white border-red border-2 rounded-xl p-2 mr-2 transition-all hover:cursor-pointer hover:bg-white hover:text-red"
+          onClick={() => setShowDelete(!showDelete)}
+        >
+          Supprimer
+        </button>
+        <button
+          className="popup-item text-grey-light rounded-xl p-2 transition-all hover:cursor-pointer hover:bg-grey-light hover:text-grey-dark"
+          onClick={() => setShowDelete(!showDelete)}
+        >
+          Annuler
+        </button>
       </Modal>
     </>
   );