fix data sync

src/views/Options/Layout.js

@@ -6,6 +6,7 @@ import Box from "@mui/material/Box";
 import Navigator from "./Navigator";
 import Header from "./Header";
 import { useTheme } from "@mui/material/styles";
+import { syncAll } from "../../libs/sync";
 
 export default function Layout() {
   const navWidth = 256;
@@ -20,6 +21,7 @@ export default function Layout() {
 
   useEffect(() => {
     setOpen(false);
+    syncAll();
   }, [location]);
 
   return (

src/views/Options/Navigator.js

@@ -9,6 +9,7 @@ import SettingsIcon from "@mui/icons-material/Settings";
 import InfoIcon from "@mui/icons-material/Info";
 import DesignServicesIcon from "@mui/icons-material/DesignServices";
 import { useI18n } from "../../hooks/I18n";
+import SyncIcon from "@mui/icons-material/Sync";
 
 function LinkItem({ label, url, icon }) {
   const match = useMatch(url);
@@ -35,6 +36,12 @@ export default function Navigator(props) {
       url: "/rules",
       icon: <DesignServicesIcon />,
     },
+    {
+      id: "sync",
+      label: i18n("sync_setting"),
+      url: "/sync",
+      icon: <SyncIcon />,
+    },
     { id: "about", label: i18n("about"), url: "/about", icon: <InfoIcon /> },
   ];
   return (

src/views/Options/Rules.js

@@ -10,7 +10,6 @@ import {
   OPT_STYLE_ALL,
 } from "../../config";
 import { useState, useRef } from "react";
-import Alert from "@mui/material/Alert";
 import { useI18n } from "../../hooks/I18n";
 import Typography from "@mui/material/Typography";
 import Accordion from "@mui/material/Accordion";
@@ -354,8 +353,6 @@ export default function Rules() {
   return (
     <Box>
       <Stack spacing={3}>
-        <Alert severity="warning">{i18n("advanced_warn")}</Alert>
-
         <Stack direction="row" spacing={2}>
           <Button
             size="small"

src/views/Options/Setting.js

@@ -9,22 +9,12 @@ import { useSetting, useSettingUpdate } from "../../hooks/Setting";
 import { limitNumber } from "../../libs/utils";
 import { useI18n } from "../../hooks/I18n";
 import { UI_LANGS } from "../../config";
-import { apiSyncAll } from "../../apis/data";
-import { useCallback } from "react";
 
 export default function Settings() {
   const i18n = useI18n();
   const setting = useSetting();
   const updateSetting = useSettingUpdate();
 
-  const handleSyncBlur = useCallback(async () => {
-    try {
-      await apiSyncAll();
-    } catch (err) {
-      console.log("sync data", err);
-    }
-  }, []);
-
   if (!setting) {
     return;
   }
@@ -38,8 +28,6 @@ export default function Settings() {
     openaiModel,
     openaiPrompt,
     clearCache,
-    syncUrl,
-    syncKey,
   } = setting;
 
   return (
@@ -148,31 +136,6 @@ export default function Settings() {
           minRows={2}
           maxRows={10}
         />
-
-        <TextField
-          size="small"
-          label={i18n("data_sync_url")}
-          defaultValue={syncUrl}
-          onChange={(e) => {
-            updateSetting({
-              syncUrl: e.target.value,
-            });
-          }}
-          onBlur={handleSyncBlur}
-        />
-
-        <TextField
-          size="small"
-          type="password"
-          label={i18n("data_sync_key")}
-          defaultValue={syncKey}
-          onChange={(e) => {
-            updateSetting({
-              syncKey: e.target.value,
-            });
-          }}
-          onBlur={handleSyncBlur}
-        />
       </Stack>
     </Box>
   );

src/views/Options/SyncSetting.js

@@ -0,0 +1,59 @@
+import Box from "@mui/material/Box";
+import Stack from "@mui/material/Stack";
+import TextField from "@mui/material/TextField";
+import { useI18n } from "../../hooks/I18n";
+import { useSync } from "../../hooks/Sync";
+import { syncAll } from "../../libs/sync";
+import Alert from "@mui/material/Alert";
+import Link from "@mui/material/Link";
+import { URL_KISS_WORKER } from "../../config";
+
+export default function SyncSetting() {
+  const i18n = useI18n();
+  const sync = useSync();
+
+  if (!sync.opt) {
+    return;
+  }
+
+  const { syncUrl, syncKey } = sync.opt;
+  const handleSyncBlur = () => {
+    syncAll();
+  };
+
+  return (
+    <Box>
+      <Stack spacing={3}>
+        <Alert severity="warning">{i18n("sync_warn")}</Alert>
+
+        <TextField
+          size="small"
+          label={i18n("data_sync_url")}
+          defaultValue={syncUrl}
+          onChange={(e) => {
+            sync.update({
+              syncUrl: e.target.value,
+            });
+          }}
+          onBlur={handleSyncBlur}
+          helperText={
+            <Link href={URL_KISS_WORKER}>{i18n("about_sync_api")}</Link>
+          }
+        />
+
+        <TextField
+          size="small"
+          type="password"
+          label={i18n("data_sync_key")}
+          defaultValue={syncKey}
+          onChange={(e) => {
+            sync.update({
+              syncKey: e.target.value,
+            });
+          }}
+          onBlur={handleSyncBlur}
+        />
+      </Stack>
+    </Box>
+  );
+}

src/views/Options/index.js

@@ -3,6 +3,7 @@ import About from "./About";
 import Rules from "./Rules";
 import Setting from "./Setting";
 import Layout from "./Layout";
+import SyncSetting from "./SyncSetting";
 
 export default function Options() {
   return (
@@ -10,6 +11,7 @@ export default function Options() {
       <Route path="/" element={<Layout />}>
         <Route index element={<Setting />} />
         <Route path="rules" element={<Rules />} />
+        <Route path="sync" element={<SyncSetting />} />
         <Route path="about" element={<About />} />
       </Route>
     </Routes>