fix: conext menu items

src/common/component/ContextMenu.tsx

@@ -10,7 +10,7 @@ export interface Item {
 }
 
 interface Props {
-  items: (Item | boolean | undefined)[];
+  items: Item[];
   hideMenu?: () => void;
 }
 
@@ -18,7 +18,7 @@ const ContextMenu: FC<Props> = ({ items = [], hideMenu = null }) => {
   return (
     <StyledMenu>
       {items.map((item) => {
-        if (typeof item === "boolean" || !item) return null;
+        // if (!item) return null;
         const {
           title,
           icon = null,

src/common/component/Message/Commands.tsx

@@ -5,7 +5,7 @@ import Tippy from "@tippyjs/react";
 import { hideAll } from "tippy.js";
 import toast from "react-hot-toast";
 import { updateSelectMessages } from "../../../app/slices/ui";
-import ContextMenu from "../ContextMenu";
+import ContextMenu, { Item } from "../ContextMenu";
 import Tooltip from "../Tooltip";
 import useFavMessage from "../../hook/useFavMessage";
 import useSendMessage from "../../hook/useSendMessage";
@@ -166,30 +166,31 @@ const Commands: FC<Props> = ({ context = "user", contextId = 0, mid = 0, toggleE
           trigger="click"
           content={
             <ContextMenu
-              items={[
-                canPin && {
-                  title: pinned ? `Unpin Message` : `Pin Message`,
-                  icon: <IconPin className="icon" />,
-                  handler: pinned ? handleUnpin : togglePinModal
-                },
-                {
-                  title: "Forward",
-                  icon: <IconForward className="icon" />,
-                  handler: toggleForwardModal
-                },
-                {
-                  title: "Select",
-                  icon: <IconSelect className="icon" />,
-                  handler: handleSelect.bind(null, mid)
-                },
-
-                canDelete && {
-                  title: " Delete",
-                  danger: true,
-                  icon: <IconDelete className="icon" />,
-                  handler: toggleDeleteModal
-                }
-              ]}
+              items={
+                [
+                  canPin && {
+                    title: pinned ? `Unpin Message` : `Pin Message`,
+                    icon: <IconPin className="icon" />,
+                    handler: pinned ? handleUnpin : togglePinModal
+                  },
+                  {
+                    title: "Forward",
+                    icon: <IconForward className="icon" />,
+                    handler: toggleForwardModal
+                  },
+                  {
+                    title: "Select",
+                    icon: <IconSelect className="icon" />,
+                    handler: handleSelect.bind(null, mid)
+                  },
+                  canDelete && {
+                    title: " Delete",
+                    danger: true,
+                    icon: <IconDelete className="icon" />,
+                    handler: toggleDeleteModal
+                  }
+                ].filter(Boolean) as Item[]
+              }
             />
           }
         >

src/common/component/Message/ContextMenu.tsx

@@ -1,7 +1,7 @@
-import { FC, ReactElement, ReactNode } from "react";
+import { FC, ReactElement } from "react";
 import Tippy from "@tippyjs/react";
 import { useDispatch } from "react-redux";
-import ContextMenu from "../ContextMenu";
+import ContextMenu, { Item } from "../ContextMenu";
 import IconDelete from "../../../assets/icons/delete.svg";
 import IconEdit from "../../../assets/icons/edit.svg";
 import IconReply from "../../../assets/icons/reply.svg";
@@ -56,6 +56,44 @@ const MessageContextMenu: FC<Props> = ({
       setReplying(mid);
     }
   };
+  const items = [
+    canEdit && {
+      title: "Edit Message",
+      icon: <IconEdit className="icon" />,
+      handler: editMessage
+    },
+    canReply && {
+      title: "Reply",
+      icon: <IconReply className="icon" />,
+      handler: handleReply
+    },
+    canCopy && {
+      title: "Copy",
+      icon: <IconCopy className="icon" />,
+      handler: copyContent
+    },
+    canPin && {
+      title: pinned ? "Unpin" : "Pin",
+      icon: <IconPin className="icon" />,
+      handler: pinned ? unPin.bind(null, mid) : togglePinModal
+    },
+    {
+      title: "Forward",
+      icon: <IconForward className="icon" />,
+      handler: toggleForwardModal
+    },
+    {
+      title: "Select",
+      icon: <IconSelect className="icon" />,
+      handler: handleSelect
+    },
+    canDelete && {
+      title: "Delete",
+      danger: true,
+      icon: <IconDelete className="icon" />,
+      handler: toggleDeleteModal
+    }
+  ].filter((v) => typeof v !== "boolean" && "title" in v) as Item[];
   return (
     <>
       {ForwardModal}
@@ -69,49 +107,7 @@ const MessageContextMenu: FC<Props> = ({
         popperOptions={{ strategy: "fixed" }}
         onClickOutside={hide}
         key={mid}
-        content={
-          <ContextMenu
-            hideMenu={hide}
-            items={[
-              canEdit && {
-                title: "Edit Message",
-                icon: <IconEdit className="icon" />,
-                handler: editMessage
-              },
-              canReply && {
-                title: "Reply",
-                icon: <IconReply className="icon" />,
-                handler: handleReply
-              },
-              canCopy && {
-                title: "Copy",
-                icon: <IconCopy className="icon" />,
-                handler: copyContent
-              },
-              canPin && {
-                title: pinned ? "Unpin" : "Pin",
-                icon: <IconPin className="icon" />,
-                handler: pinned ? unPin.bind(null, mid) : togglePinModal
-              },
-              {
-                title: "Forward",
-                icon: <IconForward className="icon" />,
-                handler: toggleForwardModal
-              },
-              {
-                title: "Select",
-                icon: <IconSelect className="icon" />,
-                handler: handleSelect
-              },
-              canDelete && {
-                title: "Delete",
-                danger: true,
-                icon: <IconDelete className="icon" />,
-                handler: toggleDeleteModal
-              }
-            ]}
-          />
-        }
+        content={<ContextMenu hideMenu={hide} items={items} />}
       >
         {children}
       </Tippy>

src/common/component/Message/useMessageOperation.tsx

@@ -71,7 +71,7 @@ export default function useMessageOperation({ mid, context, contextId }: Params)
   // const enableReply = currUid != from_uid;
   const isImage =
     content_type == ContentTypes.file &&
-    properties?.content_type &&
+    !!properties?.content_type &&
     properties?.content_type.startsWith("image");
   const enableEdit =
     currUid == from_uid && [ContentTypes.text, ContentTypes.markdown].includes(content_type);

src/common/component/User/ContextMenu.tsx

@@ -1,7 +1,7 @@
 import { FC, ReactElement } from "react";
 import Tippy from "@tippyjs/react";
 import useUserOperation from "../../hook/useUserOperation";
-import ContextMenu from "../ContextMenu";
+import ContextMenu, { Item } from "../ContextMenu";
 
 interface Props {
   enable?: boolean;
@@ -40,30 +40,32 @@ const UserContextMenu: FC<Props> = ({ enable = false, uid, cid, visible, hide, c
       content={
         <ContextMenu
           hideMenu={hide}
-          items={[
-            {
-              title: "Message",
-              handler: startChat
-            },
-            canCall && {
-              title: "Call",
-              handler: call
-            },
-            canCopyEmail && {
-              title: "Copy Email",
-              handler: copyEmail
-            },
-            canRemoveFromChannel && {
-              danger: true,
-              title: "Remove From Channel",
-              handler: removeFromChannel
-            },
-            canRemove && {
-              danger: true,
-              title: "Remove",
-              handler: removeUser
-            }
-          ]}
+          items={
+            [
+              {
+                title: "Message",
+                handler: startChat
+              },
+              canCall && {
+                title: "Call",
+                handler: call
+              },
+              canCopyEmail && {
+                title: "Copy Email",
+                handler: copyEmail
+              },
+              canRemoveFromChannel && {
+                danger: true,
+                title: "Remove From Channel",
+                handler: removeFromChannel
+              },
+              canRemove && {
+                danger: true,
+                title: "Remove",
+                handler: removeUser
+              }
+            ].filter(Boolean) as Item[]
+          }
         />
       }
     >

src/routes/chat/SessionList/ContextMenu.tsx

@@ -5,7 +5,7 @@ import { useNavigate, useLocation, useMatch } from "react-router-dom";
 import { useUpdateMuteSettingMutation } from "../../../app/services/user";
 import { useReadMessageMutation } from "../../../app/services/message";
 import { removeUserSession } from "../../../app/slices/message.user";
-import ContextMenu from "../../../common/component/ContextMenu";
+import ContextMenu, { Item } from "../../../common/component/ContextMenu";
 import useUserOperation from "../../../common/hook/useUserOperation";
 import { useAppSelector } from "../../../app/store";
 type Props = {
@@ -119,7 +119,7 @@ const SessionContextMenu: FC<Props> = ({
       followCursor={"initial"}
       visible={visible}
       onClickOutside={hide}
-      content={<ContextMenu hideMenu={hide} items={items} />}
+      content={<ContextMenu hideMenu={hide} items={items.filter(Boolean) as Item[]} />}
     >
       {children}
     </Tippy>