fix: pagination to aggregate value in states.

geyserfund · Dec 21, 2022 · 52f1080 · 52f1080
1 parent e0a52dc
commit 52f1080
Show file tree

Hide file tree

Showing 8 changed files with 60 additions and 60 deletions.
diff --git a/src/config/apollo-client/apollo-client-cache.ts b/src/config/apollo-client/apollo-client-cache.ts
@@ -14,13 +14,16 @@ const mergeIdentifiableCollectionUsingCursorIDs = (
   return [...existing, ...incoming];
 };
 
+// The fetch policy still had issues when multiple queries were done in the same component,
+// and this caused me to end up store and merge to our own state, instead of apollo
+
 const merge = (
   existing: IdentifiableCollection,
   incoming: IdentifiableCollection,
-  { args, readField }: any,
+  { readField }: any,
 ) => {
-  const merged: IdentifiableCollection = existing ? [...existing] : [];
-  incoming.forEach((item: any, index) => {
+  const merged: IdentifiableCollection = existing ? existing.slice(0) : [];
+  incoming.forEach((item: any) => {
     merged.some(
       (existingValue) =>
         readField('id', existingValue) === readField('id', item),
@@ -52,7 +55,7 @@ export const cache: InMemoryCache = new InMemoryCache({
           merge,
         },
         getFunders: {
-          keyArgs: false,
+          keyArgs: ['input', ['where', 'orderby']],
           merge,
         },
         projects: {

diff --git a/src/helpers/ScrollInvoke.tsx b/src/helpers/ScrollInvoke.tsx
@@ -3,12 +3,12 @@ import React, { useEffect } from 'react';
 interface ScrollInvokeProps {
   elementId: string;
   onScrollEnd: () => Promise<void>;
-  isLoading?: boolean;
+  isLoading?: React.MutableRefObject<boolean>;
 }
 
 let loading = false;
 
-const ThresholdHeightBeforeScrollEnd = 80;
+const ThresholdHeightBeforeScrollEnd = 300;
 
 export const ScrollInvoke = ({
   elementId,
@@ -18,50 +18,34 @@ export const ScrollInvoke = ({
   useEffect(() => {
     const element = document.getElementById(elementId);
     if (element) {
-      element.addEventListener('scroll', async () => {
-        if (isLoading || loading) {
-          return;
-        }
-
-        loading = true;
-
-        const isInView =
-          element.scrollHeight - element.scrollTop - element.clientHeight <=
-          ThresholdHeightBeforeScrollEnd;
-        if (isInView) {
-          await onScrollEnd();
-        }
-
-        loading = false;
-      });
+      element.addEventListener('scroll', handleScroll);
     }
 
     return () => {
       if (element) {
-        element.removeEventListener('scroll', async () => {
-          if (isLoading || loading) {
-            return;
-          }
-
-          loading = true;
-
-          const isInView =
-            element.scrollHeight - element.scrollTop - element.clientHeight <=
-            ThresholdHeightBeforeScrollEnd;
-          if (isInView) {
-            await onScrollEnd();
-          }
-
-          loading = false;
-        });
+        element.removeEventListener('scroll', handleScroll);
       }
     };
   }, []);
 
+  async function handleScroll(this: HTMLElement) {
+    if ((isLoading && isLoading.current) || loading) {
+      return;
+    }
+
+    loading = true;
+
+    const isInView =
+      this.scrollHeight - this.scrollTop - this.clientHeight <=
+      ThresholdHeightBeforeScrollEnd;
+    if (isInView) {
+      await onScrollEnd();
+    }
+
+    loading = false;
+  }
+
   return (
-    <div id={`landing-page-contributions-list-refetch-${elementId}`}>
-      {/* <Divider /> */}
-      {/* {isLoading && <Loader />} */}
-    </div>
+    <div id={`landing-page-contributions-list-refetch-${elementId}`}></div>
   );
 };
diff --git a/src/hooks/usePaginationHook.tsx b/src/hooks/usePaginationHook.tsx
@@ -18,6 +18,8 @@ export const usePaginationHook = <Type,>({
   where,
   orderBy,
 }: usePaginationHookProps) => {
+  const [list, setList] = useListenerState<Type[]>([]);
+
   const [noMoreItems, setNoMoreItems] = useListenerState(false);
 
   const [isLoadingMore, setIsLoadingMore] = useListenerState(false);
@@ -27,10 +29,14 @@ export const usePaginationHook = <Type,>({
     ...(cursorID !== undefined && { id: cursorID }),
   });
 
-  const handleDataUpdate = (data: any[]) => {
+  const handleDataUpdate = (data: Type[]) => {
     if (data && data.length > 0) {
+      setList(data);
+
       if (data.length < itemLimit) {
         setNoMoreItems(true);
+      } else {
+        setNoMoreItems(false);
       }
 
       const options: PaginationInput = {};
@@ -62,11 +68,13 @@ export const usePaginationHook = <Type,>({
       updateQuery: (_: any, { fetchMoreResult }: any) => {
         if (fetchMoreResult[queryName].length < itemLimit) {
           setNoMoreItems(true);
+        } else {
+          setNoMoreItems(false);
         }
 
-        return {
-          [queryName]: fetchMoreResult[queryName],
-        };
+        setList([...list.current, ...fetchMoreResult[queryName]]);
+
+        return null;
       },
     });
 
@@ -78,5 +86,6 @@ export const usePaginationHook = <Type,>({
     isLoadingMore,
     fetchNext,
     noMoreItems,
+    data: list.current,
   };
 };
diff --git a/src/hooks/useQueryWithPagination.tsx b/src/hooks/useQueryWithPagination.tsx
@@ -27,7 +27,7 @@ export const useQueryWithPagination = <Type,>({
     throw Error('Invalid query');
   }
 
-  const { error, loading, data, fetchMore } = useQuery<QueryResponseData<Type>>(
+  const { error, loading, fetchMore } = useQuery<QueryResponseData<Type>>(
     query,
     {
       variables: {
@@ -38,11 +38,17 @@ export const useQueryWithPagination = <Type,>({
           where,
           orderBy,
         },
+        fetch,
+      },
+      onCompleted(data) {
+        const resultItems = data[queryName];
+        handleDataUpdate(resultItems);
       },
     },
   );
-  const { isLoadingMore, fetchNext, noMoreItems, handleDataUpdate } =
-    usePaginationHook({
+
+  const { data, isLoadingMore, fetchNext, noMoreItems, handleDataUpdate } =
+    usePaginationHook<Type>({
       fetchMore,
       queryName,
       itemLimit,
@@ -51,29 +57,27 @@ export const useQueryWithPagination = <Type,>({
     });
 
   useEffect(() => {
-    if (data && data[queryName]) {
-      const resultItems = data[queryName];
-      handleDataUpdate(resultItems);
-
+    if (data && data.length > 0) {
       let newItems;
 
       if (resultMap) {
-        newItems = resultMap(resultItems);
+        newItems = resultMap(data);
       } else {
-        newItems = resultItems;
+        newItems = data;
       }
 
       setItems(newItems);
 
       if (
-        resultItems.length === itemLimit &&
+        data.length === itemLimit &&
         newItems.length < itemLimit - 2 &&
         !noMoreItems.current
       ) {
         fetchNext();
       }
     }
   }, [data]);
+
   return {
     isLoading: loading,
     isLoadingMore,

diff --git a/src/pages/landing/components/LandingPageContributionsList.tsx b/src/pages/landing/components/LandingPageContributionsList.tsx
@@ -83,7 +83,7 @@ export const LandingPageContributionsList = ({ itemLimit = 10 }: Props) => {
         <ScrollInvoke
           elementId="app-route-content-root"
           onScrollEnd={fetchNext}
-          isLoading={isLoadingMore.current}
+          isLoading={isLoadingMore}
         />
       )}
     </VStack>

diff --git a/src/pages/projectView/ActivityPanel/ProjectContributionList.tsx b/src/pages/projectView/ActivityPanel/ProjectContributionList.tsx
@@ -38,7 +38,7 @@ export const ProjectContributionList = ({
         <ScrollInvoke
           elementId="project-activity-list-container"
           onScrollEnd={fundingTxs.fetchNext}
-          isLoading={fundingTxs.isLoadingMore.current}
+          isLoading={fundingTxs.isLoadingMore}
         />
       )}
     </VStack>

diff --git a/src/pages/projectView/ActivityPanel/ProjectFundingInitialInfoScreen.tsx b/src/pages/projectView/ActivityPanel/ProjectFundingInitialInfoScreen.tsx
@@ -36,7 +36,7 @@ type Props = {
   fundingTx: any;
 };
 
-const itemLimit = 15;
+const itemLimit = 30;
 
 export const ProjectFundingInitialInfoScreen = ({
   handleViewClick,

diff --git a/src/pages/projectView/ActivityPanel/ProjectLeaderboardList.tsx b/src/pages/projectView/ActivityPanel/ProjectLeaderboardList.tsx
@@ -38,7 +38,7 @@ export const ProjectLeaderboardList = ({
         <ScrollInvoke
           elementId="project-activity-list-container"
           onScrollEnd={funders.fetchNext}
-          isLoading={funders.isLoadingMore.current}
+          isLoading={funders.isLoadingMore}
         />
       )}
     </VStack>