refactor: clean code

This commit is contained in:
Fu Diwei 2024-12-18 10:20:32 +08:00
parent df71782719
commit 2374bb56fa
11 changed files with 40 additions and 27 deletions

View File

@ -1,6 +1,7 @@
import { useEffect, useLayoutEffect, useState } from "react";
import { RouterProvider } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { useCreation } from "ahooks";
import { App, ConfigProvider, theme, type ThemeConfig } from "antd";
import { type Locale } from "antd/es/locale";
import AntdLocaleEnUs from "antd/locale/en_US";
@ -9,30 +10,36 @@ import dayjs from "dayjs";
import "dayjs/locale/zh-cn";
import { localeNames } from "./i18n";
import { useTheme } from "./hooks";
import { useBrowserTheme } from "./hooks";
import { router } from "./router.tsx";
const RootApp = () => {
const { i18n } = useTranslation();
const { theme: browserTheme } = useTheme();
const { theme: browserTheme } = useBrowserTheme();
const antdLocalesMap: Record<string, Locale> = {
[localeNames.ZH]: AntdLocaleZhCN,
[localeNames.EN]: AntdLocaleEnUs,
};
const antdLocalesMap: Record<string, Locale> = useCreation(
() => ({
[localeNames.ZH]: AntdLocaleZhCN,
[localeNames.EN]: AntdLocaleEnUs,
}),
[]
);
const [antdLocale, setAntdLocale] = useState(antdLocalesMap[i18n.language]);
const handleLanguageChanged = () => {
setAntdLocale(antdLocalesMap[i18n.language]);
dayjs.locale(i18n.language);
};
i18n.on("languageChanged", handleLanguageChanged);
useLayoutEffect(handleLanguageChanged, [i18n]);
useLayoutEffect(handleLanguageChanged, [antdLocalesMap, i18n]);
const antdThemesMap: Record<string, ThemeConfig> = {
["light"]: { algorithm: theme.defaultAlgorithm },
["dark"]: { algorithm: theme.darkAlgorithm },
};
const antdThemesMap: Record<string, ThemeConfig> = useCreation(
() => ({
["light"]: { algorithm: theme.defaultAlgorithm },
["dark"]: { algorithm: theme.darkAlgorithm },
}),
[]
);
const [antdTheme, setAntdTheme] = useState(antdThemesMap[browserTheme]);
useEffect(() => {
setAntdTheme(antdThemesMap[browserTheme]);
@ -40,7 +47,7 @@ const RootApp = () => {
const root = window.document.documentElement;
root.classList.remove("light", "dark");
root.classList.add(browserTheme);
}, [browserTheme]);
}, [antdThemesMap, browserTheme]);
return (
<ConfigProvider

View File

@ -5,6 +5,7 @@ import { Modal, notification } from "antd";
import { type AccessModel } from "@/domain/access";
import { useAccessStore } from "@/stores/access";
import { getErrMsg } from "@/utils/error";
import AccessEditForm, { type AccessEditFormInstance } from "./AccessEditForm";
export type AccessEditModalProps = {
@ -72,7 +73,7 @@ const AccessEditModal = ({ data, loading, mode, trigger, ...props }: AccessEditM
setOpen(false);
} catch (err) {
notificationApi.error({ message: t("common.text.request_error"), description: <>{String(err)}</> });
notificationApi.error({ message: t("common.text.request_error"), description: <>{getErrMsg(err)}</> });
throw err;
} finally {

View File

@ -1,3 +1,3 @@
import useTheme from "./useTheme";
import useBrowserTheme from "./useBrowserTheme";
export { useTheme };
export { useBrowserTheme };

View File

@ -16,7 +16,7 @@ import {
} from "lucide-react";
import Version from "@/components/Version";
import { useTheme } from "@/hooks";
import { useBrowserTheme } from "@/hooks";
import { getPocketBase } from "@/repository/pocketbase";
const ConsoleLayout = () => {
@ -182,7 +182,7 @@ const SiderMenu = memo(({ onSelect }: { onSelect?: (key: string) => void }) => {
const ThemeToggleButton = memo(({ size }: { size?: ButtonProps["size"] }) => {
const { t } = useTranslation();
const { theme, setThemeMode } = useTheme();
const { theme, setThemeMode } = useBrowserTheme();
const items: Required<MenuProps>["items"] = [
["light", t("common.theme.light")],

View File

@ -9,6 +9,7 @@ import { ClientResponseError } from "pocketbase";
import AccessEditModal from "@/components/access/AccessEditModal";
import { accessProvidersMap, type AccessModel } from "@/domain/access";
import { useAccessStore } from "@/stores/access";
import { getErrMsg } from "@/utils/error";
const AccessList = () => {
const { t } = useTranslation();
@ -119,7 +120,7 @@ const AccessList = () => {
}
console.error(err);
notificationApi.error({ message: t("common.text.request_error"), description: <>{String(err)}</> });
notificationApi.error({ message: t("common.text.request_error"), description: <>{getErrMsg(err)}</> });
});
}, []);
@ -140,7 +141,7 @@ const AccessList = () => {
}
console.error(err);
notificationApi.error({ message: t("common.text.request_error"), description: <>{String(err)}</> });
notificationApi.error({ message: t("common.text.request_error"), description: <>{getErrMsg(err)}</> });
} finally {
setLoading(false);
}
@ -160,7 +161,7 @@ const AccessList = () => {
await deleteAccess(data);
} catch (err) {
console.error(err);
notificationApi.error({ message: t("common.text.request_error"), description: <>{String(err)}</> });
notificationApi.error({ message: t("common.text.request_error"), description: <>{getErrMsg(err)}</> });
}
},
});

View File

@ -10,6 +10,7 @@ import { ClientResponseError } from "pocketbase";
import CertificateDetailDrawer from "@/components/certificate/CertificateDetailDrawer";
import { CertificateModel } from "@/domain/certificate";
import { list as listCertificate, type CertificateListReq } from "@/repository/certificate";
import { getErrMsg } from "@/utils/error";
const CertificateList = () => {
const navigate = useNavigate();
@ -195,7 +196,7 @@ const CertificateList = () => {
}
console.error(err);
notificationApi.error({ message: t("common.text.request_error"), description: <>{String(err)}</> });
notificationApi.error({ message: t("common.text.request_error"), description: <>{getErrMsg(err)}</> });
} finally {
setLoading(false);
}

View File

@ -14,6 +14,7 @@ import { ClientResponseError } from "pocketbase";
import { type Statistics } from "@/domain/statistics";
import { get as getStatistics } from "@/api/statistics";
import { getErrMsg } from "@/utils/error";
const Dashboard = () => {
const navigate = useNavigate();
@ -49,7 +50,7 @@ const Dashboard = () => {
}
console.error(err);
notificationApi.error({ message: t("common.text.request_error"), description: <>{String(err)}</> });
notificationApi.error({ message: t("common.text.request_error"), description: <>{getErrMsg(err)}</> });
} finally {
setLoading(false);
}

View File

@ -6,6 +6,7 @@ import { createSchemaFieldRule } from "antd-zod";
import { z } from "zod";
import { getPocketBase } from "@/repository/pocketbase";
import { getErrMsg } from "@/utils/error";
const Login = () => {
const navigage = useNavigate();
@ -29,7 +30,7 @@ const Login = () => {
await getPocketBase().admins.authWithPassword(fields.username, fields.password);
navigage("/");
} catch (err) {
notificationApi.error({ message: t("common.text.request_error"), description: <>{String(err)}</> });
notificationApi.error({ message: t("common.text.request_error"), description: <>{getErrMsg(err)}</> });
} finally {
setFormPending(false);
}

View File

@ -25,6 +25,7 @@ import { ClientResponseError } from "pocketbase";
import { WorkflowModel } from "@/domain/workflow";
import { list as listWorkflow, remove as removeWorkflow, save as saveWorkflow } from "@/repository/workflow";
import { getErrMsg } from "@/utils/error";
const WorkflowList = () => {
const navigate = useNavigate();
@ -227,7 +228,7 @@ const WorkflowList = () => {
}
console.error(err);
notificationApi.error({ message: t("common.text.request_error"), description: <>{String(err)}</> });
notificationApi.error({ message: t("common.text.request_error"), description: <>{getErrMsg(err)}</> });
} finally {
setLoading(false);
}
@ -255,7 +256,7 @@ const WorkflowList = () => {
}
} catch (err) {
console.error(err);
notificationApi.error({ message: t("common.text.request_error"), description: <>{String(err)}</> });
notificationApi.error({ message: t("common.text.request_error"), description: <>{getErrMsg(err)}</> });
}
};
@ -271,7 +272,7 @@ const WorkflowList = () => {
}
} catch (err) {
console.error(err);
notificationApi.error({ message: t("common.text.request_error"), description: <>{String(err)}</> });
notificationApi.error({ message: t("common.text.request_error"), description: <>{getErrMsg(err)}</> });
}
},
});

View File

@ -11,5 +11,5 @@ export const getErrMsg = (error: unknown): string => {
return error;
}
return "Something went wrong";
return String(error ?? "Unknown error");
};