add sync test button

src/background.js

@@ -19,7 +19,7 @@ import {
 } from "./config";
 import storage from "./libs/storage";
 import { getSetting } from "./libs";
-import { syncAll } from "./libs/sync";
+import { trySyncAll } from "./libs/sync";
 import { fetchData, fetchPool } from "./libs/fetch";
 import { sendTabMsg } from "./libs/msg";
 import { trySyncAllSubRules } from "./libs/rules";
@@ -45,7 +45,7 @@ browser.runtime.onStartup.addListener(async () => {
   console.log("browser onStartup");
 
   // 同步数据
-  await syncAll(true);
+  await trySyncAll(true);
 
   // 清除缓存
   const setting = await getSetting();

src/config/i18n.js

@@ -272,6 +272,18 @@ export const I18N = {
     zh: `数据同步密钥`,
     en: `Data Sync Key`,
   },
+  data_sync_test: {
+    zh: `数据同步测试`,
+    en: `Data Sync Test`,
+  },
+  data_sync_success: {
+    zh: `数据同步成功！`,
+    en: `Data Sync Success`,
+  },
+  data_sync_error: {
+    zh: `数据同步失败！`,
+    en: `Data Sync Error`,
+  },
   error_got_some_wrong: {
     zh: "抱歉，出错了！",
     en: "Sorry, something went wrong!",

src/hooks/Rules.js

@@ -1,7 +1,7 @@
 import { STOKEY_RULES, DEFAULT_SUBRULES_LIST } from "../config";
 import storage from "../libs/storage";
 import { useStorages } from "./Storage";
-import { syncRules } from "../libs/sync";
+import { trySyncRules } from "../libs/sync";
 import { useSync } from "./Sync";
 import { useSetting, useSettingUpdate } from "./Setting";
 import { checkRules } from "../libs/rules";
@@ -19,7 +19,7 @@ export function useRules() {
     const updateAt = sync.opt?.rulesUpdateAt ? Date.now() : 0;
     await storage.setObj(STOKEY_RULES, rules);
     await sync.update({ rulesUpdateAt: updateAt });
-    syncRules();
+    trySyncRules();
   };
 
   const add = async (rule) => {

src/hooks/Setting.js

@@ -2,7 +2,7 @@ import { STOKEY_SETTING } from "../config";
 import storage from "../libs/storage";
 import { useStorages } from "./Storage";
 import { useSync } from "./Sync";
-import { syncSetting } from "../libs/sync";
+import { trySyncSetting } from "../libs/sync";
 
 /**
  * 设置hook
@@ -23,6 +23,6 @@ export function useSettingUpdate() {
     const updateAt = sync.opt?.settingUpdateAt ? Date.now() : 0;
     await storage.putObj(STOKEY_SETTING, obj);
     await sync.update({ settingUpdateAt: updateAt });
-    syncSetting();
+    trySyncSetting();
   };
 }

src/libs/sync.js

@@ -28,7 +28,6 @@ export const syncOpt = {
  * @returns
  */
 export const syncSetting = async (isBg = false) => {
-  try {
   const { syncUrl, syncKey, settingUpdateAt } = await syncOpt.load();
   if (!syncUrl || !syncKey) {
     return;
@@ -55,6 +54,11 @@ export const syncSetting = async (isBg = false) => {
   } else {
     await syncOpt.update({ settingSyncAt: res.updateAt });
   }
+};
+
+export const trySyncSetting = async (isBg = false) => {
+  try {
+    await syncSetting(isBg);
   } catch (err) {
     console.log("[sync setting]", err);
   }
@@ -65,7 +69,6 @@ export const syncSetting = async (isBg = false) => {
  * @returns
  */
 export const syncRules = async (isBg = false) => {
-  try {
   const { syncUrl, syncKey, rulesUpdateAt } = await syncOpt.load();
   if (!syncUrl || !syncKey) {
     return;
@@ -92,6 +95,11 @@ export const syncRules = async (isBg = false) => {
   } else {
     await syncOpt.update({ rulesSyncAt: res.updateAt });
   }
+};
+
+export const trySyncRules = async (isBg = false) => {
+  try {
+    await syncRules(isBg);
   } catch (err) {
     console.log("[sync user rules]", err);
   }
@@ -121,3 +129,8 @@ export const syncAll = async (isBg = false) => {
   await syncSetting(isBg);
   await syncRules(isBg);
 };
+
+export const trySyncAll = async (isBg = false) => {
+  await trySyncSetting(isBg);
+  await trySyncRules(isBg);
+};

src/views/Options/SyncSetting.js

@@ -7,12 +7,16 @@ import Alert from "@mui/material/Alert";
 import Link from "@mui/material/Link";
 import { URL_KISS_WORKER } from "../../config";
 import { debounce } from "../../libs/utils";
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 import { syncAll } from "../../libs/sync";
+import Button from "@mui/material/Button";
+import { useAlert } from "../../hooks/Alert";
 
 export default function SyncSetting() {
   const i18n = useI18n();
   const sync = useSync();
+  const alert = useAlert();
+  const [loading, setLoading] = useState(false);
 
   const handleChange = useMemo(
     () =>
@@ -22,11 +26,25 @@ export default function SyncSetting() {
         await sync.update({
           [name]: value,
         });
-        await syncAll();
-      }, 1000),
+        // trySyncAll();
+      }, 500),
     [sync]
   );
 
+  const handleSyncTest = async (e) => {
+    e.preventDefault();
+    try {
+      setLoading(true);
+      await syncAll();
+      alert.success(i18n("data_sync_success"));
+    } catch (err) {
+      console.log("[sync all]", err);
+      alert.error(i18n("data_sync_error"));
+    } finally {
+      setLoading(false);
+    }
+  };
+
   if (!sync.opt) {
     return;
   }
@@ -57,6 +75,17 @@ export default function SyncSetting() {
           defaultValue={syncKey}
           onChange={handleChange}
         />
+
+        <Stack direction="row" spacing={2} useFlexGap flexWrap="wrap">
+          <Button
+            size="small"
+            variant="contained"
+            disabled={!syncUrl || !syncKey || loading}
+            onClick={handleSyncTest}
+          >
+            {i18n("data_sync_test")}
+          </Button>
+        </Stack>
       </Stack>
     </Box>
   );

src/views/Options/index.js

@@ -10,7 +10,7 @@ import { useEffect, useState } from "react";
 import { isGm } from "../../libs/browser";
 import { sleep } from "../../libs/utils";
 import CircularProgress from "@mui/material/CircularProgress";
-import { syncAll } from "../../libs/sync";
+import { trySyncAll } from "../../libs/sync";
 import { AlertProvider } from "../../hooks/Alert";
 
 export default function Options() {
@@ -38,7 +38,7 @@ export default function Options() {
       }
 
       // 同步数据
-      syncAll();
+      trySyncAll();
     })();
   }, []);