From 80968e2b44a15a3e8992c3dab64727a766c2c92f Mon Sep 17 00:00:00 2001
From: Guillaume Dorce <polynux.dev@gmail.com>
Date: Wed, 28 Sep 2022 17:34:28 +0200
Subject: [PATCH] modal popup

---
 client/src/components/Modal.tsx        | 17 +++++++++
 client/src/components/PopupMessage.tsx | 48 +++++++++++++++++++++++---
 client/tailwind.config.cjs             |  1 +
 3 files changed, 61 insertions(+), 5 deletions(-)
 create mode 100644 client/src/components/Modal.tsx

diff --git a/client/src/components/Modal.tsx b/client/src/components/Modal.tsx
new file mode 100644
index 0000000..c04e704
--- /dev/null
+++ b/client/src/components/Modal.tsx
@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+
+const Modal = ({ children, show }: { children: ReactNode; show: boolean }) => {
+  return (
+    <div
+      className={
+        'modal overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 bottom-0 w-full h-full z-1000 flex justify-center items-center' +
+        (show ? '' : ' hidden')
+      }
+    >
+      <div className="absolute w-full h-full top-0 left-0 bg-grey opacity-40"></div>
+      <div className="relative rounded-lg shadow dark:bg-grey-dark p-4">{children}</div>
+    </div>
+  );
+};
+
+export default Modal;
diff --git a/client/src/components/PopupMessage.tsx b/client/src/components/PopupMessage.tsx
index 1f6f1af..18c2e52 100644
--- a/client/src/components/PopupMessage.tsx
+++ b/client/src/components/PopupMessage.tsx
@@ -1,13 +1,18 @@
 import { useEffect, useState } from 'react';
 import { FaEllipsisH } from 'react-icons/fa';
+import Modal from './Modal';
 
 const PopupMessage = ({ id }: { id: string }) => {
   const [show, setShow] = useState(false);
+  const [showEdit, setShowEdit] = useState(false);
+  const [showDelete, setShowDelete] = useState(false);
 
   useEffect(() => {
     const handleClick = (e: any) => {
-      console.log(show && e.target.closest('.popup-btn'));
-      if ((show && !e.target.closest('.popup-btn') || (e.target.closest('.popup') && !e.target.closest('.popup-btn')))) {
+      if (
+        (show && !e.target.closest('.popup-btn')) ||
+        (e.target.closest('.popup') && !e.target.closest('.popup-btn'))
+      ) {
         setShow(false);
       }
     };
@@ -25,12 +30,45 @@ const PopupMessage = ({ id }: { id: string }) => {
           <FaEllipsisH className="fill-grey-light hover:fill-grey-dark transition-all text-xl w-10 h-10 p-2.5" />
         </div>
       </div>
-      <div className={'popup absolute z-10 right-0 top-8 bg-grey-dark shadow-lg shadow-slate-900 rounded-xl p-2' + (show ? '' : ' hidden')}>
+      <div
+        className={
+          'popup absolute z-10 right-0 top-8 bg-grey-dark shadow-lg shadow-slate-900 rounded-xl p-2' +
+          (show ? '' : ' hidden')
+        }
+      >
         <div className="popup-content space-y-2">
-          <div className="popup-item text-white rounded-xl p-2 transition-all hover:cursor-pointer hover:bg-grey-light hover:text-grey-dark">Modifier</div>
-          <div className="popup-item text-red rounded-xl p-2 transition-all hover:cursor-pointer hover:text-white hover:bg-red">Supprimer</div>
+          <button
+            className="popup-item block text-white rounded-xl p-2 transition-all hover:cursor-pointer hover:bg-grey-light hover:text-grey-dark"
+            onClick={() => setShowEdit(!showEdit)}
+          >
+            Modifier
+          </button>
+          <button
+            className="popup-item block text-red rounded-xl p-2 transition-all hover:cursor-pointer hover:text-white hover:bg-red"
+            onClick={() => setShowDelete(!showDelete)}
+          >
+            Supprimer
+          </button>
         </div>
       </div>
+      <Modal show={showEdit}>
+        <div className="text-white">Modifier</div>
+      </Modal>
+      <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>
+      </Modal>
     </>
   );
 };
diff --git a/client/tailwind.config.cjs b/client/tailwind.config.cjs
index fd098cf..c6a6a85 100644
--- a/client/tailwind.config.cjs
+++ b/client/tailwind.config.cjs
@@ -14,6 +14,7 @@ module.exports = {
       },
       zIndex: {
         '100': '100',
+        '1000': '1000',
       },
       padding: {
         '2.5': '0.625rem',