feat: add reloading to record the loading status of reload #41

AttoJS · May 8, 2021 · 5034f2c · 5034f2c
1 parent b16fd22
commit 5034f2c
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 9 deletions.
diff --git a/src/__tests__/index.test.tsx b/src/__tests__/index.test.tsx
@@ -2318,11 +2318,12 @@ describe('useRequest', () => {
     const wrapper = shallowMount(
       defineComponent({
         setup() {
-          const { run, reload, data } = useRequest(request, {
+          const { run, reload, reloading, data } = useRequest(request, {
             defaultParams: ['hello'],
           });
           return () => (
             <div>
+              <div class="reloading">{`${reloading.value}`}</div>
               <button class="run" onClick={() => run('hi there')}></button>
               <button class="reload" onClick={() => reload()}></button>
               <div class="data">{data.value}</div>
@@ -2334,21 +2335,30 @@ describe('useRequest', () => {
 
     const dataEl = wrapper.find('.data');
     const runEl = wrapper.find('.run');
+    const reloadingEl = wrapper.find('.reloading');
     const reloadEl = wrapper.find('.reload');
 
+    expect(reloadingEl.text()).toBe('false');
     await waitForTime(1000);
+    expect(reloadingEl.text()).toBe('false');
     expect(dataEl.text()).toBe('hello');
 
     await runEl.trigger('click');
+    expect(reloadingEl.text()).toBe('false');
     await waitForTime(1000);
+    expect(reloadingEl.text()).toBe('false');
     expect(dataEl.text()).toEqual('hi there');
 
     await reloadEl.trigger('click');
+    expect(reloadingEl.text()).toBe('true');
     await waitForTime(1000);
+    expect(reloadingEl.text()).toBe('false');
     expect(dataEl.text()).toEqual('hello');
 
     await runEl.trigger('click');
+    expect(reloadingEl.text()).toBe('false');
     await waitForTime(1000);
+    expect(reloadingEl.text()).toBe('false');
     expect(dataEl.text()).toEqual('hi there');
   });
 

diff --git a/src/__tests__/load-more.test.tsx b/src/__tests__/load-more.test.tsx
@@ -343,6 +343,7 @@ describe('useLoadMore', () => {
             loadingMore,
             noMore,
             loading,
+            reloading,
             loadMore,
             reload,
           } = useLoadMore(normalRequest, {
@@ -352,6 +353,7 @@ describe('useLoadMore', () => {
             <div>
               <div class="dataList">{dataList.value.length || 0}</div>
               <div class="loadingMore">{`${loadingMore.value}`}</div>
+              <div class="reloading">{`${reloading.value}`}</div>
               <div class="loading">{`${loading.value}`}</div>
               <div class="noMore">{`${noMore.value}`}</div>
               <div
@@ -374,6 +376,7 @@ describe('useLoadMore', () => {
 
     const dataListEl = wrapper.find('.dataList');
     const loadingMoreEl = wrapper.find('.loadingMore');
+    const reloadingEl = wrapper.find('.reloading');
     const loadingEl = wrapper.find('.loading');
     const loadMoreEl = wrapper.find('.loadMore');
     const noMoreEl = wrapper.find('.noMore');
@@ -382,6 +385,7 @@ describe('useLoadMore', () => {
     expect(loadingEl.text()).toBe('true');
     await waitForTime(1000);
     expect(loadingEl.text()).toBe('false');
+    expect(reloadingEl.text()).toBe('false');
     expect(dataListEl.text()).toBe('10');
     expect(loadingMoreEl.text()).toBe('false');
     expect(noMoreEl.text()).toBe('false');
@@ -390,9 +394,11 @@ describe('useLoadMore', () => {
       await loadMoreEl.trigger('click');
       expect(loadingMoreEl.text()).toBe('true');
       expect(loadingEl.text()).toBe('true');
+      expect(reloadingEl.text()).toBe('false');
       await waitForTime(1000);
-      expect(loadingEl.text()).toBe('false');
+      expect(reloadingEl.text()).toBe('false');
       expect(loadingMoreEl.text()).toBe('false');
+      expect(loadingEl.text()).toBe('false');
       expect(dataListEl.text()).toBe(`${10 + index * 10}`);
       expect(noMoreEl.text()).toBe(`${index === 9}`);
     }
@@ -401,29 +407,35 @@ describe('useLoadMore', () => {
       await loadMoreEl.trigger('click');
       expect(loadingMoreEl.text()).toBe('false');
       expect(loadingEl.text()).toBe('false');
+      expect(reloadingEl.text()).toBe('false');
       await waitForTime(1000);
       expect(loadingEl.text()).toBe('false');
       expect(loadingMoreEl.text()).toBe('false');
+      expect(reloadingEl.text()).toBe('false');
       expect(dataListEl.text()).toBe('100');
       expect(noMoreEl.text()).toBe('true');
     }
 
     await reloadEl.trigger('click');
     expect(loadingEl.text()).toBe('true');
     expect(loadingMoreEl.text()).toBe('false');
+    expect(reloadingEl.text()).toBe('true');
     expect(dataListEl.text()).toBe('0');
     expect(noMoreEl.text()).toBe('false');
     await waitForTime(1000);
     expect(loadingEl.text()).toBe('false');
+    expect(reloadingEl.text()).toBe('false');
     expect(dataListEl.text()).toBe('10');
 
     for (let index = 1; index <= 9; index++) {
       await loadMoreEl.trigger('click');
       expect(loadingEl.text()).toBe('true');
       expect(loadingMoreEl.text()).toBe('true');
+      expect(reloadingEl.text()).toBe('false');
       await waitForTime(1000);
       expect(loadingEl.text()).toBe('false');
       expect(loadingMoreEl.text()).toBe('false');
+      expect(reloadingEl.text()).toBe('false');
       expect(dataListEl.text()).toBe(`${10 + index * 10}`);
       expect(noMoreEl.text()).toBe(`${index === 9}`);
     }

diff --git a/src/__tests__/pagination.test.tsx b/src/__tests__/pagination.test.tsx
@@ -375,6 +375,7 @@ describe('usePagination', () => {
             current,
             pageSize,
             totalPage,
+            reloading,
             reload,
           } = usePagination<NormalMockDataType>(normalApi);
           return () => (
@@ -384,6 +385,7 @@ describe('usePagination', () => {
               <div class="current">{current.value}</div>
               <div class="pageSize">{pageSize.value}</div>
               <div class="totalPage">{totalPage.value}</div>
+              <div class="reloading">{`${reloading.value}`}</div>
               <div class="reload" onClick={() => reload()} />
               <div class="next" onClick={() => (current.value = ++_current)} />
             </div>
@@ -397,13 +399,16 @@ describe('usePagination', () => {
     const currentEl = wrapper.find('.current');
     const pageSizeEl = wrapper.find('.pageSize');
     const totalPageEl = wrapper.find('.totalPage');
+    const reloadingEl = wrapper.find('.reloading');
     const reloadEl = wrapper.find('.reload');
     const nextEl = wrapper.find('.next');
 
     await waitForTime(1000);
     for (let index = 0; index < 100; index++) {
       await nextEl.trigger('click');
+      expect(reloadingEl.text()).toBe('false');
       await waitForTime(1000);
+      expect(reloadingEl.text()).toBe('false');
       expect(paramsEl.text()).toBe(`[{"current":${_current},"pageSize":10}]`);
       expect(totalEl.text()).toBe('100');
       expect(currentEl.text()).toBe(`${_current}`);
@@ -412,8 +417,10 @@ describe('usePagination', () => {
     }
 
     await reloadEl.trigger('click');
+    expect(reloadingEl.text()).toBe('true');
     _current = 1;
     await waitForTime(1000);
+    expect(reloadingEl.text()).toBe('false');
     expect(paramsEl.text()).toBe(`[{"current":${_current},"pageSize":10}]`);
     expect(totalEl.text()).toBe('100');
     expect(currentEl.text()).toBe(`${_current}`);
@@ -422,7 +429,9 @@ describe('usePagination', () => {
 
     for (let index = 0; index < 100; index++) {
       await nextEl.trigger('click');
+      expect(reloadingEl.text()).toBe('false');
       await waitForTime(1000);
+      expect(reloadingEl.text()).toBe('false');
       expect(paramsEl.text()).toBe(`[{"current":${_current},"pageSize":10}]`);
       expect(totalEl.text()).toBe('100');
       expect(currentEl.text()).toBe(`${_current}`);

diff --git a/src/useLoadMore.ts b/src/useLoadMore.ts
@@ -20,6 +20,7 @@ export interface LoadMoreResult<R, P extends unknown[], LR extends unknown[]>
   noMore: Ref<boolean>;
   loadingMore: Ref<boolean>;
   refreshing: Ref<boolean>;
+  reloading: Ref<boolean>;
   loadMore: () => void;
   reload: () => void;
   refresh: () => void;
@@ -109,6 +110,7 @@ function useLoadMore<R, P extends unknown[], FR, LR extends unknown[]>(
 
   const refreshing = ref(false);
   const loadingMore = ref(false);
+  const reloading = ref(false);
   const initailIncreaseQueryKey = 0;
   const increaseQueryKey = ref(initailIncreaseQueryKey);
   const {
@@ -195,13 +197,15 @@ function useLoadMore<R, P extends unknown[], FR, LR extends unknown[]>(
     refreshing.value = false;
   };
 
-  const reload = () => {
+  const reload = async () => {
+    reloading.value = true;
     reset();
     increaseQueryKey.value = initailIncreaseQueryKey;
     latestData.value = undefined;
     const [, ...restParams] = params.value;
     const mergerParams = [undefined, ...restParams] as any;
-    run(...mergerParams);
+    await run(...mergerParams);
+    reloading.value = false;
   };
 
   const cancel = () => {
@@ -217,6 +221,7 @@ function useLoadMore<R, P extends unknown[], FR, LR extends unknown[]>(
     noMore,
     loadingMore,
     refreshing,
+    reloading,
     run,
     reload,
     loadMore,

diff --git a/src/usePagination.ts b/src/usePagination.ts
@@ -1,4 +1,4 @@
-import { computed, inject, Ref } from 'vue';
+import { computed, inject, ref, Ref } from 'vue';
 import {
   BaseOptions,
   FormatOptions,
@@ -19,6 +19,7 @@ export interface PaginationResult<R, P extends unknown[]>
   pageSize: Ref<number>;
   total: Ref<number>;
   totalPage: Ref<number>;
+  reloading: Ref<boolean>;
   changeCurrent: (current: number) => void;
   changePageSize: (pageSize: number) => void;
   reload: () => void;
@@ -129,10 +130,15 @@ function usePagination<R, P extends unknown[], FR>(
     paging({ [pageSizeKey]: pageSize });
   };
 
-  const reload = () => {
+  const reloading = ref(false);
+  const reload = async () => {
     const { defaultParams, manual } = finallyOptions;
     reset();
-    !manual && run(...defaultParams);
+    if (!manual) {
+      reloading.value = true;
+      await run(...defaultParams);
+      reloading.value = false;
+    }
   };
 
   const total = computed<number>(() => get(data.value, totalKey, 0));
@@ -163,6 +169,7 @@ function usePagination<R, P extends unknown[], FR>(
     pageSize,
     total,
     totalPage,
+    reloading,
     run,
     changeCurrent,
     changePageSize,

diff --git a/src/useRequest.ts b/src/useRequest.ts
@@ -1,3 +1,4 @@
+import { Ref, ref } from 'vue';
 import {
   BaseOptions,
   FormatOptions,
@@ -10,6 +11,7 @@ import { IService } from './core/utils/types';
 
 export interface RequestResult<R, P extends unknown[]>
   extends Omit<BaseResult<R, P>, 'reset'> {
+  reloading: Ref<boolean>;
   reload: () => void;
 }
 function useRequest<R, P extends unknown[] = any>(
@@ -33,15 +35,21 @@ function useRequest<R, P extends unknown[], FR>(
     (options ?? {}) as any,
   );
 
-  const reload = () => {
+  const reloading = ref(false);
+  const reload = async () => {
     const { defaultParams = ([] as unknown) as P, manual } = options!;
     reset();
-    !manual && run(...defaultParams);
+    if (!manual) {
+      reloading.value = true;
+      await run(...defaultParams);
+      reloading.value = false;
+    }
   };
 
   return {
     reload,
     run,
+    reloading,
     ...rest,
   };
 }