refactor: adjust setting dialog component

src/components/setting/mods/sysproxy-viewer.tsx

@@ -1,14 +1,8 @@
-import useSWR from "swr";
-import { useEffect, useState } from "react";
+import { forwardRef, useImperativeHandle, useState } from "react";
 import { useLockFn } from "ahooks";
 import { useTranslation } from "react-i18next";
 import {
   Box,
-  Button,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
   InputAdornment,
   List,
   ListItem,
@@ -20,37 +14,19 @@ import {
 } from "@mui/material";
 import { useVerge } from "@/hooks/use-verge";
 import { getSystemProxy } from "@/services/cmds";
-import { ModalHandler } from "@/hooks/use-modal-handler";
+import { BaseDialog, DialogRef } from "@/components/base";
 import Notice from "@/components/base/base-notice";
 
-interface Props {
-  handler: ModalHandler;
-}
-
-const FlexBox = styled("div")`
-  display: flex;
-  margin-top: 4px;
-
-  .label {
-    flex: none;
-    width: 80px;
-  }
-`;
-
-const SysproxyViewer = ({ handler }: Props) => {
+export const SysproxyViewer = forwardRef<DialogRef>((props, ref) => {
   const { t } = useTranslation();
 
   const [open, setOpen] = useState(false);
 
-  if (handler) {
-    handler.current = {
-      open: () => setOpen(true),
-      close: () => setOpen(false),
-    };
-  }
-
   const { verge, patchVerge } = useVerge();
 
+  type SysProxy = Awaited<ReturnType<typeof getSystemProxy>>;
+  const [sysproxy, setSysproxy] = useState<SysProxy>();
+
   const {
     enable_system_proxy: enabled,
     enable_proxy_guard,
@@ -58,28 +34,28 @@ const SysproxyViewer = ({ handler }: Props) => {
     proxy_guard_duration,
   } = verge ?? {};
 
-  const { data: sysproxy } = useSWR(
-    open ? "getSystemProxy" : null,
-    getSystemProxy
-  );
-
   const [value, setValue] = useState({
     guard: enable_proxy_guard,
     bypass: system_proxy_bypass,
     duration: proxy_guard_duration ?? 10,
   });
 
-  useEffect(() => {
-    setValue({
-      guard: enable_proxy_guard,
-      bypass: system_proxy_bypass,
-      duration: proxy_guard_duration ?? 10,
-    });
-  }, [verge]);
+  useImperativeHandle(ref, () => ({
+    open: () => {
+      setOpen(true);
+      setValue({
+        guard: enable_proxy_guard,
+        bypass: system_proxy_bypass,
+        duration: proxy_guard_duration ?? 10,
+      });
+      getSystemProxy().then((p) => setSysproxy(p));
+    },
+    close: () => setOpen(false),
+  }));
 
   const onSave = useLockFn(async () => {
-    if (value.duration < 5) {
-      Notice.error("Proxy guard duration at least 5 seconds");
+    if (value.duration < 1) {
+      Notice.error("Proxy guard duration at least 1 seconds");
       return;
     }
 
@@ -104,94 +80,95 @@ const SysproxyViewer = ({ handler }: Props) => {
   });
 
   return (
-    <Dialog open={open} onClose={() => setOpen(false)}>
-      <DialogTitle>{t("System Proxy Setting")}</DialogTitle>
+    <BaseDialog
+      open={open}
+      title={t("System Proxy Setting")}
+      contentSx={{ width: 450, maxHeight: 300 }}
+      okBtn={t("Save")}
+      cancelBtn={t("Cancel")}
+      onClose={() => setOpen(false)}
+      onCancel={() => setOpen(false)}
+      onOk={onSave}
+    >
+      <List>
+        <ListItem sx={{ padding: "5px 2px" }}>
+          <ListItemText primary={t("Proxy Guard")} />
+          <Switch
+            edge="end"
+            disabled={!enabled}
+            checked={value.guard}
+            onChange={(_, e) => setValue((v) => ({ ...v, guard: e }))}
+          />
+        </ListItem>
 
-      <DialogContent sx={{ width: 450, maxHeight: 300 }}>
-        <List>
-          <ListItem sx={{ padding: "5px 2px" }}>
-            <ListItemText primary={t("Proxy Guard")} />
-            <Switch
-              edge="end"
-              disabled={!enabled}
-              checked={value.guard}
-              onChange={(_, e) => setValue((v) => ({ ...v, guard: e }))}
-            />
-          </ListItem>
+        <ListItem sx={{ padding: "5px 2px" }}>
+          <ListItemText primary={t("Guard Duration")} />
+          <TextField
+            disabled={!enabled}
+            size="small"
+            value={value.duration}
+            sx={{ width: 100 }}
+            InputProps={{
+              endAdornment: <InputAdornment position="end">s</InputAdornment>,
+            }}
+            onChange={(e) => {
+              setValue((v) => ({
+                ...v,
+                duration: +e.target.value.replace(/\D/, ""),
+              }));
+            }}
+          />
+        </ListItem>
 
-          <ListItem sx={{ padding: "5px 2px" }}>
-            <ListItemText primary={t("Guard Duration")} />
-            <TextField
-              disabled={!enabled}
-              size="small"
-              value={value.duration}
-              sx={{ width: 100 }}
-              InputProps={{
-                endAdornment: <InputAdornment position="end">s</InputAdornment>,
-              }}
-              onChange={(e) => {
-                setValue((v) => ({
-                  ...v,
-                  duration: +e.target.value.replace(/\D/, ""),
-                }));
-              }}
-            />
-          </ListItem>
+        <ListItem sx={{ padding: "5px 2px", alignItems: "start" }}>
+          <ListItemText primary={t("Proxy Bypass")} sx={{ padding: "3px 0" }} />
+          <TextField
+            disabled={!enabled}
+            size="small"
+            autoComplete="off"
+            multiline
+            rows={3}
+            sx={{ width: 280 }}
+            value={value.bypass}
+            onChange={(e) =>
+              setValue((v) => ({ ...v, bypass: e.target.value }))
+            }
+          />
+        </ListItem>
+      </List>
 
-          <ListItem sx={{ padding: "5px 2px", alignItems: "start" }}>
-            <ListItemText
-              primary={t("Proxy Bypass")}
-              sx={{ padding: "3px 0" }}
-            />
-            <TextField
-              disabled={!enabled}
-              size="small"
-              autoComplete="off"
-              multiline
-              rows={3}
-              sx={{ width: 280 }}
-              value={value.bypass}
-              onChange={(e) =>
-                setValue((v) => ({ ...v, bypass: e.target.value }))
-              }
-            />
-          </ListItem>
-        </List>
+      <Box sx={{ mt: 2.5 }}>
+        <Typography variant="body1" sx={{ fontSize: "18px", mb: 1 }}>
+          {t("Current System Proxy")}
+        </Typography>
 
-        <Box sx={{ mt: 2.5 }}>
-          <Typography variant="body1" sx={{ fontSize: "18px", mb: 1 }}>
-            {t("Current System Proxy")}
+        <FlexBox>
+          <Typography className="label">Enable:</Typography>
+          <Typography className="value">
+            {(!!sysproxy?.enable).toString()}
           </Typography>
+        </FlexBox>
 
-          <FlexBox>
-            <Typography className="label">Enable:</Typography>
-            <Typography className="value">
-              {(!!sysproxy?.enable).toString()}
-            </Typography>
-          </FlexBox>
+        <FlexBox>
+          <Typography className="label">Server:</Typography>
+          <Typography className="value">{sysproxy?.server || "-"}</Typography>
+        </FlexBox>
 
-          <FlexBox>
-            <Typography className="label">Server:</Typography>
-            <Typography className="value">{sysproxy?.server || "-"}</Typography>
-          </FlexBox>
-
-          <FlexBox>
-            <Typography className="label">Bypass:</Typography>
-            <Typography className="value">{sysproxy?.bypass || "-"}</Typography>
-          </FlexBox>
-        </Box>
-      </DialogContent>
-
-      <DialogActions>
-        <Button variant="outlined" onClick={() => setOpen(false)}>
-          {t("Cancel")}
-        </Button>
-        <Button onClick={onSave} variant="contained">
-          {t("Save")}
-        </Button>
-      </DialogActions>
-    </Dialog>
+        <FlexBox>
+          <Typography className="label">Bypass:</Typography>
+          <Typography className="value">{sysproxy?.bypass || "-"}</Typography>
+        </FlexBox>
+      </Box>
+    </BaseDialog>
   );
-};
+});
 
-export default SysproxyViewer;
+const FlexBox = styled("div")`
+  display: flex;
+  margin-top: 4px;
+
+  .label {
+    flex: none;
+    width: 80px;
+  }
+`;