refactor: clean code

ui/src/components/access/AccessEditDrawer.tsx

@@ -64,7 +64,7 @@ const AccessEditDrawer = ({ data, loading, trigger, scene, range, afterSubmit, .
 
         values = await updateAccess({ ...data, ...values });
       } else {
-        throw "Invalid props: `preset`";
+        throw "Invalid props: `scene`";
       }
 
       afterSubmit?.(values);

ui/src/components/provider/AccessProviderSelect.tsx

@@ -31,16 +31,16 @@ const AccessProviderSelect = ({ filter, showOptionTags, ...props }: AccessProvid
     );
   }, [filter]);
 
-  const showOptionTagsForDNS = useMemo(() => {
+  const showOptionTagForDNS = useMemo(() => {
     return typeof showOptionTags === "object" ? !!showOptionTags[ACCESS_USAGES.DNS] : !!showOptionTags;
   }, [showOptionTags]);
-  const showOptionTagsForHosting = useMemo(() => {
+  const showOptionTagForHosting = useMemo(() => {
     return typeof showOptionTags === "object" ? !!showOptionTags[ACCESS_USAGES.HOSTING] : !!showOptionTags;
   }, [showOptionTags]);
-  const showOptionTagsForCA = useMemo(() => {
+  const showOptionTagForCA = useMemo(() => {
     return typeof showOptionTags === "object" ? !!showOptionTags[ACCESS_USAGES.CA] : !!showOptionTags;
   }, [showOptionTags]);
-  const showOptionTagsForNotification = useMemo(() => {
+  const showOptionTagForNotification = useMemo(() => {
     return typeof showOptionTags === "object" ? !!showOptionTags[ACCESS_USAGES.NOTIFICATION] : !!showOptionTags;
   }, [showOptionTags]);
 
@@ -56,16 +56,16 @@ const AccessProviderSelect = ({ filter, showOptionTags, ...props }: AccessProvid
         </Space>
         {showOptionTags && (
           <div>
-            <Show when={showOptionTagsForDNS && provider.usages.includes(ACCESS_USAGES.DNS)}>
+            <Show when={showOptionTagForDNS && provider.usages.includes(ACCESS_USAGES.DNS)}>
               <Tag color="peru">{t("access.props.provider.usage.dns")}</Tag>
             </Show>
-            <Show when={showOptionTagsForHosting && provider.usages.includes(ACCESS_USAGES.HOSTING)}>
+            <Show when={showOptionTagForHosting && provider.usages.includes(ACCESS_USAGES.HOSTING)}>
               <Tag color="royalblue">{t("access.props.provider.usage.hosting")}</Tag>
             </Show>
-            <Show when={showOptionTagsForCA && provider.usages.includes(ACCESS_USAGES.CA)}>
+            <Show when={showOptionTagForCA && provider.usages.includes(ACCESS_USAGES.CA)}>
               <Tag color="crimson">{t("access.props.provider.usage.ca")}</Tag>
             </Show>
-            <Show when={showOptionTagsForNotification && provider.usages.includes(ACCESS_USAGES.NOTIFICATION)}>
+            <Show when={showOptionTagForNotification && provider.usages.includes(ACCESS_USAGES.NOTIFICATION)}>
               <Tag color="mediumaquamarine">{t("access.props.provider.usage.notification")}</Tag>
             </Show>
           </div>

ui/src/components/provider/ApplyDNSProviderPicker.tsx

@@ -1,4 +1,4 @@
-import { memo, useEffect, useRef, useState } from "react";
+import { memo, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Avatar, Card, Col, Empty, Flex, Input, type InputRef, Row, Typography } from "antd";
 
@@ -24,15 +24,16 @@ const ApplyDNSProviderPicker = ({ className, style, autoFocus, placeholder, onSe
     }
   }, []);
 
-  const providers = Array.from(applyDNSProvidersMap.values());
+  const providers = useMemo(() => {
-  const filteredProviders = providers.filter((provider) => {
+    return Array.from(applyDNSProvidersMap.values()).filter((provider) => {
-    if (keyword) {
+      if (keyword) {
-      const value = keyword.toLowerCase();
+        const value = keyword.toLowerCase();
-      return provider.type.toLowerCase().includes(value) || t(provider.name).toLowerCase().includes(value);
+        return provider.type.toLowerCase().includes(value) || t(provider.name).toLowerCase().includes(value);
-    }
+      }
 
-    return true;
+      return true;
-  });
+    });
+  }, [keyword]);
 
   const handleProviderTypeSelect = (value: string) => {
     onSelect?.(value);
@@ -40,12 +41,12 @@ const ApplyDNSProviderPicker = ({ className, style, autoFocus, placeholder, onSe
 
   return (
     <div className={className} style={style}>
-      <Input.Search ref={keywordInputRef} placeholder={placeholder} onChange={(e) => setKeyword(e.target.value.trim())} />
+      <Input.Search ref={keywordInputRef} placeholder={placeholder ?? t("common.text.search")} onChange={(e) => setKeyword(e.target.value.trim())} />
 
       <div className="mt-4">
-        <Show when={filteredProviders.length > 0} fallback={<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />}>
+        <Show when={providers.length > 0} fallback={<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />}>
           <Row gutter={[16, 16]}>
-            {filteredProviders.map((provider, index) => {
+            {providers.map((provider, index) => {
               return (
                 <Col key={index} xs={24} md={12} span={12}>
                   <Card

ui/src/components/provider/DeployProviderPicker.tsx

@@ -16,6 +16,8 @@ export type DeployProviderPickerProps = {
 const DeployProviderPicker = ({ className, style, autoFocus, placeholder, onSelect }: DeployProviderPickerProps) => {
   const { t } = useTranslation();
 
+  const [category, setCategory] = useState<string>(DEPLOY_CATEGORIES.ALL);
+
   const [keyword, setKeyword] = useState<string>();
   const keywordInputRef = useRef<InputRef>(null);
   useEffect(() => {
@@ -24,26 +26,24 @@ const DeployProviderPicker = ({ className, style, autoFocus, placeholder, onSele
     }
   }, []);
 
-  const [category, setCategory] = useState<string>(DEPLOY_CATEGORIES.ALL);
-
   const providers = useMemo(() => {
     return Array.from(deployProvidersMap.values())
+      .filter((provider) => {
+        if (category && category !== DEPLOY_CATEGORIES.ALL) {
+          return provider.category === category;
+        }
+
+        return true;
+      })
       .filter((provider) => {
         if (keyword) {
           const value = keyword.toLowerCase();
           return provider.type.toLowerCase().includes(value) || t(provider.name).toLowerCase().includes(value);
         }
 
-        return true;
-      })
-      .filter((provider) => {
-        if (category && category !== DEPLOY_CATEGORIES.ALL) {
-          return provider.category === category;
-        }
-
         return true;
       });
-  }, [keyword, category]);
+  }, [category, keyword]);
 
   const handleProviderTypeSelect = (value: string) => {
     onSelect?.(value);
@@ -51,7 +51,7 @@ const DeployProviderPicker = ({ className, style, autoFocus, placeholder, onSele
 
   return (
     <div className={className} style={style}>
-      <Input.Search ref={keywordInputRef} placeholder={placeholder} onChange={(e) => setKeyword(e.target.value.trim())} />
+      <Input.Search ref={keywordInputRef} placeholder={placeholder ?? t("common.text.search")} onChange={(e) => setKeyword(e.target.value.trim())} />
 
       <div className="mt-4">
         <Flex>

ui/src/i18n/locales/en/nls.common.json

@@ -16,6 +16,7 @@
   "common.text.operation_succeeded": "Operation succeeded",
   "common.text.operation_failed": "Operation failed",
   "common.text.request_error": "Request error",
+  "common.text.search": "Search ...",
 
   "common.menu.theme": "Change theme",
   "common.menu.locale": "Change language",

ui/src/i18n/locales/zh/nls.common.json

@@ -16,6 +16,7 @@
   "common.text.operation_succeeded": "操作成功",
   "common.text.operation_failed": "操作失败",
   "common.text.request_error": "请求错误",
+  "common.text.search": "搜索 ……",
 
   "common.menu.theme": "切换主题",
   "common.menu.locale": "切换语言",