create toast methods

client/src/components/Popups/DeleteMessage.tsx

@@ -1,7 +1,7 @@
 import { deleteMessage } from "@controllers/MessageController";
 import { useQueryClient } from "@tanstack/react-query";
-import { toast } from "react-toastify";
 import Modal from "../Modal";
+import { toastError, toastSuccess } from "@controllers/Toasts";
 
 const DeleteMessage = ({
   authorId,
@@ -21,25 +21,9 @@ const DeleteMessage = ({
     queryClient.invalidateQueries(['messages']);
     setShowDelete(false);
     if (response.error) {
-      toast.error(response.error, {
+      toastError(response.error);
-        position: 'top-right',
-        autoClose: 5000,
-        hideProgressBar: false,
-        closeOnClick: true,
-        pauseOnHover: true,
-        draggable: true,
-        progress: undefined,
-      });
     } else {
-      toast.success(response.message, {
+      toastSuccess(response.message);
-        position: 'top-right',
-        autoClose: 5000,
-        hideProgressBar: false,
-        closeOnClick: true,
-        pauseOnHover: true,
-        draggable: true,
-        progress: undefined,
-      });
     }
     setShowDelete(false);
   };

client/src/components/Popups/EditMessage.tsx

@@ -3,7 +3,7 @@ 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';
+import { toastSuccess, toastError } from '@controllers/Toasts';
 
 const EditMessage = ({
   message,
@@ -23,27 +23,11 @@ const EditMessage = ({
     const response = await editMessage(message.id, data);
 
     if (response.error) {
-      toast.error(response.error, {
+      toastError(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 !', {
+    toastSuccess('Message edité avec succès');
-      position: 'top-right',
-      autoClose: 5000,
-      hideProgressBar: false,
-      closeOnClick: true,
-      pauseOnHover: true,
-      draggable: true,
-      progress: undefined,
-    });
     queryClient.invalidateQueries(['messages']);
     setShowEdit(false);
   };

client/src/components/Toasts/ToastError.tsx

@@ -1,14 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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/Toasts.ts

@@ -0,0 +1,27 @@
+import { toast } from "react-toastify";
+
+const toastSuccess = (message: string) => {
+  toast.success(message, {
+    position: 'top-right',
+    autoClose: 5000,
+    hideProgressBar: false,
+    closeOnClick: true,
+    pauseOnHover: true,
+    draggable: true,
+    progress: undefined,
+  });
+}
+
+const toastError = (message: string) => {
+  toast.error(message, {
+    position: 'top-right',
+    autoClose: 5000,
+    hideProgressBar: false,
+    closeOnClick: true,
+    pauseOnHover: true,
+    draggable: true,
+    progress: undefined,
+  });
+}
+
+export { toastSuccess, toastError };