feat: hide call option while agora disabled

src/common/component/CurrentUser.js

@@ -4,6 +4,7 @@ import { useSelector } from "react-redux";
 import soundIcon from "../../assets/icons/sound.on.svg?url";
 import micIcon from "../../assets/icons/mic.on.svg?url";
 import Avatar from "./Avatar";
+import useConfig from "../hook/useConfig";
 // import UserGuide from "./UserGuide";
 const StyledWrapper = styled.div`
   background-color: #f4f4f5;
@@ -60,6 +61,7 @@ const StyledWrapper = styled.div`
   }
 `;
 export default function CurrentUser() {
+  const { values: agoraConfig } = useConfig("agora");
   const currUser = useSelector((store) => {
     return store.contacts.byId[store.authData.uid];
   });
@@ -76,10 +78,12 @@ export default function CurrentUser() {
           <span className="id">#{uid}</span>
         </div>
       </div>
-      <div className="settings">
-        <img src={soundIcon} className="icon" alt="mic icon" />
-        <img src={micIcon} className="icon" alt="sound icon" />
-      </div>
+      {agoraConfig.enabled && (
+        <div className="settings">
+          <img src={soundIcon} className="icon" alt="mic icon" />
+          <img src={micIcon} className="icon" alt="sound icon" />
+        </div>
+      )}
     </StyledWrapper>
     // </UserGuide>
   );

src/common/component/Profile/index.js

@@ -56,7 +56,7 @@ export default function Profile({ uid = null, type = "embed", cid = null }) {
           </li>
         </NavLink>
         {/* <NavLink to={`#`}> */}
-        {type == "embed" && (
+        {enableCall && (
           <li className="icon call" onClick={call}>
             <IconCall />
             <span className="txt">Call</span>

src/common/hook/useConfig.js

@@ -0,0 +1,107 @@
+import { useEffect, useState } from "react";
+import { isObjectEqual } from "../utils";
+import toast from "react-hot-toast";
+import {
+  useGetAgoraConfigQuery,
+  useGetFirebaseConfigQuery,
+  useGetSMTPConfigQuery,
+  useGetLoginConfigQuery,
+  useUpdateLoginConfigMutation,
+  useUpdateSMTPConfigMutation,
+  useUpdateAgoraConfigMutation,
+  useUpdateFirebaseConfigMutation,
+} from "../../app/services/server";
+export default function useConfig(config = "smtp") {
+  const [changed, setChanged] = useState(false);
+  const [values, setValues] = useState({});
+  const { data: Login, refetch: refetchLogin } = useGetLoginConfigQuery();
+  const [
+    updateLoginConfig,
+    { isSuccess: LoginUpdated },
+  ] = useUpdateLoginConfigMutation();
+  const { data: SMTP, refetch: refetchSMTP } = useGetSMTPConfigQuery();
+  const [
+    updateSMTPConfig,
+    { isSuccess: SMTPUpdated },
+  ] = useUpdateSMTPConfigMutation();
+  const { data: Agora, refetch: refetchAgora } = useGetAgoraConfigQuery();
+  const [
+    updateAgoraConfig,
+    { isSuccess: AgoraUpdated },
+  ] = useUpdateAgoraConfigMutation();
+  const {
+    data: Firebase,
+    refetch: refetchFirebase,
+  } = useGetFirebaseConfigQuery();
+  const [
+    updateFirebaseConfig,
+    { isSuccess: FirebaseUpdated },
+  ] = useUpdateFirebaseConfigMutation();
+
+  const datas = {
+    login: Login,
+    smtp: SMTP,
+    agora: Agora,
+    firebase: Firebase,
+  };
+  const updateFns = {
+    login: updateLoginConfig,
+    smtp: updateSMTPConfig,
+    agora: updateAgoraConfig,
+    firebase: updateFirebaseConfig,
+  };
+  const refetchs = {
+    smtp: refetchSMTP,
+    agora: refetchAgora,
+    firebase: refetchFirebase,
+    login: refetchLogin,
+  };
+  const updateds = {
+    login: LoginUpdated,
+    smtp: SMTPUpdated,
+    agora: AgoraUpdated,
+    firebase: FirebaseUpdated,
+  };
+  const data = datas[config];
+  const updateConfig = updateFns[config];
+  const refetch = refetchs[config];
+  const updated = updateds[config];
+  const reset = () => {
+    setValues(data ?? {});
+  };
+
+  const toggleEnable = () => {
+    setValues((prev) => {
+      return { ...prev, enabled: !prev.enabled };
+    });
+  };
+  useEffect(() => {
+    if (updated) {
+      toast.success("Configuration Updated!");
+      refetch();
+    }
+  }, [updated]);
+  useEffect(() => {
+    console.log("wtf", data);
+    // if (data) {
+    setValues(data ?? {});
+    // }
+  }, [data]);
+  useEffect(() => {
+    // if (data && values) {
+    if (!isObjectEqual(data, values)) {
+      setChanged(true);
+    } else {
+      setChanged(false);
+    }
+    // }
+  }, [data, values]);
+  return {
+    reset,
+    changed,
+    updateConfig,
+    values,
+    setValues,
+    toggleEnable,
+  };
+}

src/common/hook/useContactOperation.js

@@ -6,10 +6,12 @@ import { useNavigate, useMatch } from "react-router-dom";
 import { hideAll } from "tippy.js";
 import { useRemoveMembersMutation } from "../../app/services/channel";
 import { useLazyDeleteContactQuery } from "../../app/services/contact";
+import useConfig from "./useConfig";
 import useCopy from "./useCopy";
 
 export default function useContactOperation({ uid, cid }) {
   const [passedUid, setPassedUid] = useState(undefined);
+  const { values: agoraConfig } = useConfig("agora");
   const isUserDetailPath = useMatch(`/contacts/${uid}`);
   const [
     removeUser,
@@ -68,7 +70,7 @@ export default function useContactOperation({ uid, cid }) {
   };
   const canRemoveFromChannel =
     cid && !channel?.is_public && (isAdmin || channel?.owner == loginUid);
-  const canCall = loginUid != uid;
+  const canCall = agoraConfig.enabled && loginUid != uid;
   const canRemove = isAdmin && loginUid != uid && !cid;
   return {
     canRemove,