refactor: something

src/components/window-control.tsx → src/components/layout-control.tsx

@@ -6,7 +6,7 @@ import {
   HorizontalRuleRounded,
 } from "@mui/icons-material";
 
-const WindowControl = () => {
+const LayoutControl = () => {
   return (
     <>
       <Button
@@ -36,4 +36,4 @@ const WindowControl = () => {
   );
 };
 
-export default WindowControl;
+export default LayoutControl;

src/components/notice.tsx

@@ -30,7 +30,11 @@ const NoticeInner = (props: InnerProps) => {
         {type === "error" && <ErrorRounded color="error" />}
         {type === "success" && <CheckCircleRounded color="success" />}
 
-        <Typography sx={{ ml: 1 }}>{message}</Typography>
+        <Typography
+          sx={{ ml: 1, wordWrap: "break-word", wordBreak: "break-all" }}
+        >
+          {message}
+        </Typography>
       </Box>
     );
 

src/components/profile-item.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useRef, useState } from "react";
 import dayjs from "dayjs";
 import {
   alpha,
@@ -15,6 +15,7 @@ import { useSWRConfig } from "swr";
 import { RefreshRounded } from "@mui/icons-material";
 import { CmdType } from "../services/types";
 import { updateProfile, deleteProfile } from "../services/cmds";
+import Notice from "./notice";
 import parseTraffic from "../utils/parse-traffic";
 import relativeTime from "dayjs/plugin/relativeTime";
 
@@ -32,8 +33,8 @@ const Wrapper = styled(Box)(({ theme }) => ({
 }));
 
 const round = keyframes`
-from { transform: rotate(0deg); }
-to { transform: rotate(360deg); }
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
 `;
 
 interface Props {
@@ -43,7 +44,7 @@ interface Props {
   onClick: () => void;
 }
 
-const ProfileItemComp: React.FC<Props> = (props) => {
+const ProfileItem: React.FC<Props> = (props) => {
   const { index, selected, itemData, onClick } = props;
 
   const { mutate } = useSWRConfig();
@@ -65,20 +66,25 @@ const ProfileItemComp: React.FC<Props> = (props) => {
     try {
       await updateProfile(index);
       mutate("getProfiles");
-    } catch (err) {
-      console.error(err);
+    } catch (err: any) {
+      Notice.error(err.toString());
     } finally {
       setLoading(false);
     }
   };
 
+  const deleteRef = useRef(false);
   const onDelete = async () => {
     setAnchorEl(null);
+    if (deleteRef.current) return;
+    deleteRef.current = true;
     try {
       await deleteProfile(index);
       mutate("getProfiles");
-    } catch (err) {
-      console.error(err);
+    } catch (err: any) {
+      Notice.error(err.toString());
+    } finally {
+      deleteRef.current = false;
     }
   };
 
@@ -198,7 +204,6 @@ const ProfileItemComp: React.FC<Props> = (props) => {
       >
         <MenuItem onClick={onUpdate}>Update</MenuItem>
         <MenuItem onClick={onDelete}>Delete</MenuItem>
-        {/* <MenuItem>Update(proxy)</MenuItem> */}
       </Menu>
     </>
   );
@@ -216,4 +221,4 @@ function parseExpire(expire?: number) {
   return dayjs(expire * 1000).format("YYYY-MM-DD");
 }
 
-export default ProfileItemComp;
+export default ProfileItem;

src/components/guard-state.tsx → src/components/setting/guard-state.tsx

@@ -1,5 +1,5 @@
 import { cloneElement, isValidElement, ReactNode, useRef } from "react";
-import noop from "../utils/noop";
+import noop from "../../utils/noop";
 
 interface Props<Value> {
   value?: Value;

src/components/setting/setting-clash.tsx

@@ -10,7 +10,7 @@ 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";
+import GuardState from "./guard-state";
 
 interface Props {
   onError?: (err: Error) => void;

src/components/setting/setting-verge.tsx

@@ -4,9 +4,9 @@ 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";
+import GuardState from "./guard-state";
+import PaletteSwitch from "./palette-switch";
+import SysproxyTooltip from "./sysproxy-tooltip";
 
 interface Props {
   onError?: (err: Error) => void;

src/components/sysproxy-tooltip.tsx → src/components/setting/sysproxy-tooltip.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import { InfoRounded } from "@mui/icons-material";
 import { ClickAwayListener, Tooltip } from "@mui/material";
-import { getSystemProxy } from "../services/cmds";
+import { getSystemProxy } from "../../services/cmds";
 
 const SysproxyTooltip = () => {
   const [open, setOpen] = useState(false);
@@ -9,7 +9,6 @@ const SysproxyTooltip = () => {
 
   const onShow = async () => {
     const data = await getSystemProxy();
-    console.log(data);
     setInfo(data ?? {});
     setOpen(true);
   };

src/pages/_layout.tsx

@@ -11,7 +11,7 @@ import LogoSvg from "../assets/image/logo.svg";
 import Traffic from "../components/traffic";
 import LayoutItem from "../components/layout-item";
 import UpdateButton from "../components/update-button";
-import WindowControl from "../components/window-control";
+import LayoutControl from "../components/layout-control";
 
 const Layout = () => {
   const [mode, setMode] = useRecoilState(atomPaletteMode);
@@ -92,7 +92,7 @@ const Layout = () => {
 
           <div className="layout__right" data-windrag>
             <div className="the-bar">
-              <WindowControl />
+              <LayoutControl />
             </div>
 
             <div className="the-content" data-windrag>

src/pages/profiles.tsx

@@ -11,7 +11,7 @@ import { getProxies, updateProxy } from "../services/api";
 import noop from "../utils/noop";
 import Notice from "../components/notice";
 import BasePage from "../components/base-page";
-import ProfileItemComp from "../components/profile-item";
+import ProfileItem from "../components/profile-item";
 
 const ProfilePage = () => {
   const [url, setUrl] = useState("");
@@ -121,7 +121,7 @@ const ProfilePage = () => {
       <Grid container spacing={3}>
         {profiles?.items?.map((item, idx) => (
           <Grid item xs={12} sm={6} key={item.file}>
-            <ProfileItemComp
+            <ProfileItem
               index={idx}
               selected={profiles.current === idx}
               itemData={item}