refactor(ui): clean code

ui/src/pages/workflows/WorkflowList.tsx

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