feat: default firebase

src/common/hook/useConfig.ts

@@ -21,14 +21,14 @@ let originalValue: valuesOf<ConfigMap> | undefined = undefined;
 export default function useConfig(config: keyof ConfigMap = "smtp") {
   const [changed, setChanged] = useState(false);
   const [values, setValues] = useState<valuesOf<ConfigMap> | undefined>(undefined);
-  const [updateLoginConfig, { isSuccess: LoginUpdated }] = useUpdateLoginConfigMutation();
-  const [updateSMTPConfig, { isSuccess: SMTPUpdated }] = useUpdateSMTPConfigMutation();
+  const [updateLoginConfig, { isSuccess: LoginUpdated, isLoading: LoginUpdating }] = useUpdateLoginConfigMutation();
+  const [updateSMTPConfig, { isSuccess: SMTPUpdated, isLoading: SMTPUpdating }] = useUpdateSMTPConfigMutation();
+  const [updateAgoraConfig, { isSuccess: AgoraUpdated, isLoading: AgoraUpdating }] = useUpdateAgoraConfigMutation();
+  const [updateFirebaseConfig, { isSuccess: FirebaseUpdated, isLoading: FirebaseUpdating }] = useUpdateFirebaseConfigMutation();
   const [getAgoraConfig, { data: agoraConfig }] = useLazyGetAgoraConfigQuery();
-  const [updateAgoraConfig, { isSuccess: AgoraUpdated }] = useUpdateAgoraConfigMutation();
   const [getLoginConfig, { data: loginConfig }] = useLazyGetLoginConfigQuery();
   const [getSMTPConfig, { data: smtpConfig }] = useLazyGetSMTPConfigQuery();
   const [getFirebaseConfig, { data: firebaseConfig }] = useLazyGetFirebaseConfigQuery();
-  const [updateFirebaseConfig, { isSuccess: FirebaseUpdated }] = useUpdateFirebaseConfigMutation();
 
   const updateFns = {
     login: updateLoginConfig,
@@ -48,9 +48,16 @@ export default function useConfig(config: keyof ConfigMap = "smtp") {
     agora: AgoraUpdated,
     firebase: FirebaseUpdated
   };
+  const updatings = {
+    login: LoginUpdating,
+    smtp: SMTPUpdating,
+    agora: AgoraUpdating,
+    firebase: FirebaseUpdating
+  };
   const updateConfig = updateFns[config];
   const refetch = requests[config];
   const updated = updates[config];
+  const updating = updatings[config];
   const reset = () => {
     setValues(undefined);
   };
@@ -71,6 +78,7 @@ export default function useConfig(config: keyof ConfigMap = "smtp") {
   useEffect(() => {
     if (updated) {
       toast.success("Configuration Updated!");
+      // setChanged(false);
       refetch();
     }
   }, [updated]);
@@ -92,6 +100,8 @@ export default function useConfig(config: keyof ConfigMap = "smtp") {
   }, [values]);
 
   return {
+    updating,
+    updated,
     reset,
     changed,
     updateConfig,

src/i18n.ts

@@ -50,7 +50,7 @@ i18n
         ns: ["common", "chat", "member", "setting", "fav", "file", "welcome", "auth"],
         defaultNS,
         load: "languageOnly",
-        // lng: "en",
+        // lng: "zh",
         fallbackLng: 'en',
         fallbackNS: "common",
         debug: false,

src/routes/setting/config/Firebase.tsx

@@ -2,16 +2,36 @@ import { ChangeEvent } from "react";
 import StyledContainer from "./StyledContainer";
 import Input from "../../../common/component/styled/Input";
 import Textarea from "../../../common/component/styled/Textarea";
-import Toggle from "../../../common/component/styled/Toggle";
 import Label from "../../../common/component/styled/Label";
 import SaveTip from "../../../common/component/SaveTip";
 import useConfig from "../../../common/hook/useConfig";
+import StyledRadio from "../../../common/component/styled/Radio";
+
 import { FirebaseConfig } from "../../../types/server";
 import { useTranslation } from "react-i18next";
 
+interface IOptions {
+  disable: string,
+  official: string,
+  custom: string
+}
+const Options: IOptions = {
+  disable: "Disable",
+  official: "Use Official Configuration",
+  custom: "Custom"
+};
 export default function ConfigFirebase() {
+  const { values, setValues, updateConfig, changed, reset } = useConfig("firebase");
   const { t } = useTranslation("setting");
-  const { values, toggleEnable, updateConfig, setValues, reset, changed } = useConfig("firebase");
+  let select: keyof IOptions | "" = "";
+  if (values) {
+    const {
+      use_official,
+      enabled = false
+    } = values as FirebaseConfig;
+    select = enabled ? (use_official ? "official" : "custom") : "disable";
+
+  }
   const handleUpdate = () => {
     // const { token_url, description } = values;
     updateConfig(values);
@@ -24,25 +44,51 @@ export default function ConfigFirebase() {
       return { ...prev, [type]: newValue };
     });
   };
+  const handleChangeSelect = (v: keyof IOptions) => {
+    let tmp = null;
+    switch (v) {
+      case "custom": {
+        tmp = { ...values, enabled: true, use_official: false, };
+      }
+        break;
+      case "official": {
+        tmp = { ...values, enabled: true, use_official: true };
+      }
+        break;
+      case "disable": {
+        tmp = { ...values, enabled: false };
+      }
+        break;
+      default:
+        break;
+    }
+    if (tmp) {
+      setValues(tmp);
+    }
+  };
+  const handleReset = () => {
+    reset();
+  };
+
   if (!values) return null;
   const {
     token_url,
     project_id,
     private_key,
     client_email,
-    enabled = false
   } = values as FirebaseConfig;
   return (
     <StyledContainer>
-      <div className="inputs">
-        <div className="input row">
-          <Label>{t("firebase.enable")}</Label>
-          <Toggle onClick={toggleEnable} data-checked={enabled}></Toggle>
-        </div>
+      <StyledRadio
+        options={Object.values(Options)}
+        values={Object.keys(Options)}
+        value={select}
+        onChange={handleChangeSelect}
+      />
+      {<fieldset className="inputs" disabled={select !== "custom"}>
         <div className="input">
           <Label htmlFor="name">{t("firebase.token_url")}</Label>
           <Input
-            disabled={!enabled}
             data-type="token_url"
             onChange={handleChange}
             value={token_url}
@@ -53,7 +99,6 @@ export default function ConfigFirebase() {
         <div className="input">
           <Label htmlFor="desc">{t("firebase.project_id")}</Label>
           <Input
-            disabled={!enabled}
             data-type="project_id"
             onChange={handleChange}
             value={project_id}
@@ -66,7 +111,6 @@ export default function ConfigFirebase() {
           <Textarea
             rows={10}
             spellCheck={false}
-            disabled={!enabled}
             data-type="private_key"
             onChange={handleChange}
             value={private_key}
@@ -77,7 +121,6 @@ export default function ConfigFirebase() {
         <div className="input">
           <Label htmlFor="desc">{t("firebase.client_email")}</Label>
           <Input
-            disabled={!enabled}
             data-type="client_email"
             onChange={handleChange}
             value={client_email}
@@ -85,9 +128,9 @@ export default function ConfigFirebase() {
             placeholder={t("firebase.client_email")}
           />
         </div>
-      </div>
-      {changed && <SaveTip saveHandler={handleUpdate} resetHandler={reset} />}
-      {/* <button onClick={handleUpdate} className="btn">update</button> */}
+      </fieldset>
+      }
+      {changed && <SaveTip saveHandler={handleUpdate} resetHandler={handleReset} />}
     </StyledContainer>
   );
 }

src/types/server.ts

@@ -10,6 +10,7 @@ export interface GithubAuthConfig {
   client_secret?: string;
 }
 export interface FirebaseConfig {
+  use_official: boolean;
   enabled: boolean;
   token_url: string;
   project_id: string;