feat: batch delete messages

src/routes/chat/Layout/Operations.js

@@ -2,12 +2,16 @@ import { useState } from "react";
 import styled from "styled-components";
 import { useDispatch, useSelector } from "react-redux";
 import { useKey } from "rooks";
+import useDeleteMessage from "../../../common/hook/useDeleteMessage";
 import { updateSelectMessages } from "../../../app/slices/ui";
+import { useFavoriteMessageMutation } from "../../../app/services/message";
 import IconForward from "../../../assets/icons/forward.svg";
 import IconBookmark from "../../../assets/icons/bookmark.svg";
 import IconDelete from "../../../assets/icons/delete.svg";
 import IconClose from "../../../assets/icons/close.circle.svg";
 import ForwardModal from "../../../common/component/ForwardModal";
+import toast from "react-hot-toast";
+import DeleteMessageConfirmModal from "../../../common/component/DeleteMessageConfirm";
 const Styled = styled.div`
   position: relative;
   padding: 16px;
@@ -21,6 +25,9 @@ const Styled = styled.div`
     padding: 8px;
     background: #f2f4f7;
     border-radius: var(--br);
+    &:disabled svg path {
+      fill: #ccc;
+    }
   }
   .close {
     cursor: pointer;
@@ -31,6 +38,9 @@ const Styled = styled.div`
   }
 `;
 export default function Operations({ context, id }) {
+  const [deleteModalVisible, setDeleteModalVisible] = useState(false);
+  const { canDelete } = useDeleteMessage();
+  const [favoriteMsg] = useFavoriteMessageMutation();
   const mids = useSelector(
     (store) => store.ui.selectMessages[`${context}_${id}`]
   );
@@ -39,6 +49,18 @@ export default function Operations({ context, id }) {
   const handleClose = () => {
     dispatch(updateSelectMessages({ context, id, operation: "reset" }));
   };
+  const handleFav = async () => {
+    await favoriteMsg(mids);
+    dispatch(updateSelectMessages({ context, id, operation: "reset" }));
+    toast.success("Messages Saved!");
+  };
+  const toggleDeleteModal = (isSuccess = false) => {
+    setDeleteModalVisible((prev) => !prev);
+    if (isSuccess) {
+      dispatch(updateSelectMessages({ context, id, operation: "reset" }));
+      toast.success("Messages Deleted!");
+    }
+  };
   const toggleForwardModal = () => {
     setForwardModalVisible((prev) => !prev);
   };
@@ -46,16 +68,21 @@ export default function Operations({ context, id }) {
     console.log("Escape keypress", evt);
     dispatch(updateSelectMessages({ context, id, operation: "reset" }));
   });
+  const canDel = canDelete(mids);
   return (
     <>
       <Styled>
         <button className="opt" onClick={toggleForwardModal}>
           <IconForward />
         </button>
-        <button className="opt">
+        <button className="opt" onClick={handleFav}>
           <IconBookmark />
         </button>
-        <button className="opt">
+        <button
+          className="opt"
+          disabled={!canDel}
+          onClick={toggleDeleteModal.bind(null, false)}
+        >
           <IconDelete />
         </button>
         <IconClose className="close" onClick={handleClose} />
@@ -63,6 +90,9 @@ export default function Operations({ context, id }) {
       {forwardModalVisible && (
         <ForwardModal mids={mids} closeModal={toggleForwardModal} />
       )}
+      {deleteModalVisible && (
+        <DeleteMessageConfirmModal mids={mids} closeModal={toggleDeleteModal} />
+      )}
     </>
   );
 }