From 9c43b31fc08022564f562e62854d0864a654f0c0 Mon Sep 17 00:00:00 2001
From: GyDi <segydi@foxmail.com>
Date: Sun, 16 Jan 2022 18:30:25 +0800
Subject: [PATCH] refactor: something

---
 ...{window-control.tsx => layout-control.tsx} |  4 +--
 src/components/notice.tsx                     |  6 ++++-
 src/components/profile-item.tsx               | 25 +++++++++++--------
 src/components/{ => setting}/guard-state.tsx  |  2 +-
 .../{ => setting}/palette-switch.tsx          |  0
 src/components/setting/setting-clash.tsx      |  2 +-
 src/components/setting/setting-verge.tsx      |  6 ++---
 .../{ => setting}/sysproxy-tooltip.tsx        |  3 +--
 src/pages/_layout.tsx                         |  4 +--
 src/pages/profiles.tsx                        |  4 +--
 10 files changed, 32 insertions(+), 24 deletions(-)
 rename src/components/{window-control.tsx => layout-control.tsx} (92%)
 rename src/components/{ => setting}/guard-state.tsx (97%)
 rename src/components/{ => setting}/palette-switch.tsx (100%)
 rename src/components/{ => setting}/sysproxy-tooltip.tsx (94%)

diff --git a/src/components/window-control.tsx b/src/components/layout-control.tsx
similarity index 92%
rename from src/components/window-control.tsx
rename to src/components/layout-control.tsx
index 4b5e470..7756906 100644
--- a/src/components/window-control.tsx
+++ b/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;
diff --git a/src/components/notice.tsx b/src/components/notice.tsx
index eedc7a5..7729ba3 100644
--- a/src/components/notice.tsx
+++ b/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>
     );
 
diff --git a/src/components/profile-item.tsx b/src/components/profile-item.tsx
index 6f1f70f..c83dcc1 100644
--- a/src/components/profile-item.tsx
+++ b/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;
diff --git a/src/components/guard-state.tsx b/src/components/setting/guard-state.tsx
similarity index 97%
rename from src/components/guard-state.tsx
rename to src/components/setting/guard-state.tsx
index f17fd51..b2cff75 100644
--- a/src/components/guard-state.tsx
+++ b/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;
diff --git a/src/components/palette-switch.tsx b/src/components/setting/palette-switch.tsx
similarity index 100%
rename from src/components/palette-switch.tsx
rename to src/components/setting/palette-switch.tsx
diff --git a/src/components/setting/setting-clash.tsx b/src/components/setting/setting-clash.tsx
index 97d5b8b..766d3e3 100644
--- a/src/components/setting/setting-clash.tsx
+++ b/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;
diff --git a/src/components/setting/setting-verge.tsx b/src/components/setting/setting-verge.tsx
index e3d51bb..ceb621a 100644
--- a/src/components/setting/setting-verge.tsx
+++ b/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;
diff --git a/src/components/sysproxy-tooltip.tsx b/src/components/setting/sysproxy-tooltip.tsx
similarity index 94%
rename from src/components/sysproxy-tooltip.tsx
rename to src/components/setting/sysproxy-tooltip.tsx
index 8654a3d..08b5633 100644
--- a/src/components/sysproxy-tooltip.tsx
+++ b/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);
   };
diff --git a/src/pages/_layout.tsx b/src/pages/_layout.tsx
index 16e5839..ed9b2e7 100644
--- a/src/pages/_layout.tsx
+++ b/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>
diff --git a/src/pages/profiles.tsx b/src/pages/profiles.tsx
index cbf8a3f..bef8314 100644
--- a/src/pages/profiles.tsx
+++ b/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}