refactor: query dashboard data

src/hooks/use-query-data-list.ts

@@ -92,7 +92,7 @@ export function useQueryData<Detail, Params = any>(option: {
   key: string;
   delay?: number;
   fetchDetail: (params: Params, options?: any) => Promise<Detail>;
-  getData?: (response: Detail) => any;
+  getData?: (response: Detail, params?: any) => any;
   errorMsg?: string;
 }): {
   loading: boolean;
@@ -123,7 +123,7 @@ export function useQueryData<Detail, Params = any>(option: {
         });
       }
 
-      setDetailData(getData ? getData(res) : res);
+      setDetailData(getData ? getData(res, params) : res);
 
       return res;
     },
@@ -132,7 +132,7 @@ export function useQueryData<Detail, Params = any>(option: {
       onSuccess: () => {},
       onError: (error) => {
         message.error(
-          error?.message || errorMsg || `Failed to fetch ${key} list`
+          error?.message || errorMsg || `Failed to fetch ${key} data`
         );
         setDetailData({} as Detail);
       }
@@ -146,8 +146,7 @@ export function useQueryData<Detail, Params = any>(option: {
 
   useEffect(() => {
     return () => {
-      cancel();
+      cancelRequest();
-      axiosTokenRef.current?.cancel();
     };
   }, []);
 

src/pages/dashboard/index.tsx

@@ -1,46 +1,22 @@
-import { useMemoizedFn } from 'ahooks';
 import { Spin } from 'antd';
-import { omit } from 'lodash';
+import { useEffect } from 'react';
-import { useEffect, useState } from 'react';
 import PageBox from '../_components/page-box';
-import { queryDashboardData } from './apis';
 import DashboardInner from './components/dahboard-inner';
 import DashboardContext from './config/dashboard-context';
-import { DashboardProps } from './config/types';
+import useQueryDashboard from './services/use-query-dashboard';
 
 const Dashboard: React.FC = () => {
-  const [data, setData] = useState<DashboardProps>({} as DashboardProps);
+  const { fetchData, loading, data, cancelRequest } = useQueryDashboard();
-  const [loading, setLoading] = useState(false);
-
-  const fetchDashboardData = useMemoizedFn(
-    async (params?: { cluster_id?: number }) => {
-      try {
-        setLoading(true);
-        const res = await queryDashboardData(params);
-        setData((prev) => {
-          return params?.cluster_id
-            ? {
-                ...omit(prev, ['system_load']),
-                system_load: res.system_load
-              }
-            : res;
-        });
-      } catch (error) {
-        setData({} as DashboardProps);
-      } finally {
-        setLoading(false);
-      }
-    }
-  );
 
   useEffect(() => {
-    fetchDashboardData();
+    fetchData({});
+    return () => {
+      cancelRequest();
+    };
   }, []);
 
   return (
-    <DashboardContext.Provider
+    <DashboardContext.Provider value={{ ...data, fetchData: fetchData }}>
-      value={{ ...data, fetchData: fetchDashboardData }}
-    >
       <PageBox>
         <Spin spinning={loading} style={{ minHeight: 300 }}>
           <DashboardInner />

src/pages/dashboard/services/use-query-dashboard.ts

@@ -0,0 +1,25 @@
+import { useQueryData } from '@/hooks/use-query-data-list';
+import { omit } from 'lodash';
+import { queryDashboardData } from '../apis';
+
+export default function useQueryDashboard() {
+  const { detailData, loading, fetchData, cancelRequest } = useQueryData({
+    key: 'dashboard',
+    fetchDetail: queryDashboardData,
+    getData(response, params) {
+      return params?.cluster_id
+        ? {
+            ...omit(detailData, ['system_load']),
+            system_load: response.system_load
+          }
+        : response;
+    }
+  });
+
+  return {
+    loading,
+    data: detailData,
+    cancelRequest,
+    fetchData
+  };
+}