fix: infinite scroll on collections page (#211)

* infinite scroll on collections page * fix: select button
ArkProjectNFTs · Apr 26, 2024 · cf1c689 · cf1c689
1 parent dda55f1
commit cf1c689
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 44 deletions.
diff --git a/apps/web/src/app/(routes)/bridge/[address]/TokenList.tsx b/apps/web/src/app/(routes)/bridge/[address]/TokenList.tsx
@@ -85,7 +85,7 @@ export default function TokenList({ nftContractAddress }: TokenListProps) {
   // const hasMoreThan100Nfts =
   //   nftsData.pages.length > 1 || (nftsData.pages.length === 1 && hasNextPage);
   const hasMoreThanMaxSelectNfts =
-    nftsData.pages[0]?.ownedNfts.length ?? 0 > MAX_SELECTED_ITEMS;
+    (nftsData.pages[0]?.ownedNfts.length ?? 0) > MAX_SELECTED_ITEMS;
 
   const isAllSelected =
     (totalSelectedNfts === MAX_SELECTED_ITEMS ||

diff --git a/apps/web/src/app/(routes)/bridge/_components/CollectionGrid.tsx b/apps/web/src/app/(routes)/bridge/_components/CollectionGrid.tsx
@@ -2,6 +2,7 @@ import Link from "next/link";
 
 import CollectionNftsEmptyState from "~/app/_components/CollectionNftsEmptyState";
 import ConditionalWrapper from "~/app/_components/ConditionalWrapper";
+import InfiniteScrollButton from "~/app/_components/InfiniteScrollButton";
 import NftCard from "~/app/_components/NftCard/NftCard";
 import NftsLoadingState from "~/app/_components/NftsLoadingState";
 import useCurrentChain from "~/app/_hooks/useCurrentChain";
@@ -11,6 +12,9 @@ import { type Collection } from "~/server/api/types";
 import useNftSelection from "../_hooks/useNftSelection";
 
 interface CollectionGridProps {
+  fetchNextPage: () => void;
+  hasNextPage?: boolean;
+  isFetchingNextPage: boolean;
   nftCollectionPages?: Array<{
     collections: Array<Collection>;
     totalCount: number;
@@ -21,6 +25,9 @@ interface CollectionGridProps {
  * TODO @YohanTz: Take time to optimize the lists with React.memo etc.
  */
 export default function CollectionGrid({
+  fetchNextPage,
+  hasNextPage,
+  isFetchingNextPage,
   nftCollectionPages,
 }: CollectionGridProps) {
   const { sourceChain } = useCurrentChain();
@@ -36,43 +43,52 @@ export default function CollectionGrid({
   }
 
   return (
-    <div className="mb-8 grid grid-cols-2 gap-5 sm:grid-cols-3 lg:grid-cols-5">
-      {nftCollectionPages?.map((nftCollectionPage) => {
-        return nftCollectionPage.collections.map((nftCollection) => {
-          return (
-            <ConditionalWrapper
-              wrapper={(children) =>
-                nftCollection.isBridgeable ? (
-                  <Link
-                    className="pb-2.5 pl-2.5"
-                    href={`/bridge/${nftCollection.contractAddress}`}
-                    prefetch
-                  >
-                    {children}
-                  </Link>
-                ) : (
-                  <div className="pb-2.5 pl-2.5">{children}</div>
-                )
-              }
-              key={nftCollection.contractAddress}
-            >
-              <NftCard
-                isSelected={
-                  nftCollection.contractAddress === selectedCollectionAddress
+    <>
+      <div className="mb-8 grid grid-cols-2 gap-5 sm:grid-cols-3 lg:grid-cols-5">
+        {nftCollectionPages?.map((nftCollectionPage) => {
+          return nftCollectionPage.collections.map((nftCollection) => {
+            return (
+              <ConditionalWrapper
+                wrapper={(children) =>
+                  nftCollection.isBridgeable ? (
+                    <Link
+                      className="pb-2.5 pl-2.5"
+                      href={`/bridge/${nftCollection.contractAddress}`}
+                      prefetch
+                    >
+                      {children}
+                    </Link>
+                  ) : (
+                    <div className="pb-2.5 pl-2.5">{children}</div>
+                  )
                 }
-                cardType="collection"
-                chain={sourceChain}
-                disabled={!nftCollection.isBridgeable}
-                isBridgeable={nftCollection.isBridgeable}
-                media={nftCollection.media}
-                numberOfNfts={nftCollection.totalBalance}
-                onClick={() => {}}
-                title={nftCollection.name}
-              />
-            </ConditionalWrapper>
-          );
-        });
-      })}
-    </div>
+                key={nftCollection.contractAddress}
+              >
+                <NftCard
+                  isSelected={
+                    nftCollection.contractAddress === selectedCollectionAddress
+                  }
+                  cardType="collection"
+                  chain={sourceChain}
+                  disabled={!nftCollection.isBridgeable}
+                  isBridgeable={nftCollection.isBridgeable}
+                  media={nftCollection.media}
+                  numberOfNfts={nftCollection.totalBalance}
+                  onClick={() => {}}
+                  title={nftCollection.name}
+                />
+              </ConditionalWrapper>
+            );
+          });
+        })}
+      </div>
+      <InfiniteScrollButton
+        className="mx-auto my-14 flex w-full justify-center"
+        fetchAuto={false}
+        fetchNextPage={fetchNextPage}
+        hasNextPage={hasNextPage}
+        isFetchingNextPage={isFetchingNextPage}
+      />
+    </>
   );
 }
diff --git a/apps/web/src/app/(routes)/bridge/_components/Collections.tsx b/apps/web/src/app/(routes)/bridge/_components/Collections.tsx
@@ -8,25 +8,45 @@ import CollectionHeader from "./CollectionHeader";
 export default function Collections() {
   const { sourceChain } = useCurrentChain();
 
-  const { data: l1CollectionsData, totalCount: l1CollectionsTotalCount } =
-    useInfiniteEthereumCollections();
-  const { data: l2CollectionsData, totalCount: l2CollectionsTotalCount } =
-    useInfiniteStarknetCollections();
+  const {
+    data: l1CollectionsData,
+    fetchNextPage: l1FetchNextPage,
+    hasNextPage: l1HasNextPage,
+    isFetchingNextPage: l1IsFetchingNextPage,
+    totalCount: l1CollectionsTotalCount,
+  } = useInfiniteEthereumCollections();
+  const {
+    data: l2CollectionsData,
+    fetchNextPage: l2FetchNextPage,
+    hasNextPage: l2HasNextPage,
+    isFetchingNextPage: l2IsFetchingNextPage,
+    totalCount: l2CollectionsTotalCount,
+  } = useInfiniteStarknetCollections();
 
   const pages =
     sourceChain === "Ethereum"
       ? l1CollectionsData?.pages
       : l2CollectionsData?.pages;
-
   const totalCount =
     sourceChain === "Ethereum"
       ? l1CollectionsTotalCount
       : l2CollectionsTotalCount;
+  const hasNextPage =
+    sourceChain === "Ethereum" ? l1HasNextPage : l2HasNextPage;
+  const fetchNextPage =
+    sourceChain === "Ethereum" ? l1FetchNextPage : l2FetchNextPage;
+  const isFetchingNextPage =
+    sourceChain === "Ethereum" ? l1IsFetchingNextPage : l2IsFetchingNextPage;
 
   return (
     <>
       <CollectionHeader collectionTotalCount={totalCount} />
-      <CollectionGrid nftCollectionPages={pages} />
+      <CollectionGrid
+        fetchNextPage={() => void fetchNextPage()}
+        hasNextPage={hasNextPage}
+        isFetchingNextPage={isFetchingNextPage}
+        nftCollectionPages={pages}
+      />
     </>
   );
 }