fix: unified switch style
This commit is contained in:
97
src/components/setting/mods/service-switcher.tsx
Normal file
97
src/components/setting/mods/service-switcher.tsx
Normal file
@@ -0,0 +1,97 @@
|
||||
import { KeyedMutator } from "swr";
|
||||
import { useState } from "react";
|
||||
import { useLockFn } from "ahooks";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { installService, uninstallService } from "@/services/cmds";
|
||||
import { Notice } from "@/components/base";
|
||||
import { LoadingButton } from "@mui/lab";
|
||||
|
||||
interface Props {
|
||||
status: "active" | "installed" | "unknown" | "uninstall";
|
||||
mutate: KeyedMutator<"active" | "installed" | "unknown" | "uninstall">;
|
||||
patchVerge: (value: Partial<IVergeConfig>) => Promise<void>;
|
||||
onChangeData: (patch: Partial<IVergeConfig>) => void;
|
||||
}
|
||||
|
||||
export const ServiceSwitcher = (props: Props) => {
|
||||
const { status, mutate, patchVerge, onChangeData } = props;
|
||||
|
||||
const isActive = status === "active";
|
||||
const isInstalled = status === "installed";
|
||||
const isUninstall = status === "uninstall" || status === "unknown";
|
||||
|
||||
const { t } = useTranslation();
|
||||
const [serviceLoading, setServiceLoading] = useState(false);
|
||||
const [uninstallServiceLoaing, setUninstallServiceLoading] = useState(false);
|
||||
|
||||
const onInstallOrEnableService = useLockFn(async () => {
|
||||
setServiceLoading(true);
|
||||
try {
|
||||
if (isUninstall) {
|
||||
// install service
|
||||
await installService();
|
||||
await mutate();
|
||||
setTimeout(() => {
|
||||
mutate();
|
||||
}, 2000);
|
||||
Notice.success(t("Service Installed Successfully"));
|
||||
setServiceLoading(false);
|
||||
} else {
|
||||
// enable or disable service
|
||||
await patchVerge({ enable_service_mode: !isActive });
|
||||
onChangeData({ enable_service_mode: !isActive });
|
||||
await mutate();
|
||||
setTimeout(() => {
|
||||
mutate();
|
||||
}, 2000);
|
||||
setServiceLoading(false);
|
||||
}
|
||||
} catch (err: any) {
|
||||
await mutate();
|
||||
Notice.error(err.message || err.toString());
|
||||
setServiceLoading(false);
|
||||
}
|
||||
});
|
||||
|
||||
const onUninstallService = useLockFn(async () => {
|
||||
setUninstallServiceLoading(true);
|
||||
try {
|
||||
await uninstallService();
|
||||
await mutate();
|
||||
setTimeout(() => {
|
||||
mutate();
|
||||
}, 2000);
|
||||
Notice.success(t("Service Uninstalled Successfully"));
|
||||
setUninstallServiceLoading(false);
|
||||
} catch (err: any) {
|
||||
await mutate();
|
||||
Notice.error(err.message || err.toString());
|
||||
setUninstallServiceLoading(false);
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<LoadingButton
|
||||
size="small"
|
||||
variant={isUninstall ? "outlined" : "contained"}
|
||||
onClick={onInstallOrEnableService}
|
||||
loading={serviceLoading}
|
||||
>
|
||||
{isActive ? t("Disable") : isInstalled ? t("Enable") : t("Install")}
|
||||
</LoadingButton>
|
||||
{isInstalled && (
|
||||
<LoadingButton
|
||||
size="small"
|
||||
variant="outlined"
|
||||
color="error"
|
||||
sx={{ ml: 1 }}
|
||||
onClick={onUninstallService}
|
||||
loading={uninstallServiceLoaing}
|
||||
>
|
||||
{t("Uninstall")}
|
||||
</LoadingButton>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -1,129 +0,0 @@
|
||||
import useSWR from "swr";
|
||||
import { forwardRef, useImperativeHandle, useState } from "react";
|
||||
import { useLockFn } from "ahooks";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Button, Stack, Typography } from "@mui/material";
|
||||
import {
|
||||
checkService,
|
||||
installService,
|
||||
uninstallService,
|
||||
patchVergeConfig,
|
||||
} from "@/services/cmds";
|
||||
import { BaseDialog, DialogRef, Notice } from "@/components/base";
|
||||
|
||||
interface Props {
|
||||
enable: boolean;
|
||||
}
|
||||
|
||||
export const ServiceViewer = forwardRef<DialogRef, Props>((props, ref) => {
|
||||
const { enable } = props;
|
||||
|
||||
const { t } = useTranslation();
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
const { data: status, mutate: mutateCheck } = useSWR(
|
||||
"checkService",
|
||||
checkService,
|
||||
{
|
||||
revalidateIfStale: false,
|
||||
shouldRetryOnError: false,
|
||||
focusThrottleInterval: 36e5, // 1 hour
|
||||
}
|
||||
);
|
||||
|
||||
useImperativeHandle(ref, () => ({
|
||||
open: () => setOpen(true),
|
||||
close: () => setOpen(false),
|
||||
}));
|
||||
|
||||
const state = status != null ? status : "pending";
|
||||
|
||||
const onInstall = useLockFn(async () => {
|
||||
try {
|
||||
await installService();
|
||||
await mutateCheck();
|
||||
setOpen(false);
|
||||
setTimeout(() => {
|
||||
mutateCheck();
|
||||
}, 2000);
|
||||
Notice.success(t("Service Installed Successfully"));
|
||||
} catch (err: any) {
|
||||
mutateCheck();
|
||||
Notice.error(err.message || err.toString());
|
||||
}
|
||||
});
|
||||
|
||||
const onUninstall = useLockFn(async () => {
|
||||
try {
|
||||
if (enable) {
|
||||
await patchVergeConfig({ enable_service_mode: false });
|
||||
}
|
||||
|
||||
await uninstallService();
|
||||
mutateCheck();
|
||||
setOpen(false);
|
||||
Notice.success(t("Service Uninstalled Successfully"));
|
||||
} catch (err: any) {
|
||||
mutateCheck();
|
||||
Notice.error(err.message || err.toString());
|
||||
}
|
||||
});
|
||||
|
||||
// fix unhandled error of the service mode
|
||||
const onDisable = useLockFn(async () => {
|
||||
try {
|
||||
await patchVergeConfig({ enable_service_mode: false });
|
||||
mutateCheck();
|
||||
setOpen(false);
|
||||
} catch (err: any) {
|
||||
mutateCheck();
|
||||
Notice.error(err.message || err.toString());
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<BaseDialog
|
||||
open={open}
|
||||
title={t("Service Mode")}
|
||||
contentSx={{ width: 360, userSelect: "text" }}
|
||||
disableFooter
|
||||
onClose={() => setOpen(false)}
|
||||
>
|
||||
<Typography>
|
||||
{t("Current State")}: {t(state)}
|
||||
</Typography>
|
||||
|
||||
{(state === "unknown" || state === "uninstall") && (
|
||||
<Typography>
|
||||
{t(
|
||||
"Information: Please make sure that the Clash Verge Service is installed and enabled"
|
||||
)}
|
||||
</Typography>
|
||||
)}
|
||||
|
||||
<Stack
|
||||
direction="row"
|
||||
spacing={1}
|
||||
sx={{ mt: 4, justifyContent: "flex-end" }}
|
||||
>
|
||||
{state === "uninstall" && enable && (
|
||||
<Button variant="contained" onClick={onDisable}>
|
||||
{t("Disable Service Mode")}
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{state === "uninstall" && (
|
||||
<Button variant="contained" onClick={onInstall}>
|
||||
{t("Install")}
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{(state === "active" || state === "installed") && (
|
||||
<Button variant="outlined" onClick={onUninstall}>
|
||||
{t("Uninstall")}
|
||||
</Button>
|
||||
)}
|
||||
</Stack>
|
||||
</BaseDialog>
|
||||
);
|
||||
});
|
||||
Reference in New Issue
Block a user