From 6f1a375feea5c29a99a89b4436fe224134d88596 Mon Sep 17 00:00:00 2001 From: Fu Diwei Date: Sun, 5 Jan 2025 22:59:00 +0800 Subject: [PATCH] refactor: clean code --- .../access/AccessEditFormKubernetesConfig.tsx | 7 +++---- .../components/access/AccessEditFormSSHConfig.tsx | 7 +++---- ui/src/pages/settings/SettingsSSLProvider.tsx | 13 ++++++------- ui/src/pages/workflows/WorkflowDetail.tsx | 3 +-- 4 files changed, 13 insertions(+), 17 deletions(-) diff --git a/ui/src/components/access/AccessEditFormKubernetesConfig.tsx b/ui/src/components/access/AccessEditFormKubernetesConfig.tsx index a001c176..b5b4a74a 100644 --- a/ui/src/components/access/AccessEditFormKubernetesConfig.tsx +++ b/ui/src/components/access/AccessEditFormKubernetesConfig.tsx @@ -1,7 +1,6 @@ -import { useState } from "react"; +import { useEffect, useState } from "react"; import { useTranslation } from "react-i18next"; import { UploadOutlined as UploadOutlinedIcon } from "@ant-design/icons"; -import { useDeepCompareEffect } from "ahooks"; import { Button, Form, type FormInstance, Input, Upload, type UploadFile, type UploadProps } from "antd"; import { createSchemaFieldRule } from "antd-zod"; import { z } from "zod"; @@ -37,9 +36,9 @@ const AccessEditFormKubernetesConfig = ({ form, formName, disabled, initialValue const fieldKubeConfig = Form.useWatch("kubeConfig", form); const [fieldKubeFileList, setFieldKubeFileList] = useState([]); - useDeepCompareEffect(() => { + useEffect(() => { setFieldKubeFileList(initialValues?.kubeConfig?.trim() ? [{ uid: "-1", name: "kubeconfig", status: "done" }] : []); - }, [initialValues]); + }, [initialValues?.kubeConfig]); const handleFormChange = (_: unknown, values: z.infer) => { onValuesChange?.(values as AccessEditFormKubernetesConfigFieldValues); diff --git a/ui/src/components/access/AccessEditFormSSHConfig.tsx b/ui/src/components/access/AccessEditFormSSHConfig.tsx index b5902939..bee5f3e8 100644 --- a/ui/src/components/access/AccessEditFormSSHConfig.tsx +++ b/ui/src/components/access/AccessEditFormSSHConfig.tsx @@ -1,7 +1,6 @@ -import { useState } from "react"; +import { useEffect, useState } from "react"; import { useTranslation } from "react-i18next"; import { UploadOutlined as UploadOutlinedIcon } from "@ant-design/icons"; -import { useDeepCompareEffect } from "ahooks"; import { Button, Form, type FormInstance, Input, InputNumber, Upload, type UploadFile, type UploadProps } from "antd"; import { createSchemaFieldRule } from "antd-zod"; import { z } from "zod"; @@ -62,9 +61,9 @@ const AccessEditFormSSHConfig = ({ form, formName, disabled, initialValues, onVa const fieldKey = Form.useWatch("key", form); const [fieldKeyFileList, setFieldKeyFileList] = useState([]); - useDeepCompareEffect(() => { + useEffect(() => { setFieldKeyFileList(initialValues?.key?.trim() ? [{ uid: "-1", name: "sshkey", status: "done" }] : []); - }, [initialValues]); + }, [initialValues?.key]); const handleFormChange = (_: unknown, values: z.infer) => { onValuesChange?.(values as AccessEditFormSSHConfigFieldValues); diff --git a/ui/src/pages/settings/SettingsSSLProvider.tsx b/ui/src/pages/settings/SettingsSSLProvider.tsx index b0ba995e..f9f71c0c 100644 --- a/ui/src/pages/settings/SettingsSSLProvider.tsx +++ b/ui/src/pages/settings/SettingsSSLProvider.tsx @@ -1,7 +1,6 @@ import { createContext, useContext, useEffect, useMemo, useState } from "react"; import { useTranslation } from "react-i18next"; import { CheckCard } from "@ant-design/pro-components"; -import { useDeepCompareEffect } from "ahooks"; import { Button, Form, Input, Skeleton, message, notification } from "antd"; import { createSchemaFieldRule } from "antd-zod"; import { produce } from "immer"; @@ -43,9 +42,9 @@ const SSLProviderEditFormLetsEncryptConfig = () => { }); const [formChanged, setFormChanged] = useState(false); - useDeepCompareEffect(() => { + useEffect(() => { setFormChanged(settings?.content?.provider !== SSLPROVIDERS.LETS_ENCRYPT); - }, [settings]); + }, [settings?.content?.provider]); const handleFormChange = () => { setFormChanged(true); @@ -95,9 +94,9 @@ const SSLProviderEditFormZeroSSLConfig = () => { }); const [formChanged, setFormChanged] = useState(false); - useDeepCompareEffect(() => { + useEffect(() => { setFormChanged(settings?.content?.provider !== SSLPROVIDERS.ZERO_SSL); - }, [settings]); + }, [settings?.content?.provider]); const handleFormChange = () => { setFormChanged(true); @@ -165,9 +164,9 @@ const SSLProviderEditFormGoogleTrustServicesConfig = () => { }); const [formChanged, setFormChanged] = useState(false); - useDeepCompareEffect(() => { + useEffect(() => { setFormChanged(settings?.content?.provider !== SSLPROVIDERS.GOOGLE_TRUST_SERVICES); - }, [settings]); + }, [settings?.content?.provider]); const handleFormChange = () => { setFormChanged(true); diff --git a/ui/src/pages/workflows/WorkflowDetail.tsx b/ui/src/pages/workflows/WorkflowDetail.tsx index 242ff9f7..aed9f7ac 100644 --- a/ui/src/pages/workflows/WorkflowDetail.tsx +++ b/ui/src/pages/workflows/WorkflowDetail.tsx @@ -11,7 +11,6 @@ import { UndoOutlined as UndoOutlinedIcon, } from "@ant-design/icons"; import { PageHeader } from "@ant-design/pro-components"; -import { useDeepCompareEffect } from "ahooks"; import { Alert, Button, Card, Dropdown, Form, Input, Modal, Space, Tabs, Typography, message, notification } from "antd"; import { createSchemaFieldRule } from "antd-zod"; import { ClientResponseError } from "pocketbase"; @@ -58,7 +57,7 @@ const WorkflowDetail = () => { const [allowDiscard, setAllowDiscard] = useState(false); const [allowRelease, setAllowRelease] = useState(false); const [allowRun, setAllowRun] = useState(false); - useDeepCompareEffect(() => { + useEffect(() => { const hasReleased = !!workflow.content; const hasChanges = workflow.hasDraft! || !isEqual(workflow.draft, workflow.content); setAllowDiscard(!isRunning && hasReleased && hasChanges);