refactor: clean code

ui/src/App.tsx

@@ -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> = {
+  const antdLocalesMap: Record<string, Locale> = useCreation(
-    [localeNames.ZH]: AntdLocaleZhCN,
+    () => ({
-    [localeNames.EN]: AntdLocaleEnUs,
+      [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> = {
+  const antdThemesMap: Record<string, ThemeConfig> = useCreation(
-    ["light"]: { algorithm: theme.defaultAlgorithm },
+    () => ({
-    ["dark"]: { algorithm: theme.darkAlgorithm },
+      ["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

ui/src/components/access/AccessEditModal.tsx

@@ -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 {

ui/src/hooks/index.ts

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

ui/src/pages/ConsoleLayout.tsx

@@ -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")],

ui/src/pages/accesses/AccessList.tsx

@@ -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)}</> });
         }
       },
     });

ui/src/pages/certificates/CertificateList.tsx

@@ -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);
     }

ui/src/pages/dashboard/Dashboard.tsx

@@ -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);
     }

ui/src/pages/login/Login.tsx

@@ -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);
     }

ui/src/pages/workflows/WorkflowList.tsx

@@ -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)}</> });
         }
       },
     });

ui/src/utils/error.ts

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