sync then reload setting

src/hooks/Setting.js

@@ -7,10 +7,11 @@ import { createContext, useCallback, useContext } from "react";
 const SettingContext = createContext({
   setting: null,
   updateSetting: async () => {},
+  reloadSetting: async () => {},
 });
 
 export function SettingProvider({ children }) {
-  const { data, update } = useStorage(STOKEY_SETTING, DEFAULT_SETTING);
+  const { data, update, reload } = useStorage(STOKEY_SETTING, DEFAULT_SETTING);
   const {
     sync: { settingUpdateAt },
     updateSync,
@@ -31,6 +32,7 @@ export function SettingProvider({ children }) {
       value={{
         setting: data,
         updateSetting,
+        reloadSetting: reload,
       }}
     >
       {children}

src/hooks/Storage.js

@@ -25,16 +25,20 @@ export function useStorage(key, defaultVal = null) {
     await storage.del(key);
   }, [key]);
 
-  useEffect(() => {
-    (async () => {
+  const reload = useCallback(async () => {
     const val = await storage.getObj(key);
     if (val) {
       setData(val);
     } else if (defaultVal) {
       await storage.setObj(key, defaultVal);
     }
-    })();
   }, [key, defaultVal]);
 
-  return { data, save, update, remove };
+  useEffect(() => {
+    (async () => {
+      await reload();
+    })();
+  }, [reload]);
+
+  return { data, save, update, remove, reload };
 }

src/libs/sync.js

@@ -43,6 +43,7 @@ const syncSetting = async (isBg = false) => {
       settingSyncAt: res.updateAt,
     });
     await setSetting(res.value);
+    return res.value;
   } else {
     await updateSync({ settingSyncAt: res.updateAt });
   }
@@ -50,7 +51,7 @@ const syncSetting = async (isBg = false) => {
 
 export const trySyncSetting = async (isBg = false) => {
   try {
-    await syncSetting(isBg);
+    return await syncSetting(isBg);
   } catch (err) {
     console.log("[sync setting]", err);
   }
@@ -84,6 +85,7 @@ const syncRules = async (isBg = false) => {
       rulesSyncAt: res.updateAt,
     });
     await setRules(res.value);
+    return res.value;
   } else {
     await updateSync({ rulesSyncAt: res.updateAt });
   }
@@ -91,7 +93,7 @@ const syncRules = async (isBg = false) => {
 
 export const trySyncRules = async (isBg = false) => {
   try {
-    await syncRules(isBg);
+    return await syncRules(isBg);
   } catch (err) {
     console.log("[sync user rules]", err);
   }
@@ -118,11 +120,9 @@ export const syncShareRules = async ({ rules, syncUrl, syncKey }) => {
  * @returns
  */
 export const syncSettingAndRules = async (isBg = false) => {
-  await syncSetting(isBg);
-  await syncRules(isBg);
+  return [await syncSetting(isBg), await syncRules(isBg)];
 };
 
 export const trySyncSettingAndRules = async (isBg = false) => {
-  await trySyncSetting(isBg);
-  await trySyncRules(isBg);
+  return [await trySyncSetting(isBg), await trySyncRules(isBg)];
 };

src/views/Options/SyncSetting.js

@@ -12,12 +12,14 @@ import Button from "@mui/material/Button";
 import { useAlert } from "../../hooks/Alert";
 import SyncIcon from "@mui/icons-material/Sync";
 import CircularProgress from "@mui/material/CircularProgress";
+import { useSetting } from "../../hooks/Setting";
 
 export default function SyncSetting() {
   const i18n = useI18n();
   const { sync, updateSync } = useSync();
   const alert = useAlert();
   const [loading, setLoading] = useState(false);
+  const { reloadSetting } = useSetting();
 
   const handleChange = async (e) => {
     e.preventDefault();
@@ -32,6 +34,7 @@ export default function SyncSetting() {
     try {
       setLoading(true);
       await syncSettingAndRules();
+      await reloadSetting();
       alert.success(i18n("data_sync_success"));
     } catch (err) {
       console.log("[sync all]", err);