add toast notification and fix postion of element. Implement popup

client/package.json

@@ -16,7 +16,8 @@
     "react-cookie": "^4.1.1",
     "react-dom": "^18.2.0",
     "react-icons": "^4.4.0",
-    "react-router-dom": "^6.3.0"
+    "react-router-dom": "^6.3.0",
+    "react-toastify": "^9.0.8"
   },
   "devDependencies": {
     "@types/gravatar": "^1.8.3",

client/pnpm-lock.yaml

@@ -15,6 +15,7 @@ specifiers:
   react-dom: ^18.2.0
   react-icons: ^4.4.0
   react-router-dom: ^6.3.0
+  react-toastify: ^9.0.8
   sass: ^1.54.8
   tailwindcss: ^3.1.8
   typescript: ^4.6.4
@@ -29,6 +30,7 @@ dependencies:
   react-dom: 18.2.0_react@18.2.0
   react-icons: 4.4.0_react@18.2.0
   react-router-dom: 6.3.0_biqbaboplfbrettd7655fr4n2y
+  react-toastify: 9.0.8_biqbaboplfbrettd7655fr4n2y
 
 devDependencies:
   '@types/gravatar': 1.8.3
@@ -604,6 +606,11 @@ packages:
       wrap-ansi: 6.2.0
     dev: false
 
+  /clsx/1.2.1:
+    resolution: {integrity: sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==}
+    engines: {node: '>=6'}
+    dev: false
+
   /color-convert/1.9.3:
     resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
     dependencies:
@@ -1343,6 +1350,17 @@ packages:
       react: 18.2.0
     dev: false
 
+  /react-toastify/9.0.8_biqbaboplfbrettd7655fr4n2y:
+    resolution: {integrity: sha512-EwM+teWt49HSHx+67qI08yLAW1zAsBxCXLCsUfxHYv1W7/R3ZLhrqKalh7j+kjgPna1h5LQMSMwns4tB4ww2yQ==}
+    peerDependencies:
+      react: '>=16'
+      react-dom: '>=16'
+    dependencies:
+      clsx: 1.2.1
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+    dev: false
+
   /react/18.2.0:
     resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==}
     engines: {node: '>=0.10.0'}

client/src/components/MessageWrapper.tsx

@@ -26,7 +26,7 @@ const MessageWrapper = () => {
   });
 
   return (
-    <main className="messages-wrapper flex flex-col p-4 gap-4 overflow-scroll w-full max-w-3xl">
+    <main className="messages-wrapper flex flex-col gap-4 pb-6 pt-4 -mb-4 overflow-scroll w-full max-w-3xl rounded-md">
       {messages.isLoading ? '' : messages.data?.map((message: any) => (
         <Message message={message} key={message.id}/>
       ))}

client/src/components/NewMessage.tsx

@@ -51,7 +51,7 @@ const NewMessage = () => {
   };
 
   return (
-    <footer className="new-message bg-grey-dark rounded-xl w-full max-w-3xl p-3 gap-5 shadow-md shadow-grey-dark -mt-2">
+    <footer className="new-message bg-grey-dark rounded-xl w-full max-w-3xl p-3 gap-5 shadow-md shadow-grey-dark z-10">
       <form onSubmit={handleSubmit} className="flex gap-2">
         <div className="file">
           <label htmlFor="image" className="cursor-pointer block p-2">

client/src/components/PopupMessage.tsx

@@ -3,6 +3,7 @@ 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,
@@ -16,37 +17,53 @@ const DeleteModal = ({
   setShowDelete: (showDelete: boolean) => void;
 }) => {
   const queryClient = useQueryClient();
-  
+
   const handleDelete = async () => {
-    try {
+    const response = await deleteMessage(messageId);
-      const response = await deleteMessage(messageId);
+    queryClient.invalidateQueries(['messages']);
-      if (response.status === 200) {
+    setShowDelete(false);
-        console.log(await response.json());
+    if (response.error) {
-        queryClient.invalidateQueries(['messages']);
+      toast.error(response.error, {
-        setShowDelete(false);
+        position: 'top-right',
-      }
+        autoClose: 5000,
-    } catch (error) {
+        hideProgressBar: false,
-      console.error(error);
+        closeOnClick: true,
-      setShowDelete(false);
+        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>
+      <Modal show={showDelete}>
-      <button
+        <div className="text-white mb-2">Voulez vous vraiment supprimer ce message ?</div>
-        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"
+        <button
-        onClick={handleDelete}
+          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>
+          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"
+        <button
-        onClick={() => setShowDelete(!showDelete)}
+          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>
+          Annuler
-    </Modal>
+        </button>
+      </Modal>
+    </>
   );
 };
 
@@ -121,7 +138,12 @@ const PopupMessage = ({ message }: { message: any }) => {
         </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} />
+      <DeleteModal
+        authorId={message.author.id}
+        messageId={message.id}
+        showDelete={showDelete}
+        setShowDelete={setShowDelete}
+      />
     </>
   );
 };

client/src/components/Toasts/ToastError.tsx

@@ -0,0 +1,14 @@
+import { FaTimes } from "react-icons/fa";
+
+const ToastError = ({ message }: { message: string }) => {
+  return (
+    <div className="toast toast-error fixed top-18 right-8 z-1000">
+      <div className="toast__icon">
+        <FaTimes />
+      </div>
+      <div className="toast__message">{message}</div>
+    </div>
+  );
+};
+
+export default ToastError;

client/src/components/Toasts/ToastSuccess.tsx

@@ -0,0 +1,14 @@
+import { FaCheckCircle } from "react-icons/fa";
+
+const ToastSuccess = ({ message }: { message: string }) => {
+  return (
+    <div className="toast toast-success fixed top-4 right-4">
+      <div className="toast__icon">
+        <FaCheckCircle />
+      </div>
+      <div className="toast__message">{message}</div>
+    </div>
+  );
+};
+
+export default ToastSuccess;

client/src/controllers/MessageController.ts

@@ -1,12 +1,12 @@
-import { Cookies } from "react-cookie";
+import { Cookies } from 'react-cookie';
 
 const getMessages = async () => {
   const token = new Cookies().get('token');
   const response = await fetch('/api/posts', {
     method: 'GET',
     headers: {
-      'Authorization': `Bearer ${token}`
+      Authorization: `Bearer ${token}`,
-    }
+    },
   });
   const data = await response.json();
   return data;
@@ -19,7 +19,7 @@ const newMessage = async (data: FormData) => {
     body = data;
   } else {
     body = JSON.stringify({
-      content: data.get('content')
+      content: data.get('content'),
     });
   }
 
@@ -28,7 +28,7 @@ const newMessage = async (data: FormData) => {
     body,
     mode: 'cors',
     headers: {
-      'Authorization': `Bearer ${token}`
+      Authorization: `Bearer ${token}`,
     },
   });
   return response.json();
@@ -36,12 +36,13 @@ const newMessage = async (data: FormData) => {
 
 const deleteMessage = async (id: string) => {
   const token = new Cookies().get('token');
-  return fetch(`/api/posts/delete/${id}`, {
+  const response = await fetch(`/api/posts/delete/${id}`, {
     method: 'DELETE',
     headers: {
-      'Authorization': `Bearer ${token}`
+      Authorization: `Bearer ${token}`,
     },
   });
+  return response.json();
 };
 
 const editMessage = async (id: string, data: FormData) => {
@@ -51,7 +52,7 @@ const editMessage = async (id: string, data: FormData) => {
     body = data;
   } else {
     body = JSON.stringify({
-      content: data.get('content')
+      content: data.get('content'),
     });
   }
 
@@ -59,10 +60,10 @@ const editMessage = async (id: string, data: FormData) => {
     method: 'PUT',
     body,
     headers: {
-      'Authorization': `Bearer ${token}`
+      Authorization: `Bearer ${token}`,
     },
   });
   return response.json();
 };
 
-export { getMessages, newMessage, deleteMessage, editMessage };
+export { getMessages, newMessage, deleteMessage, editMessage };

client/src/routes/home.tsx

@@ -1,6 +1,8 @@
 import AppHeader from '@components/AppHeader';
 import MessageWrapper from '@components/MessageWrapper';
 import NewMessage from '@components/NewMessage';
+import { ToastContainer } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
 
 const Home = () => {
   return (
@@ -8,6 +10,7 @@ const Home = () => {
       <AppHeader />
       <MessageWrapper />
       <NewMessage />
+      <ToastContainer />
     </div>
   );
 };

src/api/posts/deletePost.ts

@@ -6,7 +6,7 @@ export default async (req: Request, res: Response) => {
     const id = parseInt(req.params.id);
     const deletedPost = await deletePost(id, req.userId);
     if (deletedPost instanceof Error) {
-      return res.status(403).send(deletedPost.message);
+      return res.status(403).send({error: deletedPost.message});
     }
     return res.status(200).send({ message: 'Post deleted' });
   } catch (error) {