fix edit message

client/src/components/Message.tsx

@@ -1,6 +1,6 @@
 import { FaThumbsUp } from 'react-icons/fa';
 import Avatar from '@components/Avatar';
-import PopupMessage from './PopupMessage';
+import PopupMenu from './PopupMenu';
 
 const Image = ({ image }: {image: string}) => {
   if (image === '' || image === null) {
@@ -39,7 +39,7 @@ const Message = ({ message }: any) => {
             <div className="text-red-light text-xl username">
               {message.author.firstName} {message.author.lastName}
             </div>
-            <PopupMessage message={message} />
+            <PopupMenu message={message} />
           </div>
           <Text text={message.content} />
           <Image image={message.image} />

client/src/components/MessageWrapper.tsx

@@ -1,19 +1,6 @@
 import { useQuery } from "@tanstack/react-query";
-import { Cookies } from "react-cookie";
 import Message from "./Message";
-
+import { getMessages } from "@controllers/MessageController";
-const getMessages = async () => {
-  const token = new Cookies().get("token");
-  const response = await fetch("/api/posts", {
-    method: "GET",
-    mode: "cors",
-    headers: {
-      "Content-Type": "application/json",
-      Authorization: `Bearer ${token}`,
-    },
-  });
-  return response.json();
-};
 
 const MessageWrapper = () => {
   const messages = useQuery(["messages"], getMessages, {

client/src/components/NewMessage.tsx

@@ -1,36 +1,14 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useState } from 'react';
-import { Cookies } from 'react-cookie';
 import { FaPlus } from 'react-icons/fa';
-
+import {newMessage} from '@controllers/MessageController';
-const sendMessage = async (data: FormData) => {
-  const token = new Cookies().get('token');
-  let contentType = 'application/json';
-  let body: FormData | string | undefined = undefined;
-  
-  if (data.get('image')) {
-    contentType = 'multipart/form-data';
-    body = data;
-  } else {
-    body = JSON.stringify(data);
-  }
-  const response = await fetch('/api/posts/new', {
-    method: 'POST',
-    mode: 'cors',
-    headers: {
-      Authorization: `Bearer ${token}`,
-    },
-    body,
-  });
-  return response.json();
-};
 
 const NewMessage = () => {
   const [message, setMessage] = useState('');
   const [image, setImage] = useState('');
   const queryClient = useQueryClient();
 
-  const { mutate: send } = useMutation(sendMessage, {
+  const { mutate: send } = useMutation(newMessage, {
     onSuccess: () => {
       queryClient.invalidateQueries(['messages']);
     },

client/src/components/PopupMenu.tsx

@@ -0,0 +1,69 @@
+import { useEffect, useState } from 'react';
+import { FaEllipsisH } from 'react-icons/fa';
+import DeleteMessage from '@components/Popups/DeleteMessage';
+import EditMessage from '@components/Popups/EditMessage';
+
+const PopupMenu = ({ 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' + message.id) === null) {
+        setShow(false);
+      }
+    };
+
+    document.addEventListener('click', handleClick);
+  }, [message.id]);
+
+  return (
+    <>
+      <div className="bg-grey-dark">
+        <div
+          className="popup-btn cursor-pointer rounded-full hover:bg-grey-light transition-all"
+          onClick={() => setShow(!show)}
+        >
+          <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-content space-y-2">
+          <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);
+              setShow(!show);
+            }}
+          >
+            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);
+              setShow(!show);
+            }}
+          >
+            Supprimer
+          </button>
+        </div>
+      </div>
+      <EditMessage message={message} showEdit={showEdit} setShowEdit={setShowEdit} />
+      <DeleteMessage
+        authorId={message.author.id}
+        messageId={message.id}
+        showDelete={showDelete}
+        setShowDelete={setShowDelete}
+      />
+    </>
+  );
+};
+
+export default PopupMenu;

client/src/components/PopupMessage.tsx

@@ -1,151 +0,0 @@
-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';
-import { toast } from 'react-toastify';
-
-const DeleteModal = ({
-  authorId,
-  messageId,
-  showDelete,
-  setShowDelete,
-}: {
-  authorId: string;
-  messageId: string;
-  showDelete: boolean;
-  setShowDelete: (showDelete: boolean) => void;
-}) => {
-  const queryClient = useQueryClient();
-
-  const handleDelete = async () => {
-    const response = await deleteMessage(messageId);
-    queryClient.invalidateQueries(['messages']);
-    setShowDelete(false);
-    if (response.error) {
-      toast.error(response.error, {
-        position: 'top-right',
-        autoClose: 5000,
-        hideProgressBar: false,
-        closeOnClick: true,
-        pauseOnHover: true,
-        draggable: true,
-        progress: undefined,
-      });
-    } else {
-      toast.success(response.message, {
-        position: 'top-right',
-        autoClose: 5000,
-        hideProgressBar: false,
-        closeOnClick: true,
-        pauseOnHover: true,
-        draggable: true,
-        progress: undefined,
-      });
-    }
-    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={handleDelete}
-        >
-          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>
-    </>
-  );
-};
-
-const EditModal = ({
-  authorId,
-  messageId,
-  showEdit,
-  setShowEdit,
-}: {
-  authorId: string;
-  messageId: string;
-  showEdit: boolean;
-  setShowEdit: (showEdit: boolean) => void;
-}) => {
-  return (
-    <Modal show={showEdit}>
-      <div className="text-white">Modifier</div>
-    </Modal>
-  );
-};
-
-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' + message.id) === null) {
-        setShow(false);
-      }
-    };
-
-    document.addEventListener('click', handleClick);
-  }, [message.id]);
-
-  return (
-    <>
-      <div className="bg-grey-dark">
-        <div
-          className="popup-btn cursor-pointer rounded-full hover:bg-grey-light transition-all"
-          onClick={() => setShow(!show)}
-        >
-          <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-content space-y-2">
-          <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);
-              setShow(!show);
-            }}
-          >
-            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);
-              setShow(!show);
-            }}
-          >
-            Supprimer
-          </button>
-        </div>
-      </div>
-      <EditModal authorId={message.author.id} messageId={message.id} showEdit={showEdit} setShowEdit={setShowEdit} />
-      <DeleteModal
-        authorId={message.author.id}
-        messageId={message.id}
-        showDelete={showDelete}
-        setShowDelete={setShowDelete}
-      />
-    </>
-  );
-};
-
-export default PopupMessage;

client/src/components/Popups/DeleteMessage.tsx

@@ -0,0 +1,68 @@
+import { deleteMessage } from "@controllers/MessageController";
+import { useQueryClient } from "@tanstack/react-query";
+import { toast } from "react-toastify";
+import Modal from "../Modal";
+
+const DeleteMessage = ({
+  authorId,
+  messageId,
+  showDelete,
+  setShowDelete,
+}: {
+  authorId: string;
+  messageId: string;
+  showDelete: boolean;
+  setShowDelete: (showDelete: boolean) => void;
+}) => {
+  const queryClient = useQueryClient();
+
+  const handleDelete = async () => {
+    const response = await deleteMessage(messageId);
+    queryClient.invalidateQueries(['messages']);
+    setShowDelete(false);
+    if (response.error) {
+      toast.error(response.error, {
+        position: 'top-right',
+        autoClose: 5000,
+        hideProgressBar: false,
+        closeOnClick: true,
+        pauseOnHover: true,
+        draggable: true,
+        progress: undefined,
+      });
+    } else {
+      toast.success(response.message, {
+        position: 'top-right',
+        autoClose: 5000,
+        hideProgressBar: false,
+        closeOnClick: true,
+        pauseOnHover: true,
+        draggable: true,
+        progress: undefined,
+      });
+    }
+    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={handleDelete}
+        >
+          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>
+    </>
+  );
+};
+
+export default DeleteMessage;

client/src/components/Popups/EditMessage.tsx

@@ -0,0 +1,81 @@
+import Modal from '@components/Modal';
+import { useQueryClient } from '@tanstack/react-query';
+import { useState } from 'react';
+import { FaTimes } from 'react-icons/fa';
+import { editMessage } from '@controllers/MessageController';
+import { toast } from 'react-toastify';
+
+const EditMessage = ({
+  message,
+  showEdit,
+  setShowEdit,
+}: {
+  message: any;
+  showEdit: boolean;
+  setShowEdit: (showEdit: boolean) => void;
+}) => {
+  const [messageContent, setMessageContent] = useState(message.content);
+  const queryClient = useQueryClient();
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    const data = new FormData(e.target as HTMLFormElement);
+    const response = await editMessage(message.id, data);
+
+    if (response.error) {
+      toast.error(response.error, {
+        position: 'top-right',
+        autoClose: 5000,
+        hideProgressBar: false,
+        closeOnClick: true,
+        pauseOnHover: true,
+        draggable: true,
+        progress: undefined,
+      });
+      return;
+    }
+
+    toast.success('Message édité avec succès!', {
+      position: 'top-right',
+      autoClose: 5000,
+      hideProgressBar: false,
+      closeOnClick: true,
+      pauseOnHover: true,
+      draggable: true,
+      progress: undefined,
+    });
+    queryClient.invalidateQueries(['messages']);
+    setShowEdit(false);
+  };
+
+  return (
+    <Modal show={showEdit}>
+      <div className="title flex justify-between items-center border-b border-b-grey-light">
+        <div className="text-white mb-2">Modifier votre message</div>
+        <FaTimes
+          className="fill-grey-light hover:fill-grey-dark hover:bg-grey-light cursor-pointer transition-all text-xl w-10 h-10 p-2.5 rounded-md"
+          onClick={() => setShowEdit(!showEdit)}
+        />
+      </div>
+      <form onSubmit={handleSubmit} className="flex gap-2">
+        <input
+          type="text"
+          value={messageContent}
+          onChange={(e) => setMessageContent(e.target.value)}
+          placeholder="Message"
+          className="bg-grey-dark text-white rounded-xl p-2.5 w-full placeholder-red-light"
+          id="content"
+          name="content"
+        />
+        <button
+          type="submit"
+          className="rounded-md border border-red bg-red py-2 px-4 text-sm font-medium text-white hover:bg-white hover:text-red focus:outline-none focus:ring-2 focus:ring-red focus:ring-offset-2"
+        >
+          Envoyer
+        </button>
+      </form>
+    </Modal>
+  );
+};
+
+export default EditMessage;

client/src/controllers/MessageController.ts

@@ -14,18 +14,9 @@ const getMessages = async () => {
 
 const newMessage = async (data: FormData) => {
   const token = new Cookies().get('token');
-  let body;
-  if (data.get('image')) {
-    body = data;
-  } else {
-    body = JSON.stringify({
-      content: data.get('content'),
-    });
-  }
-
   const response = await fetch('/api/posts/new', {
     method: 'POST',
-    body,
+    body: data,
     mode: 'cors',
     headers: {
       Authorization: `Bearer ${token}`,
@@ -47,18 +38,10 @@ const deleteMessage = async (id: string) => {
 
 const editMessage = async (id: string, data: FormData) => {
   const token = new Cookies().get('token');
-  let body;
+  const response = await fetch(`/api/posts/edit/${id}`, {
-  if (data.get('image')) {
-    body = data;
-  } else {
-    body = JSON.stringify({
-      content: data.get('content'),
-    });
-  }
-
-  const response = await fetch(`/api/posts/${id}`, {
     method: 'PUT',
-    body,
+    body: data,
+    mode: 'cors',
     headers: {
       Authorization: `Bearer ${token}`,
     },