From aea132d0918bbff4557dded8332fef247d24cc3f Mon Sep 17 00:00:00 2001
From: Viki <hi@viki.moe>
Date: Thu, 5 Sep 2024 16:57:31 +0800
Subject: [PATCH] chore: add refresh method in usePagingList

---
 .../react-use/src/use-paging-list/demo.tsx    | 14 +++++++-----
 .../react-use/src/use-paging-list/index.mdx   |  5 +++++
 .../react-use/src/use-paging-list/index.ts    | 22 ++++++++++++++++---
 .../src/use-paging-list/index.zh-cn.mdx       |  5 +++++
 4 files changed, 37 insertions(+), 9 deletions(-)

diff --git a/packages/react-use/src/use-paging-list/demo.tsx b/packages/react-use/src/use-paging-list/demo.tsx
index dadc116..1abb70b 100644
--- a/packages/react-use/src/use-paging-list/demo.tsx
+++ b/packages/react-use/src/use-paging-list/demo.tsx
@@ -16,7 +16,7 @@ interface Item {
 }
 
 export function App() {
-  const { list, loading, form, query, pagination, selection } = usePagingList<Item, FormState>(
+  const { list, loading, form, refresh, query, pagination, selection } = usePagingList<Item, FormState>(
     async (params) => {
       const { page, pageSize, form, setTotal } = params
       const { data, total } = await fetchPagination({ page, pageSize })
@@ -27,16 +27,16 @@ export function App() {
       form: {
         initialValue: {
           name: '',
-          gender: 'Girl',
-          color: ['Cyan'],
+          gender: 'Boy',
+          color: ['Red'],
         },
       },
       query: {
-        refreshInterval: 3_000,
+        refreshInterval: 6_000,
       },
       pagination: {
-        page: 2,
-        pageSize: 10,
+        page: 1,
+        pageSize: 50,
       },
       immediateQueryKeys: ['color', 'gender'],
     },
@@ -56,6 +56,8 @@ export function App() {
             <span className="text-right inline-block w-80px">Name:</span>
             <Input name="name" placeholder="Name" />
             <Button type="submit">Search</Button>
+            <Button type="reset">Reset</Button>
+            <Button onClick={() => refresh()}>Refresh</Button>
           </Zone>
           <Zone>
             <span className="text-right inline-block w-80px">Gender:</span>
diff --git a/packages/react-use/src/use-paging-list/index.mdx b/packages/react-use/src/use-paging-list/index.mdx
index 0ac0e87..888e5d7 100644
--- a/packages/react-use/src/use-paging-list/index.mdx
+++ b/packages/react-use/src/use-paging-list/index.mdx
@@ -41,6 +41,7 @@ const {
   pagination,
   selection,
   list,
+  refresh,
   setTotal,
   loading
 } = usePagingList(fetcher, options)
@@ -197,6 +198,10 @@ export interface UsePagingListReturns<
    * query instance, refer to useQuery documentation
    */
   query: UseQueryOptions<Fetcher>
+  /**
+   * refresh query
+   */
+  refresh: () => void
   /**
    * Set total data amount
    */
diff --git a/packages/react-use/src/use-paging-list/index.ts b/packages/react-use/src/use-paging-list/index.ts
index 2e06e6c..355b42a 100644
--- a/packages/react-use/src/use-paging-list/index.ts
+++ b/packages/react-use/src/use-paging-list/index.ts
@@ -91,6 +91,10 @@ export interface UsePagingListReturns<
    * query instance
    */
   query: UseQueryOptions<Fetcher>
+  /**
+   * refresh query
+   */
+  refresh: () => void
   /**
    * set total count
    */
@@ -125,10 +129,19 @@ export function usePagingList<
     ...options.form,
     onReset(...args) {
       startNewQuery()
-      latest.current.options.form?.onReset?.(...args)
+      return latest.current.options.form?.onReset?.(...args)
     },
     onSubmit(...args) {
-      startNewQuery()
+      const form = args[0]
+
+      query.run({
+        previousData: previousDataRef.current,
+        page: paginationState.page,
+        pageSize: paginationState.pageSize,
+        form,
+        setTotal,
+      })
+
       latest.current.options.form?.onSubmit?.(...args)
     },
     onChange(...args) {
@@ -146,7 +159,7 @@ export function usePagingList<
 
       previousFormRef.current = nextForm
 
-      latest.current.options.form?.onChange?.(...args)
+      return latest.current.options.form?.onChange?.(...args)
     },
   })
 
@@ -230,6 +243,8 @@ export function usePagingList<
 
   const latest = useLatest({ options, paginationState })
 
+  const refresh = useStableFn(() => query.refresh())
+
   return {
     get loading() {
       return query.loading
@@ -238,6 +253,7 @@ export function usePagingList<
     form,
     query,
     setTotal,
+    refresh,
     selection: {
       ...select,
       ...selectActions,
diff --git a/packages/react-use/src/use-paging-list/index.zh-cn.mdx b/packages/react-use/src/use-paging-list/index.zh-cn.mdx
index 23c8e3b..d77fddc 100644
--- a/packages/react-use/src/use-paging-list/index.zh-cn.mdx
+++ b/packages/react-use/src/use-paging-list/index.zh-cn.mdx
@@ -41,6 +41,7 @@ const {
   pagination,
   selection,
   list,
+  refresh,
   setTotal,
   loading
 } = usePagingList(fetcher, options)
@@ -197,6 +198,10 @@ export interface UsePagingListReturns<
    * query 实例，参考 useQuery 文档
    */
   query: UseQueryOptions<Fetcher>
+  /**
+   * 使用上次请求参数（表单状态等），刷新数据
+   */
+  refresh: () => void
   /**
    * 设置数据总数
    */