refactor - load state

vdmrgv · Jul 12, 2022 · 50f0173 · 50f0173
1 parent 5fc082e
commit 50f0173
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 49 deletions.
diff --git a/src/InfiniteScroll.ts b/src/InfiniteScroll.ts
@@ -27,14 +27,8 @@ class InfiniteScroll {
       clientHeight: 0,
       clientWidth: 0,
       isLoading: {
-        start: {
-          vertical: false,
-          horizontal: false,
-        },
-        end: {
-          vertical: false,
-          horizontal: false,
-        },
+        vertical: false,
+        horizontal: false,
       },
       computedScrollThreshold: {
         vertical: 0,
@@ -149,29 +143,24 @@ class InfiniteScroll {
     offset: Required<ScrollOffsetValues>
   ): Promise<void> {
     const {
-      state: {
-        isLoading: { start, end },
-        thresholdReached,
-      },
+      state: { isLoading, thresholdReached },
       props: { next, hasMore },
     } = this;
 
     const axis = direction1 === ScrollDirection.UP ? 'vertical' : 'horizontal';
 
     // if the download has not started
-    if (!(start[axis] || end[axis])) {
+    if (!isLoading[axis]) {
       const canLoad1 = hasMore[direction1] && !thresholdReached[direction1] && offset![direction1];
       const canLoad2 = !canLoad1 && hasMore[direction2] && !thresholdReached[direction2] && offset![direction2];
 
       if (canLoad1 || canLoad2) {
         try {
           const loadDirection = canLoad1 ? direction1 : direction2;
           this.state.thresholdReached[loadDirection] = true;
-          this.state.isLoading.start[axis] = true;
+          this.state.isLoading[axis] = true;
           await next(loadDirection);
         } finally {
-          this.state.isLoading.end[axis] = true;
-
           // make an axis check after the download is complete
           setTimeout(() => this._onLoadComplete(axis), 0);
         }
@@ -296,14 +285,8 @@ class InfiniteScroll {
 
     // download is over
     this.state.isLoading = {
-      start: {
-        ...this.state.isLoading.start,
-        [axis]: false,
-      },
-      end: {
-        ...this.state.isLoading.end,
-        [axis]: false,
-      },
+      ...this.state.isLoading,
+      [axis]: false,
     };
     this.state[isVertical ? 'scrollHeight' : 'scrollWidth'] = scrollSize;
     this.state[isVertical ? 'rowCount' : 'columnCount'] = newDataLength;
@@ -315,9 +298,7 @@ class InfiniteScroll {
     this.props = props;
 
     const {
-      state: {
-        isLoading: { start, end },
-      },
+      state: { isLoading },
       props: { rowCount, columnCount, hasMore },
       _scrollingContainerRef,
     } = this;
@@ -334,8 +315,7 @@ class InfiniteScroll {
         `You provided props with "hasMore: { left: ${!!hasMore.left}, right: ${!!hasMore.right} }" but "columnCount" is "undefined"`
       );
 
-    // if all downloads are complete try to download more
-    if (!(start.vertical || start.horizontal || end.vertical || end.horizontal)) {
+    if (!(isLoading.vertical && isLoading.horizontal)) {
       this._checkOffsetAndLoadMore();
     }
   };

diff --git a/src/__tests__/InfiniteScroll.test.ts b/src/__tests__/InfiniteScroll.test.ts
@@ -396,13 +396,10 @@ describe('InfiniteScroll', () => {
 
         const {
           onPropsChange,
-          state: {
-            isLoading: { start, end },
-          },
+          state: { isLoading },
         } = instance;
 
-        expect(start).toEqual({ vertical: false, horizontal: false });
-        expect(end).toEqual({ vertical: false, horizontal: false });
+        expect(isLoading).toEqual({ vertical: false, horizontal: false });
 
         onPropsChange({
           ...instance.props,
@@ -413,25 +410,19 @@ describe('InfiniteScroll', () => {
         await update();
 
         const {
-          state: {
-            isLoading: { start: upStart, end: upEnd },
-          },
+          state: { isLoading: upIsLoading },
         } = instance;
 
-        expect(upStart).toEqual({ vertical: true, horizontal: false });
-        expect(upEnd).toEqual({ vertical: false, horizontal: false });
+        expect(upIsLoading).toEqual({ vertical: true, horizontal: false });
 
         continueLoading();
-        await settleUpdate();
+        await update();
 
         const {
-          state: {
-            isLoading: { start: finalStart, end: finalEnd },
-          },
+          state: { isLoading: finalIsLoading },
         } = instance;
 
-        expect(finalStart).toEqual({ vertical: true, horizontal: false });
-        expect(finalEnd).toEqual({ vertical: true, horizontal: false });
+        expect(finalIsLoading).toEqual({ vertical: false, horizontal: false });
       });
 
       describe('normal direction', () => {

diff --git a/src/types.ts b/src/types.ts
@@ -53,10 +53,7 @@ export type ScrollingContainerRef = Required<ScrollSize> &
 export type InfiniteScrollState = DatasetLength &
   Required<ScrollSize> &
   Required<ClientSize> & {
-    isLoading: {
-      start: Required<ScrollAxis<boolean>>;
-      end: Required<ScrollAxis<boolean>>;
-    };
+    isLoading: Required<ScrollAxis<boolean>>;
     thresholdReached: ScrollDirectionState;
     computedScrollThreshold: Required<ScrollAxis<number>>;
   };