Tristan Yang
91 lines
3.1 KiB
TypeScript
91 lines
3.1 KiB
TypeScript
import { FC, useState } from "react";
|
|
import toast from "react-hot-toast";
|
|
import { useKey } from "rooks";
|
|
|
|
import { updateSelectMessages } from "@/app/slices/ui";
|
|
import { useAppDispatch, useAppSelector } from "@/app/store";
|
|
import { ChatContext } from "@/types/common";
|
|
import DeleteMessageConfirmModal from "@/components/DeleteMessageConfirm";
|
|
import ForwardModal from "@/components/ForwardModal";
|
|
import useDeleteMessage from "@/hooks/useDeleteMessage";
|
|
import useFavMessage from "@/hooks/useFavMessage";
|
|
import IconBookmark from "@/assets/icons/bookmark.svg";
|
|
import IconClose from "@/assets/icons/close.circle.svg";
|
|
import IconDelete from "@/assets/icons/delete.svg";
|
|
import IconForward from "@/assets/icons/forward.svg";
|
|
import { shallowEqual } from "react-redux";
|
|
|
|
type Props = {
|
|
context: ChatContext;
|
|
id: number;
|
|
};
|
|
const Operations: FC<Props> = ({ context, id }) => {
|
|
const [deleteModalVisible, setDeleteModalVisible] = useState(false);
|
|
const { canDelete } = useDeleteMessage();
|
|
const { addFavorite } = useFavMessage({});
|
|
const mids = useAppSelector((store) => store.ui.selectMessages[`${context}_${id}`], shallowEqual);
|
|
const [forwardModalVisible, setForwardModalVisible] = useState(false);
|
|
const dispatch = useAppDispatch();
|
|
|
|
const handleClose = () => {
|
|
dispatch(updateSelectMessages({ context, id, operation: "reset" }));
|
|
};
|
|
|
|
const handleFav = async () => {
|
|
const added = await addFavorite(mids);
|
|
if (added) {
|
|
dispatch(updateSelectMessages({ context, id, operation: "reset" }));
|
|
toast.success("Messages Saved!");
|
|
} else {
|
|
toast.error("Operation Failed!");
|
|
}
|
|
};
|
|
|
|
const toggleDeleteModal = (isSuccess = false) => {
|
|
setDeleteModalVisible((prev) => !prev);
|
|
if (isSuccess) {
|
|
dispatch(updateSelectMessages({ context, id, operation: "reset" }));
|
|
toast.success("Messages Deleted!");
|
|
}
|
|
};
|
|
|
|
const toggleForwardModal = () => {
|
|
setForwardModalVisible((prev) => !prev);
|
|
};
|
|
|
|
useKey("Escape", () => {
|
|
dispatch(updateSelectMessages({ context, id, operation: "reset" }));
|
|
});
|
|
const canDel = canDelete(mids);
|
|
|
|
const optClass = `p-2 bg-slate-100 dark:bg-slate-800 rounded md:hover:bg-slate-300 dark:md:hover:bg-slate-900`;
|
|
return (
|
|
<>
|
|
<div className="relative p-4 flex-center gap-8 shadow-md">
|
|
<button className={optClass} onClick={toggleForwardModal}>
|
|
<IconForward />
|
|
</button>
|
|
<button className={optClass} onClick={handleFav}>
|
|
<IconBookmark />
|
|
</button>
|
|
<button
|
|
className={`${optClass} disabled:opacity-50 disabled:cursor-not-allowed`}
|
|
disabled={!canDel}
|
|
onClick={toggleDeleteModal.bind(null, false)}
|
|
>
|
|
<IconDelete />
|
|
</button>
|
|
<IconClose
|
|
className="cursor-pointer absolute right-5 top-1/2 -translate-y-1/2"
|
|
onClick={handleClose}
|
|
/>
|
|
</div>
|
|
{forwardModalVisible && <ForwardModal mids={mids} closeModal={toggleForwardModal} />}
|
|
{deleteModalVisible && (
|
|
<DeleteMessageConfirmModal mids={mids} closeModal={toggleDeleteModal} />
|
|
)}
|
|
</>
|
|
);
|
|
};
|
|
export default Operations;
|