-
+
}
+ >
+
+
+
+
+ {currUser.name}
+
+
+ {timePrefix
+ ? `${timePrefix} ${dayjsTime.format("h:mm A")}`
+ : dayjsTime.format("YYYY-MM-DD h:mm:ss A")}
+
+
+
+
+ {reply_mid && }
+ {edit ? (
+
+ ) : (
+ renderContent({
+ context,
+ to: contextId,
+ from_uid: fromUid,
+ created_at: time,
+ content_type,
+ properties,
+ content,
+ thumbnail,
+ download,
+ edited,
+ })
+ )}
+ {reactions && }
+
-
-
-
- {currUser.name}
-
-
- {timePrefix
- ? `${timePrefix} ${dayjsTime.format("h:mm A")}`
- : dayjsTime.format("YYYY-MM-DD h:mm:ss A")}
-
-
-
-
- {reply_mid && }
- {edit ? (
-
- ) : (
- renderContent({
- context,
- to: contextId,
- from_uid: fromUid,
- created_at: time,
- content_type,
- properties,
- content,
- thumbnail,
- download,
- edited,
- })
- )}
- {reactions && }
-
-
- {!edit && !readOnly && (
-
- )}
-
+ {!edit && !readOnly && (
+
+ )}
+
+
);
}
export default React.memo(Message, (prevs, nexts) => {
diff --git a/src/common/component/Message/useMessageOperation.js b/src/common/component/Message/useMessageOperation.js
new file mode 100644
index 00000000..1d82dcd2
--- /dev/null
+++ b/src/common/component/Message/useMessageOperation.js
@@ -0,0 +1,101 @@
+import { useState, useEffect } from "react";
+import DeleteMessageConfirm from "../DeleteMessageConfirm";
+import ForwardModal from "../ForwardModal";
+import PinMessageModal from "./PinMessageModal";
+import { ContentTypes } from "../../../app/config";
+import { useSelector } from "react-redux";
+import useCopy from "../../hook/useCopy";
+import usePinMessage from "../../hook/usePinMessage";
+import toast from "react-hot-toast";
+
+export default function useMessageOperation({ mid, context, contextId }) {
+ const [copied, copy] = useCopy();
+ const { content_type, currUid, from_uid, content } = useSelector((store) => {
+ return {
+ content: store.message[mid]?.content,
+ from_uid: store.message[mid]?.from_uid,
+ content_type: store.message[mid]?.content_type,
+ currUid: store.authData.uid,
+ };
+ });
+ const { canPin, pins, unpinMessage, isUnpinSuccess } = usePinMessage(
+ context == "channel" ? contextId : undefined
+ );
+ const [mids, setMids] = useState([]);
+ const [pinModalVisible, setPinModalVisible] = useState(false);
+ const [deleteModalVisible, setDeleteModalVisible] = useState(false);
+ const [forwardModalVisible, setForwardModalVisible] = useState(false);
+
+ const toggleForwardModal = () => {
+ // hideAll();
+ setForwardModalVisible((prev) => !prev);
+ };
+ const toggleDeleteModal = () => {
+ // hideAll();
+ setDeleteModalVisible((prev) => !prev);
+ };
+ const togglePinModal = () => {
+ // hideAll();
+ setPinModalVisible((prev) => !prev);
+ };
+ const copyContent = () => {
+ copy(content);
+ };
+ useEffect(() => {
+ if (content_type == ContentTypes.archive) {
+ // forward message
+ const forwardEle = document.querySelector(
+ `[data-msg-mid='${mid}'] .down [data-forwarded-mids]`
+ );
+ if (forwardEle) {
+ const mids = forwardEle.dataset.forwardedMids.split(",");
+ setMids(mids);
+ }
+ } else {
+ setMids([mid]);
+ }
+ }, [mid, content_type]);
+ useEffect(() => {
+ if (isUnpinSuccess) {
+ toast.success("Unpin Message Successfully!");
+ }
+ }, [isUnpinSuccess]);
+ useEffect(() => {
+ if (copied) {
+ toast.success("Copied");
+ }
+ }, [copied]);
+ const enablePin = context == "channel" && canPin;
+ const enableReply = currUid != from_uid;
+
+ const enableEdit =
+ currUid == from_uid &&
+ [ContentTypes.text, ContentTypes.markdown].includes(content_type);
+ const canDelete = currUid == from_uid;
+ const canCopy = [ContentTypes.text, ContentTypes.markdown].includes(
+ content_type
+ );
+ return {
+ copyContent,
+ canCopy,
+ isMarkdown: content_type == ContentTypes.markdown,
+ canDelete,
+ canPin: context == "channel" && canPin,
+ pinned: enablePin ? pins.findIndex((p) => p.mid == mid) > -1 : false,
+ unPin: unpinMessage,
+ canReply: enableReply,
+ canEdit: enableEdit,
+ toggleDeleteModal,
+ toggleForwardModal,
+ togglePinModal,
+ DeleteModal: deleteModalVisible ? (
+
+ ) : null,
+ ForwardModal: forwardModalVisible ? (
+
+ ) : null,
+ PinModal: pinModalVisible ? (
+
+ ) : null,
+ };
+}
diff --git a/src/common/component/styled/Menu.js b/src/common/component/styled/Menu.js
index 4867d6f4..1e9abb5d 100644
--- a/src/common/component/styled/Menu.js
+++ b/src/common/component/styled/Menu.js
@@ -8,20 +8,35 @@ const StyledMenu = styled.ul`
box-shadow: 0px 20px 25px 20px rgba(31, 41, 55, 0.1),
0px 10px 10px rgba(31, 41, 55, 0.04);
border-radius: 12px;
+ min-width: 200px;
.item {
+ display: flex;
+ align-items: center;
+ gap: 14px;
white-space: nowrap;
cursor: pointer;
border-radius: 6px;
- padding: 6px 8px;
+ padding: 6px;
font-style: normal;
- font-weight: 500;
+ font-weight: 600;
font-size: 14px;
line-height: 20px;
color: #616161;
- /* transition: color 0.2s ease; */
+ .icon {
+ width: 20px;
+ height: 20px;
+ path {
+ fill: #475467;
+ }
+ }
&:hover {
background-color: #22ccee;
color: #fff;
+ .icon {
+ path {
+ fill: #fff;
+ }
+ }
}
&.underline {
border-bottom: 1px solid #e5e5e5;