webfix

src/views/Options/SyncSetting.js

@@ -87,7 +87,7 @@ export default function SyncSetting() {
             onClick={handleSyncTest}
             startIcon={<SyncIcon />}
           >
-            {i18n("data_sync_test")}
+            {i18n("sync_now")}
           </Button>
           {loading && <CircularProgress size={16} />}
         </Stack>

src/views/Options/Webfix.js

@@ -1,6 +1,6 @@
 import Stack from "@mui/material/Stack";
 import TextField from "@mui/material/TextField";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useI18n } from "../../hooks/I18n";
 import Typography from "@mui/material/Typography";
 import Accordion from "@mui/material/Accordion";
@@ -9,13 +9,17 @@ import AccordionDetails from "@mui/material/AccordionDetails";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import Alert from "@mui/material/Alert";
 import Box from "@mui/material/Box";
-import { sites as webfixSites } from "../../libs/webfix";
 import FormControlLabel from "@mui/material/FormControlLabel";
 import Switch from "@mui/material/Switch";
 import { useSetting } from "../../hooks/Setting";
+import CircularProgress from "@mui/material/CircularProgress";
+import { syncWebfix, loadOrFetchWebfix } from "../../libs/webfix";
+import Button from "@mui/material/Button";
+import SyncIcon from "@mui/icons-material/Sync";
+import { useAlert } from "../../hooks/Alert";
 
 function ApiFields({ site }) {
-  const { selector, rootSlector } = site;
+  const { selector, rootSlector, fixer } = site;
   return (
     <Stack spacing={3}>
       <TextField
@@ -32,6 +36,13 @@ function ApiFields({ site }) {
         value={selector}
         disabled
       />
+      <TextField
+        size="small"
+        label={"fixer"}
+        name="fixer"
+        value={fixer}
+        disabled
+      />
     </Stack>
   );
 }
@@ -56,33 +67,90 @@ function ApiAccordion({ site }) {
 }
 
 export default function Webfix() {
+  const [loading, setLoading] = useState(false);
+  const [sites, setSites] = useState([]);
   const i18n = useI18n();
+  const alert = useAlert();
   const { setting, updateSetting } = useSetting();
+
+  const handleSyncTest = async (e) => {
+    e.preventDefault();
+    try {
+      setLoading(true);
+      await syncWebfix(process.env.REACT_APP_WEBFIXURL);
+      alert.success(i18n("sync_success"));
+    } catch (err) {
+      console.log("[sync webfix]", err);
+      alert.error(i18n("sync_failed"));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    (async () => {
+      try {
+        setLoading(true);
+        const sites = await loadOrFetchWebfix(process.env.REACT_APP_WEBFIXURL);
+        setSites(sites);
+      } catch (err) {
+        console.log("[load webfix]", err.message);
+      } finally {
+        setLoading(false);
+      }
+    })();
+  }, []);
+
   return (
     <Box>
       <Stack spacing={3}>
         <Alert severity="info">{i18n("patch_setting_help")}</Alert>
 
-        <FormControlLabel
-          control={
-            <Switch
-              size="small"
-              checked={!!setting.injectWebfix}
-              onChange={() => {
-                updateSetting({
-                  injectWebfix: !setting.injectWebfix,
-                });
-              }}
-            />
-          }
-          label={i18n("inject_webfix")}
-        />
+        <Stack
+          direction="row"
+          alignItems="center"
+          spacing={2}
+          useFlexGap
+          flexWrap="wrap"
+        >
+          <Button
+            size="small"
+            variant="outlined"
+            disabled={loading}
+            onClick={handleSyncTest}
+            startIcon={<SyncIcon />}
+          >
+            {i18n("sync_now")}
+          </Button>
+          <FormControlLabel
+            control={
+              <Switch
+                size="small"
+                checked={!!setting.injectWebfix}
+                onChange={() => {
+                  updateSetting({
+                    injectWebfix: !setting.injectWebfix,
+                  });
+                }}
+              />
+            }
+            label={i18n("inject_webfix")}
+          />
+        </Stack>
 
-        <Box>
-          {webfixSites.map((site) => (
-            <ApiAccordion key={site.pattern} site={site} />
-          ))}
-        </Box>
+        {setting.injectWebfix && (
+          <Box>
+            {loading ? (
+              <center>
+                <CircularProgress size={16} />
+              </center>
+            ) : (
+              sites.map((site) => (
+                <ApiAccordion key={site.pattern} site={site} />
+              ))
+            )}
+          </Box>
+        )}
       </Stack>
     </Box>
   );