refactor: context menu

src/common/component/ManageMembers.tsx

@@ -240,7 +240,7 @@ const ManageMembers: FC<Props> = ({ cid }) => {
                         )}
                         {canRemove && (
                           <li className="item danger" onClick={removeUser.bind(null, uid)}>
-                            Remove From Server
+                            Remove
                           </li>
                         )}
                       </StyledMenu>

src/common/component/User/ContextMenu.tsx

@@ -60,7 +60,7 @@ const UserContextMenu: FC<Props> = ({ enable = false, uid, cid, visible, hide, c
             },
             canRemove && {
               danger: true,
-              title: "Remove From Server",
+              title: "Remove",
               handler: removeUser
             }
           ]}

src/common/hook/useUserOperation.ts

@@ -53,8 +53,10 @@ const useUserOperation = ({ uid, cid }: IProps) => {
   const handleRemove = (id: number) => {
     const isNumber = !Number.isNaN(+id);
     const finalId = isNumber ? id || passedUid : passedUid;
-    removeUser(finalId);
-    hideAll();
+    if (finalId) {
+      removeUser(finalId);
+      hideAll();
+    }
   };
 
   const copyEmail = (email: string) => {
@@ -72,14 +74,16 @@ const useUserOperation = ({ uid, cid }: IProps) => {
     toast.success("Coming Soon...");
     hideAll();
   };
-  const isAdmin = loginUser?.is_admin;
+  const isAdmin = !!loginUser?.is_admin;
   const loginUid = loginUser?.uid;
+  const canDeleteChannel = cid && !channel?.is_public && isAdmin;
   const canRemoveFromChannel =
-    cid && !channel?.is_public && (isAdmin || channel?.owner == loginUid);
+    cid && !channel?.is_public && (isAdmin || channel?.owner == loginUid) && uid != channel?.owner;
   const canCall: boolean = agoraConfig.enabled && loginUid != uid;
   const canRemove: boolean = isAdmin && loginUid != uid && !cid;
 
   return {
+    canDeleteChannel,
     canRemove,
     removeUser: handleRemove,
     startChat,

src/routes/chat/SessionList/ContextMenu.tsx

@@ -1,11 +1,12 @@
 import Tippy from "@tippyjs/react";
-import { useDispatch, useSelector } from "react-redux";
+import { useDispatch } from "react-redux";
 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 useUserOperation from "../../../common/hook/useUserOperation";
+import { useAppSelector } from "../../../app/store";
 
 export default function SessionContextMenu({
   context = "user",
@@ -17,14 +18,17 @@ export default function SessionContextMenu({
   setInviteChannelId,
   children
 }) {
-  const { canCopyEmail, copyEmail } = useUserOperation({ uid: context == "user" ? id : null });
+  const { canCopyEmail, copyEmail, canDeleteChannel } = useUserOperation({
+    uid: context == "user" ? id : null,
+    cid: context == "channel" ? id : null
+  });
   const [muteChannel] = useUpdateMuteSettingMutation();
   const [updateReadIndex] = useReadMessageMutation();
   const pathMatched = useMatch(`/chat/dm/${id}`);
   const dispatch = useDispatch();
   const navigateTo = useNavigate();
   const { pathname } = useLocation();
-  const { channelMuted } = useSelector((store) => {
+  const { channelMuted } = useAppSelector((store) => {
     return {
       channelMuted: context == "channel" ? store.footprint.muteChannels[id] : false
     };
@@ -91,7 +95,7 @@ export default function SessionContextMenu({
             title: "Invite People",
             handler: setInviteChannelId.bind(null, id)
           },
-          {
+          canDeleteChannel && {
             title: "Delete Channel",
             danger: true,
             handler: deleteChannel.bind(null, id)