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}
--
GitLab