refactor: clean code
This commit is contained in:
@@ -3,9 +3,9 @@ import { useTranslation } from "react-i18next";
|
||||
import { Avatar, Card, Col, Empty, Flex, Input, type InputRef, Row, Typography } from "antd";
|
||||
|
||||
import Show from "@/components/Show";
|
||||
import { applyDNSProvidersMap } from "@/domain/provider";
|
||||
import { acmeDns01ProvidersMap } from "@/domain/provider";
|
||||
|
||||
export type ApplyDNSProviderPickerProps = {
|
||||
export type AcmeDns01ProviderPickerProps = {
|
||||
className?: string;
|
||||
style?: React.CSSProperties;
|
||||
autoFocus?: boolean;
|
||||
@@ -13,7 +13,7 @@ export type ApplyDNSProviderPickerProps = {
|
||||
onSelect?: (value: string) => void;
|
||||
};
|
||||
|
||||
const ApplyDNSProviderPicker = ({ className, style, autoFocus, placeholder, onSelect }: ApplyDNSProviderPickerProps) => {
|
||||
const AcmeDns01ProviderPicker = ({ className, style, autoFocus, placeholder, onSelect }: AcmeDns01ProviderPickerProps) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const [keyword, setKeyword] = useState<string>();
|
||||
@@ -25,7 +25,7 @@ const ApplyDNSProviderPicker = ({ className, style, autoFocus, placeholder, onSe
|
||||
}, []);
|
||||
|
||||
const providers = useMemo(() => {
|
||||
return Array.from(applyDNSProvidersMap.values()).filter((provider) => {
|
||||
return Array.from(acmeDns01ProvidersMap.values()).filter((provider) => {
|
||||
if (keyword) {
|
||||
const value = keyword.toLowerCase();
|
||||
return provider.type.toLowerCase().includes(value) || t(provider.name).toLowerCase().includes(value);
|
||||
@@ -72,4 +72,4 @@ const ApplyDNSProviderPicker = ({ className, style, autoFocus, placeholder, onSe
|
||||
);
|
||||
};
|
||||
|
||||
export default memo(ApplyDNSProviderPicker);
|
||||
export default memo(AcmeDns01ProviderPicker);
|
||||
@@ -2,21 +2,21 @@ import { memo, useEffect, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Avatar, Select, type SelectProps, Space, Typography } from "antd";
|
||||
|
||||
import { type NotifyProvider, notifyProvidersMap } from "@/domain/provider";
|
||||
import { type AcmeDns01Provider, acmeDns01ProvidersMap } from "@/domain/provider";
|
||||
|
||||
export type NotifyProviderSelectProps = Omit<
|
||||
export type AcmeDns01ProviderSelectProps = Omit<
|
||||
SelectProps,
|
||||
"filterOption" | "filterSort" | "labelRender" | "options" | "optionFilterProp" | "optionLabelProp" | "optionRender"
|
||||
> & {
|
||||
filter?: (record: NotifyProvider) => boolean;
|
||||
filter?: (record: AcmeDns01Provider) => boolean;
|
||||
};
|
||||
|
||||
const NotifyProviderSelect = ({ filter, ...props }: NotifyProviderSelectProps) => {
|
||||
const AcmeDns01ProviderSelect = ({ filter, ...props }: AcmeDns01ProviderSelectProps) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const [options, setOptions] = useState<Array<{ key: string; value: string; label: string; data: NotifyProvider }>>([]);
|
||||
const [options, setOptions] = useState<Array<{ key: string; value: string; label: string; data: AcmeDns01Provider }>>([]);
|
||||
useEffect(() => {
|
||||
const allItems = Array.from(notifyProvidersMap.values());
|
||||
const allItems = Array.from(acmeDns01ProvidersMap.values());
|
||||
const filteredItems = filter != null ? allItems.filter(filter) : allItems;
|
||||
setOptions(
|
||||
filteredItems.map((item) => ({
|
||||
@@ -29,7 +29,7 @@ const NotifyProviderSelect = ({ filter, ...props }: NotifyProviderSelectProps) =
|
||||
}, [filter]);
|
||||
|
||||
const renderOption = (key: string) => {
|
||||
const provider = notifyProvidersMap.get(key);
|
||||
const provider = acmeDns01ProvidersMap.get(key);
|
||||
return (
|
||||
<Space className="max-w-full grow overflow-hidden truncate" size={4}>
|
||||
<Avatar src={provider?.icon} size="small" />
|
||||
@@ -64,4 +64,4 @@ const NotifyProviderSelect = ({ filter, ...props }: NotifyProviderSelectProps) =
|
||||
);
|
||||
};
|
||||
|
||||
export default memo(NotifyProviderSelect);
|
||||
export default memo(AcmeDns01ProviderSelect);
|
||||
@@ -2,28 +2,28 @@ import { memo, useEffect, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Avatar, Select, type SelectProps, Space, Typography } from "antd";
|
||||
|
||||
import { type ApplyCAProvider, applyCAProvidersMap } from "@/domain/provider";
|
||||
import { type CAProvider, caProvidersMap } from "@/domain/provider";
|
||||
|
||||
export type ApplyCAProviderSelectProps = Omit<
|
||||
export type CAProviderSelectProps = Omit<
|
||||
SelectProps,
|
||||
"filterOption" | "filterSort" | "labelRender" | "options" | "optionFilterProp" | "optionLabelProp" | "optionRender"
|
||||
> & {
|
||||
filter?: (record: ApplyCAProvider) => boolean;
|
||||
filter?: (record: CAProvider) => boolean;
|
||||
};
|
||||
|
||||
const ApplyCAProviderSelect = ({ filter, ...props }: ApplyCAProviderSelectProps) => {
|
||||
const CAProviderSelect = ({ filter, ...props }: CAProviderSelectProps) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const [options, setOptions] = useState<Array<{ key: string; value: string; label: string; data: ApplyCAProvider }>>([]);
|
||||
const [options, setOptions] = useState<Array<{ key: string; value: string; label: string; data: CAProvider }>>([]);
|
||||
useEffect(() => {
|
||||
const allItems = Array.from(applyCAProvidersMap.values());
|
||||
const allItems = Array.from(caProvidersMap.values());
|
||||
const filteredItems = filter != null ? allItems.filter(filter) : allItems;
|
||||
setOptions([
|
||||
{
|
||||
key: "",
|
||||
value: "",
|
||||
label: t("provider.default_ca_provider.label"),
|
||||
data: {} as ApplyCAProvider,
|
||||
data: {} as CAProvider,
|
||||
},
|
||||
...filteredItems.map((item) => ({
|
||||
key: item.type,
|
||||
@@ -45,7 +45,7 @@ const ApplyCAProviderSelect = ({ filter, ...props }: ApplyCAProviderSelectProps)
|
||||
);
|
||||
}
|
||||
|
||||
const provider = applyCAProvidersMap.get(key);
|
||||
const provider = caProvidersMap.get(key);
|
||||
return (
|
||||
<Space className="max-w-full grow overflow-hidden truncate" size={4}>
|
||||
<Avatar src={provider?.icon} size="small" />
|
||||
@@ -80,4 +80,4 @@ const ApplyCAProviderSelect = ({ filter, ...props }: ApplyCAProviderSelectProps)
|
||||
);
|
||||
};
|
||||
|
||||
export default memo(ApplyCAProviderSelect);
|
||||
export default memo(CAProviderSelect);
|
||||
@@ -3,9 +3,9 @@ import { useTranslation } from "react-i18next";
|
||||
import { Avatar, Card, Col, Empty, Flex, Input, type InputRef, Row, Tabs, Tooltip, Typography } from "antd";
|
||||
|
||||
import Show from "@/components/Show";
|
||||
import { DEPLOY_CATEGORIES, deployProvidersMap } from "@/domain/provider";
|
||||
import { DEPLOYMENT_CATEGORIES, deploymentProvidersMap } from "@/domain/provider";
|
||||
|
||||
export type DeployProviderPickerProps = {
|
||||
export type DeploymentProviderPickerProps = {
|
||||
className?: string;
|
||||
style?: React.CSSProperties;
|
||||
autoFocus?: boolean;
|
||||
@@ -13,10 +13,10 @@ export type DeployProviderPickerProps = {
|
||||
onSelect?: (value: string) => void;
|
||||
};
|
||||
|
||||
const DeployProviderPicker = ({ className, style, autoFocus, placeholder, onSelect }: DeployProviderPickerProps) => {
|
||||
const DeploymentProviderPicker = ({ className, style, autoFocus, placeholder, onSelect }: DeploymentProviderPickerProps) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const [category, setCategory] = useState<string>(DEPLOY_CATEGORIES.ALL);
|
||||
const [category, setCategory] = useState<string>(DEPLOYMENT_CATEGORIES.ALL);
|
||||
|
||||
const [keyword, setKeyword] = useState<string>();
|
||||
const keywordInputRef = useRef<InputRef>(null);
|
||||
@@ -27,9 +27,9 @@ const DeployProviderPicker = ({ className, style, autoFocus, placeholder, onSele
|
||||
}, []);
|
||||
|
||||
const providers = useMemo(() => {
|
||||
return Array.from(deployProvidersMap.values())
|
||||
return Array.from(deploymentProvidersMap.values())
|
||||
.filter((provider) => {
|
||||
if (category && category !== DEPLOY_CATEGORIES.ALL) {
|
||||
if (category && category !== DEPLOYMENT_CATEGORIES.ALL) {
|
||||
return provider.category === category;
|
||||
}
|
||||
|
||||
@@ -56,17 +56,17 @@ const DeployProviderPicker = ({ className, style, autoFocus, placeholder, onSele
|
||||
<div className="mt-4">
|
||||
<Flex>
|
||||
<Tabs
|
||||
defaultActiveKey={DEPLOY_CATEGORIES.ALL}
|
||||
defaultActiveKey={DEPLOYMENT_CATEGORIES.ALL}
|
||||
items={[
|
||||
DEPLOY_CATEGORIES.ALL,
|
||||
DEPLOY_CATEGORIES.CDN,
|
||||
DEPLOY_CATEGORIES.STORAGE,
|
||||
DEPLOY_CATEGORIES.LOADBALANCE,
|
||||
DEPLOY_CATEGORIES.FIREWALL,
|
||||
DEPLOY_CATEGORIES.AV,
|
||||
DEPLOY_CATEGORIES.SERVERLESS,
|
||||
DEPLOY_CATEGORIES.WEBSITE,
|
||||
DEPLOY_CATEGORIES.OTHER,
|
||||
DEPLOYMENT_CATEGORIES.ALL,
|
||||
DEPLOYMENT_CATEGORIES.CDN,
|
||||
DEPLOYMENT_CATEGORIES.STORAGE,
|
||||
DEPLOYMENT_CATEGORIES.LOADBALANCE,
|
||||
DEPLOYMENT_CATEGORIES.FIREWALL,
|
||||
DEPLOYMENT_CATEGORIES.AV,
|
||||
DEPLOYMENT_CATEGORIES.SERVERLESS,
|
||||
DEPLOYMENT_CATEGORIES.WEBSITE,
|
||||
DEPLOYMENT_CATEGORIES.OTHER,
|
||||
].map((key) => ({
|
||||
key: key,
|
||||
label: t(`provider.category.${key}`),
|
||||
@@ -110,4 +110,4 @@ const DeployProviderPicker = ({ className, style, autoFocus, placeholder, onSele
|
||||
);
|
||||
};
|
||||
|
||||
export default memo(DeployProviderPicker);
|
||||
export default memo(DeploymentProviderPicker);
|
||||
@@ -2,21 +2,21 @@ import { memo, useEffect, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Avatar, Select, type SelectProps, Space, Typography } from "antd";
|
||||
|
||||
import { type ApplyDNSProvider, applyDNSProvidersMap } from "@/domain/provider";
|
||||
import { type DeploymentProvider, deploymentProvidersMap } from "@/domain/provider";
|
||||
|
||||
export type ApplyDNSProviderSelectProps = Omit<
|
||||
export type DeploymentProviderSelectProps = Omit<
|
||||
SelectProps,
|
||||
"filterOption" | "filterSort" | "labelRender" | "options" | "optionFilterProp" | "optionLabelProp" | "optionRender"
|
||||
> & {
|
||||
filter?: (record: ApplyDNSProvider) => boolean;
|
||||
filter?: (record: DeploymentProvider) => boolean;
|
||||
};
|
||||
|
||||
const ApplyDNSProviderSelect = ({ filter, ...props }: ApplyDNSProviderSelectProps) => {
|
||||
const DeploymentProviderSelect = ({ filter, ...props }: DeploymentProviderSelectProps) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const [options, setOptions] = useState<Array<{ key: string; value: string; label: string; data: ApplyDNSProvider }>>([]);
|
||||
const [options, setOptions] = useState<Array<{ key: string; value: string; label: string; data: DeploymentProvider }>>([]);
|
||||
useEffect(() => {
|
||||
const allItems = Array.from(applyDNSProvidersMap.values());
|
||||
const allItems = Array.from(deploymentProvidersMap.values());
|
||||
const filteredItems = filter != null ? allItems.filter(filter) : allItems;
|
||||
setOptions(
|
||||
filteredItems.map((item) => ({
|
||||
@@ -29,7 +29,7 @@ const ApplyDNSProviderSelect = ({ filter, ...props }: ApplyDNSProviderSelectProp
|
||||
}, [filter]);
|
||||
|
||||
const renderOption = (key: string) => {
|
||||
const provider = applyDNSProvidersMap.get(key);
|
||||
const provider = deploymentProvidersMap.get(key);
|
||||
return (
|
||||
<Space className="max-w-full grow overflow-hidden truncate" size={4}>
|
||||
<Avatar src={provider?.icon} size="small" />
|
||||
@@ -64,4 +64,4 @@ const ApplyDNSProviderSelect = ({ filter, ...props }: ApplyDNSProviderSelectProp
|
||||
);
|
||||
};
|
||||
|
||||
export default memo(ApplyDNSProviderSelect);
|
||||
export default memo(DeploymentProviderSelect);
|
||||
@@ -2,21 +2,21 @@ import { memo, useEffect, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Avatar, Select, type SelectProps, Space, Typography } from "antd";
|
||||
|
||||
import { type DeployProvider, deployProvidersMap } from "@/domain/provider";
|
||||
import { type NotificationProvider, notificationProvidersMap } from "@/domain/provider";
|
||||
|
||||
export type DeployProviderSelectProps = Omit<
|
||||
export type NotificationProviderSelectProps = Omit<
|
||||
SelectProps,
|
||||
"filterOption" | "filterSort" | "labelRender" | "options" | "optionFilterProp" | "optionLabelProp" | "optionRender"
|
||||
> & {
|
||||
filter?: (record: DeployProvider) => boolean;
|
||||
filter?: (record: NotificationProvider) => boolean;
|
||||
};
|
||||
|
||||
const DeployProviderSelect = ({ filter, ...props }: DeployProviderSelectProps) => {
|
||||
const NotificationProviderSelect = ({ filter, ...props }: NotificationProviderSelectProps) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const [options, setOptions] = useState<Array<{ key: string; value: string; label: string; data: DeployProvider }>>([]);
|
||||
const [options, setOptions] = useState<Array<{ key: string; value: string; label: string; data: NotificationProvider }>>([]);
|
||||
useEffect(() => {
|
||||
const allItems = Array.from(deployProvidersMap.values());
|
||||
const allItems = Array.from(notificationProvidersMap.values());
|
||||
const filteredItems = filter != null ? allItems.filter(filter) : allItems;
|
||||
setOptions(
|
||||
filteredItems.map((item) => ({
|
||||
@@ -29,7 +29,7 @@ const DeployProviderSelect = ({ filter, ...props }: DeployProviderSelectProps) =
|
||||
}, [filter]);
|
||||
|
||||
const renderOption = (key: string) => {
|
||||
const provider = deployProvidersMap.get(key);
|
||||
const provider = notificationProvidersMap.get(key);
|
||||
return (
|
||||
<Space className="max-w-full grow overflow-hidden truncate" size={4}>
|
||||
<Avatar src={provider?.icon} size="small" />
|
||||
@@ -64,4 +64,4 @@ const DeployProviderSelect = ({ filter, ...props }: DeployProviderSelectProps) =
|
||||
);
|
||||
};
|
||||
|
||||
export default memo(DeployProviderSelect);
|
||||
export default memo(NotificationProviderSelect);
|
||||
Reference in New Issue
Block a user