From a3a3db6abbea703c05aaae95cdc4a3325dac1b50 Mon Sep 17 00:00:00 2001
From: GyDi <segydi@foxmail.com>
Date: Sun, 16 Jan 2022 03:22:37 +0800
Subject: [PATCH] refactor: setting page

---
 src/components/setting-item.tsx               |  8 -----
 .../{ => setting}/setting-clash.tsx           | 22 +++++--------
 .../{ => setting}/setting-verge.tsx           | 31 ++++++-------------
 src/components/setting/setting.tsx            | 19 ++++++++++++
 src/pages/setting.tsx                         |  4 +--
 5 files changed, 38 insertions(+), 46 deletions(-)
 delete mode 100644 src/components/setting-item.tsx
 rename src/components/{ => setting}/setting-clash.tsx (86%)
 rename src/components/{ => setting}/setting-verge.tsx (82%)
 create mode 100644 src/components/setting/setting.tsx

diff --git a/src/components/setting-item.tsx b/src/components/setting-item.tsx
deleted file mode 100644
index 52a0584..0000000
--- a/src/components/setting-item.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import { ListItem, styled } from "@mui/material";
-
-const SettingItem = styled(ListItem)(() => ({
-  paddingTop: 5,
-  paddingBottom: 5,
-}));
-
-export default SettingItem;
diff --git a/src/components/setting-clash.tsx b/src/components/setting/setting-clash.tsx
similarity index 86%
rename from src/components/setting-clash.tsx
rename to src/components/setting/setting-clash.tsx
index d3fc013..97d5b8b 100644
--- a/src/components/setting-clash.tsx
+++ b/src/components/setting/setting-clash.tsx
@@ -1,18 +1,16 @@
 import useSWR, { useSWRConfig } from "swr";
 import {
-  List,
   ListItemText,
-  ListSubheader,
   TextField,
   Switch,
   Select,
   MenuItem,
 } from "@mui/material";
-import { getClashConfig, updateConfigs } from "../services/api";
-import { patchClashConfig } from "../services/cmds";
-import { ApiType } from "../services/types";
-import GuardState from "./guard-state";
-import SettingItem from "./setting-item";
+import { getClashConfig, updateConfigs } from "../../services/api";
+import { SettingList, SettingItem } from "./setting";
+import { patchClashConfig } from "../../services/cmds";
+import { ApiType } from "../../services/types";
+import GuardState from "../guard-state";
 
 interface Props {
   onError?: (err: Error) => void;
@@ -30,22 +28,16 @@ const SettingClash = ({ onError }: Props) => {
   } = clashConfig ?? {};
 
   const onSwitchFormat = (_e: any, value: boolean) => value;
-
   const onChangeData = (patch: Partial<ApiType.ConfigData>) => {
     mutate("getClashConfig", { ...clashConfig, ...patch }, false);
   };
-
   const onUpdateData = async (patch: Partial<ApiType.ConfigData>) => {
     await updateConfigs(patch);
     await patchClashConfig(patch);
   };
 
   return (
-    <List>
-      <ListSubheader sx={{ background: "transparent" }}>
-        Clash Setting
-      </ListSubheader>
-
+    <SettingList title="Clash Setting">
       <SettingItem>
         <ListItemText primary="Allow Lan" />
         <GuardState
@@ -102,7 +94,7 @@ const SettingClash = ({ onError }: Props) => {
           disabled
         />
       </SettingItem>
-    </List>
+    </SettingList>
   );
 };
 
diff --git a/src/components/setting-verge.tsx b/src/components/setting/setting-verge.tsx
similarity index 82%
rename from src/components/setting-verge.tsx
rename to src/components/setting/setting-verge.tsx
index 3a15bf9..e3d51bb 100644
--- a/src/components/setting-verge.tsx
+++ b/src/components/setting/setting-verge.tsx
@@ -1,19 +1,12 @@
 import useSWR, { useSWRConfig } from "swr";
-import {
-  Box,
-  List,
-  ListItemText,
-  ListSubheader,
-  Switch,
-  Typography,
-} from "@mui/material";
-import { getVergeConfig, patchVergeConfig } from "../services/cmds";
-import { CmdType } from "../services/types";
-import { version } from "../../package.json";
-import GuardState from "./guard-state";
-import SettingItem from "./setting-item";
-import PaletteSwitch from "./palette-switch";
-import SysproxyTooltip from "./sysproxy-tooltip";
+import { Box, ListItemText, Switch, Typography } from "@mui/material";
+import { getVergeConfig, patchVergeConfig } from "../../services/cmds";
+import { SettingList, SettingItem } from "./setting";
+import { CmdType } from "../../services/types";
+import { version } from "../../../package.json";
+import GuardState from "../guard-state";
+import PaletteSwitch from "../palette-switch";
+import SysproxyTooltip from "../sysproxy-tooltip";
 
 interface Props {
   onError?: (err: Error) => void;
@@ -36,11 +29,7 @@ const SettingVerge = ({ onError }: Props) => {
   };
 
   return (
-    <List>
-      <ListSubheader sx={{ background: "transparent" }}>
-        Common Setting
-      </ListSubheader>
-
+    <SettingList title="Common Setting">
       <SettingItem>
         <ListItemText primary="Theme Mode" />
         <GuardState
@@ -110,7 +99,7 @@ const SettingVerge = ({ onError }: Props) => {
         <ListItemText primary="Version" />
         <Typography sx={{ py: "6px" }}>v{version}</Typography>
       </SettingItem>
-    </List>
+    </SettingList>
   );
 };
 
diff --git a/src/components/setting/setting.tsx b/src/components/setting/setting.tsx
new file mode 100644
index 0000000..49e9a22
--- /dev/null
+++ b/src/components/setting/setting.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+import { List, ListItem, ListSubheader, styled } from "@mui/material";
+
+export const SettingItem = styled(ListItem)(() => ({
+  paddingTop: 5,
+  paddingBottom: 5,
+}));
+
+export const SettingList: React.FC<{
+  title: string;
+}> = (props) => (
+  <List>
+    <ListSubheader sx={{ background: "transparent" }} disableSticky>
+      {props.title}
+    </ListSubheader>
+
+    {props.children}
+  </List>
+);
diff --git a/src/pages/setting.tsx b/src/pages/setting.tsx
index 98c0256..f4e32b6 100644
--- a/src/pages/setting.tsx
+++ b/src/pages/setting.tsx
@@ -1,7 +1,7 @@
 import { Paper } from "@mui/material";
 import BasePage from "../components/base-page";
-import SettingVerge from "../components/setting-verge";
-import SettingClash from "../components/setting-clash";
+import SettingVerge from "../components/setting/setting-verge";
+import SettingClash from "../components/setting/setting-clash";
 
 const SettingPage = () => {
   return (