feat: refactor

src/components/profile/enhanced.tsx

@@ -1,29 +1,13 @@
 import useSWR from "swr";
-import { useState } from "react";
 import { useLockFn } from "ahooks";
-import {
-  Box,
-  Divider,
-  Grid,
-  IconButton,
-  ListItemIcon,
-  ListItemText,
-  Menu,
-  MenuItem,
-  Stack,
-} from "@mui/material";
-import {
-  AddchartRounded,
-  CheckRounded,
-  MenuRounded,
-  RestartAltRounded,
-} from "@mui/icons-material";
+import { Box, Grid, IconButton, Stack } from "@mui/material";
+import { RestartAltRounded } from "@mui/icons-material";
 import {
   getProfiles,
   deleteProfile,
   enhanceProfiles,
   changeProfileChain,
-  changeProfileValid,
+  getRuntimeLogs,
 } from "@/services/cmds";
 import ProfileMore from "./profile-more";
 import Notice from "../base/base-notice";
@@ -36,10 +20,8 @@ interface Props {
 const EnhancedMode = (props: Props) => {
   const { items, chain } = props;
 
-  const { data, mutate } = useSWR("getProfiles", getProfiles);
-  const valid = data?.valid || [];
-
-  const [anchorEl, setAnchorEl] = useState<any>(null);
+  const { mutate: mutateProfiles } = useSWR("getProfiles", getProfiles);
+  const { data: chainLogs = {} } = useSWR("getRuntimeLogs", getRuntimeLogs);
 
   // handler
   const onEnhance = useLockFn(async () => {
@@ -56,7 +38,7 @@ const EnhancedMode = (props: Props) => {
 
     const newChain = [...chain, uid];
     await changeProfileChain(newChain);
-    mutate((conf = {}) => ({ ...conf, chain: newChain }), true);
+    mutateProfiles((conf = {}) => ({ ...conf, chain: newChain }), true);
   });
 
   const onEnhanceDisable = useLockFn(async (uid: string) => {
@@ -64,14 +46,14 @@ const EnhancedMode = (props: Props) => {
 
     const newChain = chain.filter((i) => i !== uid);
     await changeProfileChain(newChain);
-    mutate((conf = {}) => ({ ...conf, chain: newChain }), true);
+    mutateProfiles((conf = {}) => ({ ...conf, chain: newChain }), true);
   });
 
   const onEnhanceDelete = useLockFn(async (uid: string) => {
     try {
       await onEnhanceDisable(uid);
       await deleteProfile(uid);
-      mutate();
+      mutateProfiles();
     } catch (err: any) {
       Notice.error(err?.message || err.toString());
     }
@@ -82,7 +64,7 @@ const EnhancedMode = (props: Props) => {
 
     const newChain = [uid].concat(chain.filter((i) => i !== uid));
     await changeProfileChain(newChain);
-    mutate((conf = {}) => ({ ...conf, chain: newChain }), true);
+    mutateProfiles((conf = {}) => ({ ...conf, chain: newChain }), true);
   });
 
   const onMoveEnd = useLockFn(async (uid: string) => {
@@ -90,20 +72,7 @@ const EnhancedMode = (props: Props) => {
 
     const newChain = chain.filter((i) => i !== uid).concat([uid]);
     await changeProfileChain(newChain);
-    mutate((conf = {}) => ({ ...conf, chain: newChain }), true);
-  });
-
-  // update valid list
-  const onToggleValid = useLockFn(async (key: string) => {
-    try {
-      const newValid = valid.includes(key)
-        ? valid.filter((i) => i !== key)
-        : valid.concat(key);
-      await changeProfileValid(newValid);
-      mutate();
-    } catch (err: any) {
-      Notice.error(err.message || err.toString());
-    }
+    mutateProfiles((conf = {}) => ({ ...conf, chain: newChain }), true);
   });
 
   return (
@@ -123,72 +92,6 @@ const EnhancedMode = (props: Props) => {
         >
           <RestartAltRounded />
         </IconButton>
-
-        <IconButton
-          size="small"
-          color="inherit"
-          id="profile-use-button"
-          title="enable clash fields"
-          aria-controls={!!anchorEl ? "profile-use-menu" : undefined}
-          aria-haspopup="true"
-          aria-expanded={!!anchorEl ? "true" : undefined}
-          onClick={(e) => setAnchorEl(e.currentTarget)}
-        >
-          <MenuRounded />
-        </IconButton>
-
-        <Menu
-          id="profile-use-menu"
-          open={!!anchorEl}
-          anchorEl={anchorEl}
-          onClose={() => setAnchorEl(null)}
-          transitionDuration={225}
-          MenuListProps={{
-            dense: true,
-            "aria-labelledby": "profile-use-button",
-          }}
-          onContextMenu={(e) => {
-            setAnchorEl(null);
-            e.preventDefault();
-          }}
-        >
-          <MenuItem>
-            <ListItemIcon color="inherit">
-              <AddchartRounded />
-            </ListItemIcon>
-            Use Clash Fields
-          </MenuItem>
-
-          <Divider />
-
-          {[
-            "tun",
-            "dns",
-            "hosts",
-            "script",
-            "profile",
-            "payload",
-            "interface-name",
-            "routing-mark",
-          ].map((key) => {
-            const has = valid.includes(key);
-
-            return (
-              <MenuItem
-                key={key}
-                sx={{ width: 180 }}
-                onClick={() => onToggleValid(key)}
-              >
-                {has && (
-                  <ListItemIcon color="inherit">
-                    <CheckRounded />
-                  </ListItemIcon>
-                )}
-                <ListItemText inset={!has}>{key}</ListItemText>
-              </MenuItem>
-            );
-          })}
-        </Menu>
       </Stack>
 
       <Grid container spacing={2}>
@@ -198,6 +101,7 @@ const EnhancedMode = (props: Props) => {
               selected={!!chain.includes(item.uid)}
               itemData={item}
               enableNum={chain.length}
+              logInfo={chainLogs[item.uid]}
               onEnable={() => onEnhanceEnable(item.uid)}
               onDisable={() => onEnhanceDisable(item.uid)}
               onDelete={() => onEnhanceDelete(item.uid)}