refactor: clean code

2025-01-05 17:19:57 +08:00
parent dfc192cb68
commit e4c51aece4
18 changed files with 169 additions and 148 deletions
--- a/ui/src/pages/ConsoleLayout.tsx
+++ b/ui/src/pages/ConsoleLayout.tsx
@@ -1,6 +1,6 @@
 import { memo, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Link, Navigate, Outlet, useLocation, useNavigate } from "react-router-dom";
+import { Navigate, Outlet, useLocation, useNavigate } from "react-router-dom";
 import {
  CloudServerOutlined as CloudServerOutlinedIcon,
  GlobalOutlined as GlobalOutlinedIcon,
@@ -16,7 +16,7 @@ import {
 import { Button, type ButtonProps, Drawer, Dropdown, Layout, Menu, type MenuProps, Tooltip, theme } from "antd";

 import Version from "@/components/Version";
-import { useBrowserTheme } from "@/hooks";
+import { useBrowserTheme, useTriggerElement } from "@/hooks";
 import { getPocketBase } from "@/repository/pocketbase";

 const ConsoleLayout = () => {
@@ -26,16 +26,6 @@ const ConsoleLayout = () => {

  const { token: themeToken } = theme.useToken();

-  const [siderOpen, setSiderOpen] = useState(false);
-
-  const handleSiderOpen = () => {
-    setSiderOpen(true);
-  };
-
-  const handleSiderClose = () => {
-    setSiderOpen(false);
-  };
-
  const handleLogoutClick = () => {
    auth.clear();
    navigate("/login");
@@ -67,20 +57,7 @@ const ConsoleLayout = () => {
        <Layout.Header className="sticky inset-x-0 top-0 z-[19] p-0 shadow-sm" style={{ background: themeToken.colorBgContainer }}>
          <div className="flex size-full items-center justify-between overflow-hidden px-4">
            <div className="flex items-center gap-4">
-              <Button className="md:hidden" icon={<MenuOutlinedIcon />} size="large" onClick={handleSiderOpen} />
-              <Drawer
-                closable={false}
-                destroyOnClose
-                open={siderOpen}
-                placement="left"
-                styles={{
-                  content: { paddingTop: themeToken.paddingSM, paddingBottom: themeToken.paddingSM },
-                  body: { padding: 0 },
-                }}
-                onClose={handleSiderClose}
-              >
-                <SiderMenu onSelect={() => handleSiderClose()} />
-              </Drawer>
+              <SiderMenuDrawer trigger={<Button className="md:hidden" icon={<MenuOutlinedIcon />} size="large" />} />
            </div>
            <div className="flex size-full grow items-center justify-end gap-4 overflow-hidden">
              <Tooltip title={t("common.menu.theme")} mouseEnterDelay={2}>
@@ -159,10 +136,10 @@ const SiderMenu = memo(({ onSelect }: { onSelect?: (key: string) => void }) => {

  return (
    <>
-      <Link to="/" className="flex w-full items-center gap-2 overflow-hidden px-4 font-semibold">
+      <div className="flex w-full items-center gap-2 overflow-hidden px-4 font-semibold">
        <img src="/logo.svg" className="size-[36px]" />
        <span className="h-[64px] w-[74px] truncate leading-[64px] dark:text-white">Certimate</span>
-      </Link>
+      </div>
      <div className="w-full grow overflow-y-auto overflow-x-hidden">
        <Menu
          items={menuItems}
@@ -177,6 +154,34 @@ const SiderMenu = memo(({ onSelect }: { onSelect?: (key: string) => void }) => {
  );
 });

+const SiderMenuDrawer = memo(({ trigger }: { trigger: React.ReactNode }) => {
+  const { token: themeToken } = theme.useToken();
+
+  const [siderOpen, setSiderOpen] = useState(false);
+
+  const triggerEl = useTriggerElement(trigger, { onClick: () => setSiderOpen(true) });
+
+  return (
+    <>
+      {triggerEl}
+
+      <Drawer
+        closable={false}
+        destroyOnClose
+        open={siderOpen}
+        placement="left"
+        styles={{
+          content: { paddingTop: themeToken.paddingSM, paddingBottom: themeToken.paddingSM },
+          body: { padding: 0 },
+        }}
+        onClose={() => setSiderOpen(false)}
+      >
+        <SiderMenu onSelect={() => setSiderOpen(false)} />
+      </Drawer>
+    </>
+  );
+});
+
 const ThemeToggleButton = memo(({ size }: { size?: ButtonProps["size"] }) => {
  const { t } = useTranslation();

--- a/ui/src/pages/workflows/WorkflowDetail.tsx
+++ b/ui/src/pages/workflows/WorkflowDetail.tsx
@@ -23,7 +23,7 @@ import ModalForm from "@/components/ModalForm";
 import Show from "@/components/Show";
 import WorkflowElements from "@/components/workflow/WorkflowElements";
 import WorkflowRuns from "@/components/workflow/WorkflowRuns";
-import { type WorkflowModel, isAllNodesValidated } from "@/domain/workflow";
+import { isAllNodesValidated } from "@/domain/workflow";
 import { useAntdForm, useZustandShallowSelector } from "@/hooks";
 import { remove as removeWorkflow } from "@/repository/workflow";
 import { useWorkflowStore } from "@/stores/workflow";
@@ -40,7 +40,7 @@ const WorkflowDetail = () => {

  const { id: workflowId } = useParams();
  const { workflow, initialized, ...workflowState } = useWorkflowStore(
-    useZustandShallowSelector(["workflow", "initialized", "init", "destroy", "setBaseInfo", "setEnabled", "release", "discard"])
+    useZustandShallowSelector(["workflow", "initialized", "init", "destroy", "setEnabled", "release", "discard"])
  );
  useEffect(() => {
    // TODO: loading & error
@@ -66,16 +66,6 @@ const WorkflowDetail = () => {
    setAllowRun(hasReleased);
  }, [workflow.content, workflow.draft, workflow.hasDraft, isRunning]);

-  const handleBaseInfoFormFinish = async (values: Pick<WorkflowModel, "name" | "description">) => {
-    try {
-      await workflowState.setBaseInfo(values.name!, values.description!);
-    } catch (err) {
-      console.error(err);
-      notificationApi.error({ message: t("common.text.request_error"), description: getErrMsg(err) });
-      return false;
-    }
-  };
-
  const handleEnableChange = async () => {
    if (!workflow.enabled && (!workflow.content || !isAllNodesValidated(workflow.content))) {
      messageApi.warning(t("workflow.action.enable.failed.uncompleted"));
@@ -194,12 +184,7 @@ const WorkflowDetail = () => {
          extra={
            initialized
              ? [
-                  <WorkflowBaseInfoModalForm
-                    key="edit"
-                    data={workflow}
-                    trigger={<Button>{t("common.button.edit")}</Button>}
-                    onFinish={handleBaseInfoFormFinish}
-                  />,
+                  <WorkflowBaseInfoModal key="edit" trigger={<Button>{t("common.button.edit")}</Button>} />,

                  <Button key="enable" onClick={handleEnableChange}>
                    {workflow.enabled ? t("workflow.action.disable") : t("workflow.action.enable")}
@@ -301,17 +286,13 @@ const WorkflowDetail = () => {
  );
 };

-const WorkflowBaseInfoModalForm = ({
-  data,
-  trigger,
-  onFinish,
-}: {
-  data: Pick<WorkflowModel, "name" | "description">;
-  trigger?: React.ReactNode;
-  onFinish?: (values: Pick<WorkflowModel, "name" | "description">) => Promise<void | boolean>;
-}) => {
+const WorkflowBaseInfoModal = ({ trigger }: { trigger?: React.ReactNode }) => {
  const { t } = useTranslation();

+  const [notificationApi, NotificationContextHolder] = notification.useNotification();
+
+  const { workflow, ...workflowState } = useWorkflowStore(useZustandShallowSelector(["workflow", "setBaseInfo"]));
+
  const formSchema = z.object({
    name: z
      .string({ message: t("workflow.detail.baseinfo.form.name.placeholder") })
@@ -331,11 +312,15 @@ const WorkflowBaseInfoModalForm = ({
    formProps,
    ...formApi
  } = useAntdForm<z.infer<typeof formSchema>>({
-    initialValues: data,
-    onSubmit: async () => {
-      const ret = await onFinish?.(formInst.getFieldsValue(true));
-      if (ret != null && !ret) return false;
-      return true;
+    initialValues: { name: workflow.name, description: workflow.description },
+    onSubmit: async (values) => {
+      try {
+        await workflowState.setBaseInfo(values.name!, values.description!);
+      } catch (err) {
+        console.error(err);
+        notificationApi.error({ message: t("common.text.request_error"), description: getErrMsg(err) });
+        return false;
+      }
    },
  });

@@ -344,26 +329,30 @@ const WorkflowBaseInfoModalForm = ({
  };

  return (
-    <ModalForm
-      disabled={formPending}
-      layout="vertical"
-      form={formInst}
-      modalProps={{ destroyOnClose: true }}
-      okText={t("common.button.save")}
-      title={t(`workflow.detail.baseinfo.modal.title`)}
-      trigger={trigger}
-      width={480}
-      {...formProps}
-      onFinish={handleFormFinish}
-    >
-      <Form.Item name="name" label={t("workflow.detail.baseinfo.form.name.label")} rules={[formRule]}>
-        <Input placeholder={t("workflow.detail.baseinfo.form.name.placeholder")} />
-      </Form.Item>
+    <>
+      {NotificationContextHolder}

-      <Form.Item name="description" label={t("workflow.detail.baseinfo.form.description.label")} rules={[formRule]}>
-        <Input placeholder={t("workflow.detail.baseinfo.form.description.placeholder")} />
-      </Form.Item>
-    </ModalForm>
+      <ModalForm
+        disabled={formPending}
+        layout="vertical"
+        form={formInst}
+        modalProps={{ destroyOnClose: true }}
+        okText={t("common.button.save")}
+        title={t(`workflow.detail.baseinfo.modal.title`)}
+        trigger={trigger}
+        width={480}
+        {...formProps}
+        onFinish={handleFormFinish}
+      >
+        <Form.Item name="name" label={t("workflow.detail.baseinfo.form.name.label")} rules={[formRule]}>
+          <Input placeholder={t("workflow.detail.baseinfo.form.name.placeholder")} />
+        </Form.Item>
+
+        <Form.Item name="description" label={t("workflow.detail.baseinfo.form.description.label")} rules={[formRule]}>
+          <Input placeholder={t("workflow.detail.baseinfo.form.description.placeholder")} />
+        </Form.Item>
+      </ModalForm>
+    </>
  );
 };