refactor: useContactOperation

src/common/component/FileMessage/Image.js

@@ -6,10 +6,6 @@ const Styled = styled.div`
   position: relative;
   width: fit-content;
   height: fit-content;
-  /* min-height: 240px;
-  max-height: 480px;
-  min-width: 240px;
-  max-width: 480px; */
   img {
     object-fit: cover;
   }
@@ -26,17 +22,6 @@ const Styled = styled.div`
     .progress {
       width: 15px;
       height: 15px;
-      /* svg {
-        .CircularProgressbar-background {
-          fill: transparent;
-        }
-        .CircularProgressbar-trail {
-          stroke: #000;
-        }
-        .CircularProgressbar-path {
-          stroke: #000;
-        }
-      } */
       .CircularProgressbar-path {
         stroke: #444;
       }

src/common/component/ManageMembers.js

@@ -5,12 +5,7 @@ import Tippy from "@tippyjs/react";
 import { hideAll } from "tippy.js";
 import { useSelector } from "react-redux";
 import toast from "react-hot-toast";
-import useCopy from "../hook/useCopy";
-import {
-  useLazyDeleteContactQuery,
-  useUpdateContactMutation,
-} from "../../app/services/contact";
-import { useRemoveMembersMutation } from "../../app/services/channel";
+import { useUpdateContactMutation } from "../../app/services/contact";
 import Contact from "./Contact";
 import StyledMenu from "./styled/Menu";
 import InviteLink from "./InviteLink";
@@ -18,6 +13,7 @@ import moreIcon from "../../assets/icons/more.svg?url";
 import IconOwner from "../../assets/icons/owner.svg";
 import IconArrowDown from "../../assets/icons/arrow.down.mini.svg";
 import IconCheck from "../../assets/icons/check.sign.svg";
+import useContactOperation from "../hook/useContactOperation";
 const StyledWrapper = styled.section`
   display: flex;
   flex-direction: column;
@@ -107,7 +103,6 @@ const StyledWrapper = styled.section`
           position: relative;
           width: 24px;
           height: 24px;
-
           .dots {
             cursor: pointer;
           }
@@ -127,42 +122,24 @@ export default function ManageMembers({ cid = null }) {
       loginUser: store.contacts.byId[store.authData.uid],
     };
   });
-  const { copy } = useCopy();
+  const {
+    copyEmail,
+    removeFromChannel,
+    removeUser,
+    canRemove,
+    canRemoveFromChannel,
+  } = useContactOperation({ cid });
   const [
     updateContact,
     { isSuccess: updateSuccess },
   ] = useUpdateContactMutation();
-  const [
-    removeUser,
-    { isSuccess: removeSuccess },
-  ] = useLazyDeleteContactQuery();
-  const [
-    removeMemberFromChannel,
-    { isSuccess: removeMemberSuccess },
-  ] = useRemoveMembersMutation();
-  const remove = cid ? removeMemberFromChannel : removeUser;
-  const handleRemoveUser = (uid) => {
-    remove(cid ? { id: cid, members: [+uid] } : uid);
-  };
-  useEffect(() => {
-    if (removeSuccess) {
-      toast.success("Delete Successfully");
-    }
-  }, [removeSuccess]);
-  useEffect(() => {
-    if (removeMemberSuccess) {
-      toast.success("Remove Member successfully");
-    }
-  }, [removeMemberSuccess]);
+
   useEffect(() => {
     if (updateSuccess) {
       toast.success("Update Successfully");
     }
   }, [updateSuccess]);
-  const handleCopy = (str) => {
-    copy(str);
-    hideAll();
-  };
+
   const handleToggleRole = ({ ignore = false, uid = null, isAdmin = true }) => {
     hideAll();
     if (ignore) return;
@@ -251,7 +228,7 @@ export default function ManageMembers({ cid = null }) {
                         {email && (
                           <li
                             className="item"
-                            onClick={handleCopy.bind(null, email)}
+                            onClick={copyEmail.bind(null, email)}
                           >
                             Copy Email
                           </li>
@@ -259,12 +236,20 @@ export default function ManageMembers({ cid = null }) {
                         {/* <li className="item underline">Mute</li> */}
                         {/* <li className="item underline">Change Nickname</li> */}
                         {/* <li className="item danger">Ban</li> */}
-                        {loginUser?.is_admin && (
+                        {canRemoveFromChannel && (
                           <li
                             className="item danger"
-                            onClick={handleRemoveUser.bind(null, uid)}
+                            onClick={removeFromChannel.bind(null, uid)}
                           >
-                            Remove
+                            Remove From Channel
+                          </li>
+                        )}
+                        {canRemove && !cid && (
+                          <li
+                            className="item danger"
+                            onClick={removeUser.bind(null, uid)}
+                          >
+                            Remove From Server
                           </li>
                         )}
                       </StyledMenu>

src/common/hook/useContactOperation.js

@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { useState, useEffect } from "react";
 import toast from "react-hot-toast";
 // import { ContentTypes } from "../../../app/config";
 import { useSelector } from "react-redux";
@@ -9,12 +9,14 @@ import { useLazyDeleteContactQuery } from "../../app/services/contact";
 import useCopy from "./useCopy";
 
 export default function useContactOperation({ uid, cid }) {
+  const [passedUid, setPassedUid] = useState(undefined);
+
   const [
     removeUser,
     { isSuccess: removeUserSuccess },
   ] = useLazyDeleteContactQuery();
   const [
-    removeFromChannel,
+    removeInChannel,
     { isSuccess: removeSuccess },
   ] = useRemoveMembersMutation();
   const navigateTo = useNavigate();
@@ -27,6 +29,10 @@ export default function useContactOperation({ uid, cid }) {
       isAdmin: store.contacts.byId[store.authData.uid]?.is_admin,
     };
   });
+  useEffect(() => {
+    setPassedUid(uid ?? loginUid);
+  }, [uid, loginUid]);
+
   useEffect(() => {
     if (removeSuccess || removeUserSuccess) {
       toast.success("Remove Successfully");
@@ -35,16 +41,22 @@ export default function useContactOperation({ uid, cid }) {
       }
     }
   }, [removeSuccess, removeUserSuccess]);
-  const handleRemoveFromChannel = () => {
-    removeFromChannel({ id: +cid, members: [+uid] });
+  const handleRemoveFromChannel = (id) => {
+    const isNumber = !Number.isNaN(+id);
+    const finalId = isNumber ? id || passedUid : passedUid;
+    removeInChannel({ id: +cid, members: [+finalId] });
     hideAll();
   };
-  const handleRemove = () => {
-    removeUser(uid);
+  const handleRemove = (id) => {
+    const isNumber = !Number.isNaN(+id);
+    const finalId = isNumber ? id || passedUid : passedUid;
+    removeUser(finalId);
     hideAll();
   };
-  const copyEmail = () => {
-    copy(user?.email);
+  const copyEmail = (email) => {
+    const isString = typeof email == "string";
+    const finalEmail = isString ? email || user?.email : user?.email;
+    copy(finalEmail);
     hideAll();
   };
   const startChat = () => {
@@ -55,10 +67,7 @@ export default function useContactOperation({ uid, cid }) {
     hideAll();
   };
   const canRemoveFromChannel =
-    cid &&
-    !channel?.is_public &&
-    (isAdmin || channel?.owner == loginUid) &&
-    channel?.owner != uid;
+    cid && !channel?.is_public && (isAdmin || channel?.owner == loginUid);
   const canCall = loginUid != uid;
   const canRemove = isAdmin && loginUid != uid;
   return {