refactor(ui): clean code

This commit is contained in:
Fu Diwei 2024-12-19 09:44:09 +08:00
parent 85faf8d517
commit 5ea5473bdd
4 changed files with 82 additions and 100 deletions

View File

@ -1,5 +1,6 @@
import { useCallback, useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { useRequest } from "ahooks";
import { Avatar, Button, Empty, Modal, notification, Space, Table, Tooltip, Typography, type TableProps } from "antd"; import { Avatar, Button, Empty, Modal, notification, Space, Table, Tooltip, Typography, type TableProps } from "antd";
import { PageHeader } from "@ant-design/pro-components"; import { PageHeader } from "@ant-design/pro-components";
import { Copy as CopyIcon, Pencil as PencilIcon, Plus as PlusIcon, Trash2 as Trash2Icon } from "lucide-react"; import { Copy as CopyIcon, Pencil as PencilIcon, Plus as PlusIcon, Trash2 as Trash2Icon } from "lucide-react";
@ -19,8 +20,6 @@ const AccessList = () => {
const { accesses, fetchAccesses, deleteAccess } = useAccessStore(); const { accesses, fetchAccesses, deleteAccess } = useAccessStore();
const [loading, setLoading] = useState<boolean>(false);
const tableColumns: TableProps<AccessModel>["columns"] = [ const tableColumns: TableProps<AccessModel>["columns"] = [
{ {
key: "$index", key: "$index",
@ -124,32 +123,24 @@ const AccessList = () => {
}); });
}, []); }, []);
const fetchTableData = useCallback(async () => { const { loading } = useRequest(
if (loading) return; () => {
setLoading(true);
try {
const startIndex = (page - 1) * pageSize; const startIndex = (page - 1) * pageSize;
const endIndex = startIndex + pageSize; const endIndex = startIndex + pageSize;
const items = accesses.slice(startIndex, endIndex); const items = accesses.slice(startIndex, endIndex);
return Promise.resolve({
setTableData(items); items,
setTableTotal(accesses.length); totalItems: accesses.length,
} catch (err) { });
if (err instanceof ClientResponseError && err.isAbort) { },
return; {
} refreshDeps: [accesses, page, pageSize],
onSuccess: (data) => {
console.error(err); setTableData(data.items);
notificationApi.error({ message: t("common.text.request_error"), description: <>{getErrMsg(err)}</> }); setTableTotal(data.totalItems);
} finally { },
setLoading(false);
} }
}, [page, pageSize, accesses]); );
useEffect(() => {
fetchTableData();
}, [fetchTableData]);
const handleDeleteClick = async (data: AccessModel) => { const handleDeleteClick = async (data: AccessModel) => {
modalApi.confirm({ modalApi.confirm({

View File

@ -1,6 +1,7 @@
import { useCallback, useEffect, useState } from "react"; import { useState } from "react";
import { useNavigate, useSearchParams } from "react-router-dom"; import { useNavigate, useSearchParams } from "react-router-dom";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { useRequest } from "ahooks";
import { Button, Divider, Empty, Menu, notification, Radio, Space, Table, theme, Tooltip, Typography, type MenuProps, type TableProps } from "antd"; import { Button, Divider, Empty, Menu, notification, Radio, Space, Table, theme, Tooltip, Typography, type MenuProps, type TableProps } from "antd";
import { PageHeader } from "@ant-design/pro-components"; import { PageHeader } from "@ant-design/pro-components";
import { Eye as EyeIcon, Filter as FilterIcon } from "lucide-react"; import { Eye as EyeIcon, Filter as FilterIcon } from "lucide-react";
@ -22,8 +23,6 @@ const CertificateList = () => {
const [notificationApi, NotificationContextHolder] = notification.useNotification(); const [notificationApi, NotificationContextHolder] = notification.useNotification();
const [loading, setLoading] = useState<boolean>(false);
const tableColumns: TableProps<CertificateModel>["columns"] = [ const tableColumns: TableProps<CertificateModel>["columns"] = [
{ {
key: "$index", key: "$index",
@ -177,34 +176,30 @@ const CertificateList = () => {
const [page, setPage] = useState<number>(() => parseInt(+searchParams.get("page")! + "") || 1); const [page, setPage] = useState<number>(() => parseInt(+searchParams.get("page")! + "") || 1);
const [pageSize, setPageSize] = useState<number>(() => parseInt(+searchParams.get("perPage")! + "") || 10); const [pageSize, setPageSize] = useState<number>(() => parseInt(+searchParams.get("perPage")! + "") || 10);
const fetchTableData = useCallback(async () => { const { loading } = useRequest(
if (loading) return; () => {
setLoading(true); return listCertificate({
try {
const resp = await listCertificate({
page: page, page: page,
perPage: pageSize, perPage: pageSize,
state: filters["state"] as CertificateListReq["state"], state: filters["state"] as CertificateListReq["state"],
}); });
},
{
refreshDeps: [filters, page, pageSize],
onSuccess: (data) => {
setTableData(data.items);
setTableTotal(data.totalItems);
},
onError: (err) => {
if (err instanceof ClientResponseError && err.isAbort) {
return;
}
setTableData(resp.items); console.error(err);
setTableTotal(resp.totalItems); notificationApi.error({ message: t("common.text.request_error"), description: <>{getErrMsg(err)}</> });
} catch (err) { },
if (err instanceof ClientResponseError && err.isAbort) {
return;
}
console.error(err);
notificationApi.error({ message: t("common.text.request_error"), description: <>{getErrMsg(err)}</> });
} finally {
setLoading(false);
} }
}, [filters, page, pageSize]); );
useEffect(() => {
fetchTableData();
}, [fetchTableData]);
return ( return (
<> <>

View File

@ -1,6 +1,7 @@
import React, { useCallback, useEffect, useState } from "react"; import { useState } from "react";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { useRequest } from "ahooks";
import { Card, Col, Divider, notification, Row, Space, Statistic, theme, Typography } from "antd"; import { Card, Col, Divider, notification, Row, Space, Statistic, theme, Typography } from "antd";
import { PageHeader } from "@ant-design/pro-components"; import { PageHeader } from "@ant-design/pro-components";
import { import {
@ -25,8 +26,6 @@ const Dashboard = () => {
const [notificationApi, NotificationContextHolder] = notification.useNotification(); const [notificationApi, NotificationContextHolder] = notification.useNotification();
const [loading, setLoading] = useState<boolean>(false);
const statisticsGridSpans = { const statisticsGridSpans = {
xs: { flex: "50%" }, xs: { flex: "50%" },
md: { flex: "50%" }, md: { flex: "50%" },
@ -34,31 +33,26 @@ const Dashboard = () => {
xl: { flex: "33.3333%" }, xl: { flex: "33.3333%" },
xxl: { flex: "20%" }, xxl: { flex: "20%" },
}; };
const [statistics, setStatistics] = useState<Statistics>(); const [statistics, setStatistics] = useState<Statistics>();
const fetchStatistics = useCallback(async () => { const { loading } = useRequest(
if (loading) return; () => {
setLoading(true); return getStatistics();
},
{
onSuccess: (data) => {
setStatistics(data);
},
onError: (err) => {
if (err instanceof ClientResponseError && err.isAbort) {
return;
}
try { console.error(err);
const data = await getStatistics(); notificationApi.error({ message: t("common.text.request_error"), description: <>{getErrMsg(err)}</> });
setStatistics(data); },
} catch (err) {
if (err instanceof ClientResponseError && err.isAbort) {
return;
}
console.error(err);
notificationApi.error({ message: t("common.text.request_error"), description: <>{getErrMsg(err)}</> });
} finally {
setLoading(false);
} }
}, []); );
useEffect(() => {
fetchStatistics();
}, []);
return ( return (
<> <>
@ -71,6 +65,7 @@ const Dashboard = () => {
<StatisticCard <StatisticCard
icon={<SquareSigmaIcon size={48} strokeWidth={1} color={themeToken.colorInfo} />} icon={<SquareSigmaIcon size={48} strokeWidth={1} color={themeToken.colorInfo} />}
label={t("dashboard.statistics.all_certificates")} label={t("dashboard.statistics.all_certificates")}
loading={loading}
value={statistics?.certificateTotal ?? "-"} value={statistics?.certificateTotal ?? "-"}
suffix={t("dashboard.statistics.unit")} suffix={t("dashboard.statistics.unit")}
onClick={() => navigate("/certificates")} onClick={() => navigate("/certificates")}
@ -80,6 +75,7 @@ const Dashboard = () => {
<StatisticCard <StatisticCard
icon={<CalendarClockIcon size={48} strokeWidth={1} color={themeToken.colorWarning} />} icon={<CalendarClockIcon size={48} strokeWidth={1} color={themeToken.colorWarning} />}
label={t("dashboard.statistics.expire_soon_certificates")} label={t("dashboard.statistics.expire_soon_certificates")}
loading={loading}
value={statistics?.certificateExpireSoon ?? "-"} value={statistics?.certificateExpireSoon ?? "-"}
suffix={t("dashboard.statistics.unit")} suffix={t("dashboard.statistics.unit")}
onClick={() => navigate("/certificates?state=expireSoon")} onClick={() => navigate("/certificates?state=expireSoon")}
@ -89,6 +85,7 @@ const Dashboard = () => {
<StatisticCard <StatisticCard
icon={<CalendarX2Icon size={48} strokeWidth={1} color={themeToken.colorError} />} icon={<CalendarX2Icon size={48} strokeWidth={1} color={themeToken.colorError} />}
label={t("dashboard.statistics.expired_certificates")} label={t("dashboard.statistics.expired_certificates")}
loading={loading}
value={statistics?.certificateExpired ?? "-"} value={statistics?.certificateExpired ?? "-"}
suffix={t("dashboard.statistics.unit")} suffix={t("dashboard.statistics.unit")}
onClick={() => navigate("/certificates?state=expired")} onClick={() => navigate("/certificates?state=expired")}
@ -98,6 +95,7 @@ const Dashboard = () => {
<StatisticCard <StatisticCard
icon={<WorkflowIcon size={48} strokeWidth={1} color={themeToken.colorInfo} />} icon={<WorkflowIcon size={48} strokeWidth={1} color={themeToken.colorInfo} />}
label={t("dashboard.statistics.all_workflows")} label={t("dashboard.statistics.all_workflows")}
loading={loading}
value={statistics?.workflowTotal ?? "-"} value={statistics?.workflowTotal ?? "-"}
suffix={t("dashboard.statistics.unit")} suffix={t("dashboard.statistics.unit")}
onClick={() => navigate("/workflows")} onClick={() => navigate("/workflows")}
@ -107,6 +105,7 @@ const Dashboard = () => {
<StatisticCard <StatisticCard
icon={<FolderCheckIcon size={48} strokeWidth={1} color={themeToken.colorSuccess} />} icon={<FolderCheckIcon size={48} strokeWidth={1} color={themeToken.colorSuccess} />}
label={t("dashboard.statistics.enabled_workflows")} label={t("dashboard.statistics.enabled_workflows")}
loading={loading}
value={statistics?.workflowEnabled ?? "-"} value={statistics?.workflowEnabled ?? "-"}
suffix={t("dashboard.statistics.unit")} suffix={t("dashboard.statistics.unit")}
onClick={() => navigate("/workflows?state=enabled")} onClick={() => navigate("/workflows?state=enabled")}
@ -123,19 +122,21 @@ const Dashboard = () => {
const StatisticCard = ({ const StatisticCard = ({
label, label,
loading,
icon, icon,
value, value,
suffix, suffix,
onClick, onClick,
}: { }: {
label: React.ReactNode; label: React.ReactNode;
loading?: boolean;
icon: React.ReactNode; icon: React.ReactNode;
value?: string | number | React.ReactNode; value?: string | number | React.ReactNode;
suffix?: React.ReactNode; suffix?: React.ReactNode;
onClick?: () => void; onClick?: () => void;
}) => { }) => {
return ( return (
<Card className="size-full overflow-hidden" bordered={false} hoverable onClick={onClick}> <Card className="size-full overflow-hidden" bordered={false} hoverable loading={loading} onClick={onClick}>
<Space size="middle"> <Space size="middle">
{icon} {icon}
<Statistic <Statistic

View File

@ -1,6 +1,7 @@
import { useCallback, useEffect, useState } from "react"; import { useState } from "react";
import { useNavigate, useSearchParams } from "react-router-dom"; import { useNavigate, useSearchParams } from "react-router-dom";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { useRequest } from "ahooks";
import { import {
Button, Button,
Divider, Divider,
@ -38,8 +39,6 @@ const WorkflowList = () => {
const [modalApi, ModelContextHolder] = Modal.useModal(); const [modalApi, ModelContextHolder] = Modal.useModal();
const [notificationApi, NotificationContextHolder] = notification.useNotification(); const [notificationApi, NotificationContextHolder] = notification.useNotification();
const [loading, setLoading] = useState<boolean>(false);
const tableColumns: TableProps<WorkflowModel>["columns"] = [ const tableColumns: TableProps<WorkflowModel>["columns"] = [
{ {
key: "$index", key: "$index",
@ -209,34 +208,30 @@ const WorkflowList = () => {
const [page, setPage] = useState<number>(() => parseInt(+searchParams.get("page")! + "") || 1); const [page, setPage] = useState<number>(() => parseInt(+searchParams.get("page")! + "") || 1);
const [pageSize, setPageSize] = useState<number>(() => parseInt(+searchParams.get("perPage")! + "") || 10); const [pageSize, setPageSize] = useState<number>(() => parseInt(+searchParams.get("perPage")! + "") || 10);
const fetchTableData = useCallback(async () => { const { loading } = useRequest(
if (loading) return; () => {
setLoading(true); return listWorkflow({
try {
const resp = await listWorkflow({
page: page, page: page,
perPage: pageSize, perPage: pageSize,
enabled: (filters["state"] as string) === "enabled" ? true : (filters["state"] as string) === "disabled" ? false : undefined, enabled: (filters["state"] as string) === "enabled" ? true : (filters["state"] as string) === "disabled" ? false : undefined,
}); });
},
{
refreshDeps: [filters, page, pageSize],
onSuccess: (data) => {
setTableData(data.items);
setTableTotal(data.totalItems);
},
onError: (err) => {
if (err instanceof ClientResponseError && err.isAbort) {
return;
}
setTableData(resp.items); console.error(err);
setTableTotal(resp.totalItems); notificationApi.error({ message: t("common.text.request_error"), description: <>{getErrMsg(err)}</> });
} catch (err) { },
if (err instanceof ClientResponseError && err.isAbort) {
return;
}
console.error(err);
notificationApi.error({ message: t("common.text.request_error"), description: <>{getErrMsg(err)}</> });
} finally {
setLoading(false);
} }
}, [filters, page, pageSize]); );
useEffect(() => {
fetchTableData();
}, [fetchTableData]);
const handleEnabledChange = async (workflow: WorkflowModel) => { const handleEnabledChange = async (workflow: WorkflowModel) => {
try { try {