add parameter 'clearData' to useList mutate function (#418)

* optimized useList clear data before mutate request

* add unit testing and desc

* add demo to mutate options

Author: haiminovo

src/useList/__tests__/useList.test.ts

@@ -133,4 +133,25 @@ describe('Test useList hook', () => {
         await awaitTimers();
         expect(result.current.loading).toBe(false);
     });
+
+    it('Should support clear data before mutate', async () => {
+        const fetcher = jest.fn().mockResolvedValue({
+            total: 1,
+            data: [{ uuid: 1 }],
+            error: new Error('testError'),
+        });
+        const { result } = renderHook(() =>
+            useList(fetcher, { current: 1, pageSize: 20, search: '' })
+        );
+        expect(fetcher).toBeCalledTimes(1);
+        await waitFor(() => {
+            expect(result.current.data.length).toBe(1);
+        });
+        act(() => {
+            result.current.mutate({ search: 'test' }, { clearData: true });
+        });
+        expect(result.current.data).toStrictEqual([]);
+        expect(result.current.params.total).toBe(0);
+        expect(result.current.error).toBe(undefined);
+    });
 });

src/useList/demos/mutateOptions.tsx

@@ -0,0 +1,129 @@
+import React, { useState } from 'react';
+import { Button, Form, Input, Result, Select, Switch, Table } from 'antd';
+import { useList } from 'dt-react-component';
+import type { Fetcher } from 'dt-react-component/useList';
+
+import getMockData, { type MockData } from './data';
+
+const fetcher: Fetcher<MockData, { current: number; pageSize: number; search?: string }> = (
+    params
+) => {
+    return new Promise<{
+        data: MockData[];
+        total: number;
+    }>((resolve) => {
+        setTimeout(() => {
+            resolve(getMockData(params));
+        }, 150);
+    });
+};
+
+export default () => {
+    const { error, params, loading, data, mutate } = useList(fetcher, { current: 1, pageSize: 20 });
+    const [form] = Form.useForm();
+
+    if (error) return <Result status={500} />;
+
+    const handleSearch = async () => {
+        const values = await form.validateFields();
+        mutate({ ...values }, { revalidate, clearData });
+    };
+
+    const handleReset = async () => {
+        form.resetFields();
+        const values = await form.validateFields();
+        // 当传入值有 undefined 的时候，采用 functional 的写法。
+        // 因为底层使用的 lodash 的 merge，采用赋值写法不会对 undefined 做合并
+        mutate((pre) => ({ ...pre, ...values }), { revalidate, clearData });
+    };
+    const [revalidate, setRevalidate] = useState(true);
+    const [clearData, setClearData] = useState(true);
+    const onChangeRevalidate = () => {
+        setRevalidate(!revalidate);
+    };
+    const onChangeClearData = () => {
+        setClearData(!clearData);
+    };
+
+    return (
+        <>
+            <Form layout="inline" form={form}>
+                <Form.Item name="search">
+                    <Input.Search style={{ marginBottom: 12, width: 228 }} />
+                </Form.Item>
+                <Form.Item name="filters">
+                    <Select style={{ width: 228 }} mode="multiple">
+                        <Select.Option key="female" value="female">
+                            female
+                        </Select.Option>
+                        <Select.Option key="male" value="male">
+                            male
+                        </Select.Option>
+                    </Select>
+                </Form.Item>
+                <Button type="ghost" style={{ marginRight: 16 }} onClick={handleReset}>
+                    重置
+                </Button>
+                <Button type="primary" style={{ marginRight: 32 }} onClick={handleSearch}>
+                    查询
+                </Button>
+                <Form.Item name="options">
+                    <span style={{ marginRight: 4 }}>revalidate</span>
+                    <Switch
+                        style={{ marginRight: 16 }}
+                        defaultChecked
+                        onChange={onChangeRevalidate}
+                    />
+                    <span style={{ marginRight: 4 }}>clearData</span>
+                    <Switch defaultChecked onChange={onChangeClearData} />
+                </Form.Item>
+            </Form>
+            <Table
+                loading={loading}
+                columns={[
+                    {
+                        key: 'name',
+                        title: 'name',
+                        dataIndex: 'name',
+                    },
+                    {
+                        key: 'address',
+                        title: 'address',
+                        dataIndex: 'address',
+                    },
+                    {
+                        key: 'company',
+                        title: 'company',
+                        dataIndex: 'company',
+                    },
+                    {
+                        key: 'gender',
+                        title: 'gender',
+                        dataIndex: 'gender',
+                    },
+                    {
+                        key: 'weight',
+                        title: 'weight',
+                        dataIndex: 'weight',
+                    },
+                ]}
+                onChange={(pagination) =>
+                    mutate(
+                        { current: pagination.current, pageSize: pagination.pageSize },
+                        { revalidate, clearData }
+                    )
+                }
+                size="small"
+                scroll={{ y: 200 }}
+                dataSource={data}
+                pagination={{
+                    current: params.current,
+                    pageSize: params.pageSize,
+                    total: params.total,
+                }}
+                rowKey="uuid"
+                bordered
+            />
+        </>
+    );
+};

src/useList/index.md

@@ -16,6 +16,7 @@ toc: content
 <code src="./demos/sort.tsx" title="筛选和过滤"></code>
 <code src="./demos/options.tsx" title="相关配置" description="设置 immediate 值防止初始化的时候进行请求"></code>
 <code src="./demos/mutate.tsx" title="相关配置" description="用 undefined 覆盖 prevPrams 时，需采用 functional 的写法 "></code>
+<code src="./demos/mutateOptions" title="mutate相关配置" description="revalidate 修改后请求数据，clearData 请求前清除数据"></code>
 
 ## API
 
@@ -49,3 +50,4 @@ toc: content
 | 参数       | 说明                   | 类型      | 默认值 |
 | ---------- | ---------------------- | --------- | ------ |
 | revalidate | 修改后是否重新请求数据 | `boolean` | `true` |
+| clearData  | 请求数据前是否清除数据 | `boolean` | `true` |

src/useList/index.ts

@@ -8,6 +8,10 @@ export interface IMutateOptions {
      * 是否数据重新获取
      */
     revalidate?: boolean;
+    /**
+     * 在mutate发起请求前是否清空data(包括data total error)
+     */
+    clearData?: boolean;
 }
 
 export interface IUseListOptions {
@@ -49,13 +53,19 @@ export default function useList<T extends Record<string, any>, P extends Record<
     const mutate = (next: Partial<P> | ((prev: P) => P) = params, options: IMutateOptions = {}) => {
         const defaultOptions: IMutateOptions = {
             revalidate: true,
+            clearData: true,
         };
         const nextOptions = merge(defaultOptions, options);
 
         const tmp = typeof next === 'function' ? next(params) : { ...merge({}, params, next) };
         setParams(tmp);
 
         if (nextOptions.revalidate) {
+            if (nextOptions.clearData) {
+                setData([]);
+                setTotal(0);
+                setError(undefined);
+            }
             performFetch(tmp);
         }
     };