From 9874f07209d5d221e7eec4183a8a89595dbd366e Mon Sep 17 00:00:00 2001
From: Guillaume Dorce <polynux.dev@gmail.com>
Date: Wed, 28 Sep 2022 22:51:09 +0200
Subject: [PATCH] delete message

---
 client/src/components/Message.tsx           | 16 ++++----
 client/src/components/MessageWrapper.tsx    |  2 +-
 client/src/components/PopupMessage.tsx      | 42 ++++++++++++++++-----
 client/src/controllers/MessageController.ts |  3 +-
 client/tsconfig.json                        |  3 ++
 client/vite.config.ts                       |  1 +
 6 files changed, 46 insertions(+), 21 deletions(-)

diff --git a/client/src/components/Message.tsx b/client/src/components/Message.tsx
index 78737a4..483eb67 100644
--- a/client/src/components/Message.tsx
+++ b/client/src/components/Message.tsx
@@ -29,21 +29,21 @@ const Likes = ({ likes }: {likes: number}) => {
   );
 };
 
-const Message = ({ text = '', user, date, image = '', id }: any) => {
+const Message = ({ message }: any) => {
   return (
     <>
-      <div className="flex bg-grey-dark rounded-xl w-full max-w-3xl p-5 gap-5 shadow-md shadow-grey-dark" id={"messageId" + id}>
-        {user && <Avatar user={user} />}
+      <div className="flex bg-grey-dark rounded-xl w-full max-w-3xl p-5 gap-5 shadow-md shadow-grey-dark" id={"messageId" + message.id}>
+        {message.author && <Avatar user={message.author} />}
         <div className="flex flex-col gap-2 relative flex-grow">
           <div className="flex justify-between">
             <div className="text-red-light text-xl username">
-              {user.firstName} {user.lastName}
+              {message.author.firstName} {message.author.lastName}
             </div>
-            <PopupMessage id={id} />
+            <PopupMessage message={message} />
           </div>
-          <Text text={text} />
-          <Image image={image} />
-          <div className="text-grey-light date">{date}</div>
+          <Text text={message.content} />
+          <Image image={message.image} />
+          <div className="text-grey-light date">{message.createdAt}</div>
           <Likes likes={2} />
         </div>
         
diff --git a/client/src/components/MessageWrapper.tsx b/client/src/components/MessageWrapper.tsx
index 259abf3..55e10d9 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} key={message.id}/>
+        <Message message={message} key={message.id}/>
       ))}
     </main>
   );
diff --git a/client/src/components/PopupMessage.tsx b/client/src/components/PopupMessage.tsx
index c940a62..060c3c4 100644
--- a/client/src/components/PopupMessage.tsx
+++ b/client/src/components/PopupMessage.tsx
@@ -1,22 +1,42 @@
 import { useEffect, useState } from 'react';
 import { FaEllipsisH } from 'react-icons/fa';
 import Modal from './Modal';
+import { deleteMessage } from '@controllers/MessageController';
+import { useQueryClient } from '@tanstack/react-query';
 
 const DeleteModal = ({
-  id,
+  authorId,
+  messageId,
   showDelete,
   setShowDelete,
 }: {
-  id: string;
+  authorId: string;
+  messageId: string;
   showDelete: boolean;
   setShowDelete: (showDelete: boolean) => void;
 }) => {
+  const queryClient = useQueryClient();
+  
+  const handleDelete = async () => {
+    try {
+      const response = await deleteMessage(messageId);
+      if (response.status === 200) {
+        console.log(await response.json());
+        queryClient.invalidateQueries(['messages']);
+        setShowDelete(false);
+      }
+    } catch (error) {
+      console.error(error);
+      setShowDelete(false);
+    }
+  };
+
   return (
     <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)}
+        onClick={handleDelete}
       >
         Supprimer
       </button>
@@ -31,11 +51,13 @@ const DeleteModal = ({
 };
 
 const EditModal = ({
-  id,
+  authorId,
+  messageId,
   showEdit,
   setShowEdit,
 }: {
-  id: string;
+  authorId: string;
+  messageId: string;
   showEdit: boolean;
   setShowEdit: (showEdit: boolean) => void;
 }) => {
@@ -46,20 +68,20 @@ const EditModal = ({
   );
 };
 
-const PopupMessage = ({ id }: { id: string }) => {
+const PopupMessage = ({ message }: { message: any }) => {
   const [show, setShow] = useState(false);
   const [showEdit, setShowEdit] = useState(false);
   const [showDelete, setShowDelete] = useState(false);
 
   useEffect(() => {
     const handleClick = (e: any) => {
-      if (e.target.closest('#messageId' + id) === null) {
+      if (e.target.closest('#messageId' + message.id) === null) {
         setShow(false);
       }
     };
 
     document.addEventListener('click', handleClick);
-  }, [id]);
+  }, [message.id]);
 
   return (
     <>
@@ -98,8 +120,8 @@ const PopupMessage = ({ id }: { id: string }) => {
           </button>
         </div>
       </div>
-      <EditModal id={id} showEdit={showEdit} setShowEdit={setShowEdit} />
-      <DeleteModal id={id} showDelete={showDelete} setShowDelete={setShowDelete} />
+      <EditModal authorId={message.author.id} messageId={message.id} showEdit={showEdit} setShowEdit={setShowEdit} />
+      <DeleteModal authorId={message.author.id} messageId={message.id} showDelete={showDelete} setShowDelete={setShowDelete} />
     </>
   );
 };
diff --git a/client/src/controllers/MessageController.ts b/client/src/controllers/MessageController.ts
index 6288c29..39efd9a 100644
--- a/client/src/controllers/MessageController.ts
+++ b/client/src/controllers/MessageController.ts
@@ -36,13 +36,12 @@ const newMessage = async (data: FormData) => {
 
 const deleteMessage = async (id: string) => {
   const token = new Cookies().get('token');
-  const response = await fetch(`/api/posts/${id}`, {
+  return fetch(`/api/posts/delete/${id}`, {
     method: 'DELETE',
     headers: {
       'Authorization': `Bearer ${token}`
     },
   });
-  return response.json();
 };
 
 const editMessage = async (id: string, data: FormData) => {
diff --git a/client/tsconfig.json b/client/tsconfig.json
index 2700c4a..86fab38 100644
--- a/client/tsconfig.json
+++ b/client/tsconfig.json
@@ -27,6 +27,9 @@
       "@components/*": [
         "src/components/*"
       ],
+      "@controllers/*": [
+        "src/controllers/*"
+      ],
     }
   },
   "include": [
diff --git a/client/vite.config.ts b/client/vite.config.ts
index 06c6b7e..d804fd2 100644
--- a/client/vite.config.ts
+++ b/client/vite.config.ts
@@ -24,6 +24,7 @@ export default defineConfig({
       '@components': path.resolve(__dirname, './src/components'),
       '@styles': path.resolve(__dirname, './src/assets/styles'),
       '@layouts': path.resolve(__dirname, './src/layouts'),
+      '@controllers': path.resolve(__dirname, './src/controllers'),
     }
   },
 });