fix: useContactOperation hook

src/common/component/ManageMembers.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { useEffect, FC } from "react";
 import styled from "styled-components";
 import Tippy from "@tippyjs/react";
 import { hideAll } from "tippy.js";
@@ -114,7 +114,11 @@ const StyledWrapper = styled.section`
     }
   }
 `;
-export default function ManageMembers({ cid = 0 }) {
+
+interface Props {
+  cid?: number;
+}
+const ManageMembers: FC<Props> = ({ cid }) => {
   const { contacts, channels, loginUser } = useAppSelector((store) => {
     return {
       contacts: store.contacts,
@@ -122,8 +126,7 @@ export default function ManageMembers({ cid = 0 }) {
       loginUser: store.authData.user
     };
   });
-  const { copyEmail, removeFromChannel, removeUser, canRemove, canRemoveFromChannel } =
-    useContactOperation({ cid });
+  const { copyEmail, removeFromChannel, removeUser } = useContactOperation({ cid });
   const [updateContact, { isSuccess: updateSuccess }] = useUpdateContactMutation();
 
   useEffect(() => {
@@ -155,6 +158,9 @@ export default function ManageMembers({ cid = 0 }) {
           const owner = channel && channel.owner == uid;
           const switchRoleVisible = loginUser.is_admin && loginUser.uid !== uid;
           const dotsVisible = email || loginUser?.is_admin;
+          const canRemove = loginUser?.is_admin && loginUser?.uid != uid;
+          const canRemoveFromChannel =
+            channel && channel.owner == loginUser?.uid && loginUser?.uid != uid;
           return (
             <li key={uid} className="member">
               <div className="left">
@@ -217,15 +223,12 @@ export default function ManageMembers({ cid = 0 }) {
                             Copy Email
                           </li>
                         )}
-                        {/* <li className="item underline">Mute</li> */}
-                        {/* <li className="item underline">Change Nickname</li> */}
-                        {/* <li className="item danger">Ban</li> */}
                         {canRemoveFromChannel && (
                           <li className="item danger" onClick={removeFromChannel.bind(null, uid)}>
                             Remove From Channel
                           </li>
                         )}
-                        {canRemove && !cid && (
+                        {canRemove && (
                           <li className="item danger" onClick={removeUser.bind(null, uid)}>
                             Remove From Server
                           </li>
@@ -245,4 +248,5 @@ export default function ManageMembers({ cid = 0 }) {
       </ul>
     </StyledWrapper>
   );
-}
+};
+export default ManageMembers;

src/common/component/Profile/index.tsx

@@ -11,12 +11,12 @@ import useContactOperation from "../../hook/useContactOperation";
 import { useAppSelector } from "../../../app/store";
 
 interface Props {
-  uid: number;
+  uid?: number;
   type: string;
   cid?: number;
 }
 
-const Profile: FC<Props> = ({ uid = null, type = "embed", cid = null }) => {
+const Profile: FC<Props> = ({ uid, type = "embed", cid }) => {
   const {
     canCall,
     call,
@@ -45,6 +45,8 @@ const Profile: FC<Props> = ({ uid = null, type = "embed", cid = null }) => {
   const enableCall = type == "card" && canCall;
   const canRemoveFromServer = type == "embed" && canRemove;
   const hasMore = enableCall || email || canRemoveFromChannel || canRemoveFromServer;
+  console.log("ccc", canRemove, cid, uid);
+
   return (
     <StyledWrapper className={type}>
       <Avatar className="avatar" url={avatar} name={name} />

src/common/hook/useContactOperation.ts

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, FC } from "react";
 import toast from "react-hot-toast";
 // import { ContentTypes } from "../../../app/config";
 import { useNavigate, useMatch } from "react-router-dom";
@@ -8,8 +8,11 @@ import { useLazyDeleteContactQuery } from "../../app/services/contact";
 import useConfig from "./useConfig";
 import useCopy from "./useCopy";
 import { useAppSelector } from "../../app/store";
-
-export default function useContactOperation({ uid, cid }: { uid: number; cid: number }) {
+interface Props {
+  uid?: number;
+  cid?: number;
+}
+const useContactOperation: FC<Props> = ({ uid, cid }) => {
   const [passedUid, setPassedUid] = useState(undefined);
   const { values: agoraConfig } = useConfig("agora");
   const isUserDetailPath = useMatch(`/contacts/${uid}`);
@@ -17,7 +20,7 @@ export default function useContactOperation({ uid, cid }: { uid: number; cid: nu
   const [removeInChannel, { isSuccess: removeSuccess }] = useRemoveMembersMutation();
   const navigateTo = useNavigate();
   const { copy } = useCopy();
-  const { user, channel, loginUser, isAdmin } = useAppSelector((store) => {
+  const { user, channel, loginUser } = useAppSelector((store) => {
     return {
       user: store.contacts.byId[uid],
       channel: store.channels.byId[cid],
@@ -67,6 +70,7 @@ export default function useContactOperation({ uid, cid }: { uid: number; cid: nu
     toast.success("Cooming Soon...");
     hideAll();
   };
+  const isAdmin = loginUser?.is_admin;
   const loginUid = loginUser?.uid;
   const canRemoveFromChannel =
     cid && !channel?.is_public && (isAdmin || channel?.owner == loginUid);
@@ -84,4 +88,5 @@ export default function useContactOperation({ uid, cid }: { uid: number; cid: nu
     canCall,
     call
   };
-}
+};
+export default useContactOperation;