Merge pull request #473 from picsoritdidnthappen/database-staging

adding lazy loading for bounties + claims
picsoritdidnthappen · Jan 13, 2025 · aa42e24 · aa42e24
2 parents 9a80dca + f304b07
commit aa42e24
Show file tree

Hide file tree

Showing 9 changed files with 105 additions and 20,521 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -27,6 +27,7 @@
     "@trpc/next": "11.0.0-rc.592",
     "@trpc/react-query": "11.0.0-rc.592",
     "@trpc/server": "11.0.0-rc.592",
+    "@types/react-infinite-scroller": "^1.2.5",
     "axios": "^1.6.8",
     "clsx": "^2.0.0",
     "framer-motion": "^11.0.12",
@@ -37,6 +38,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-dropzone": "^14.2.3",
+    "react-infinite-scroller": "^1.2.5",
     "react-toastify": "^10.0.5",
     "superjson": "^2.2.1",
     "supports-color": "8.1.1",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/bounty/BountyClaims.tsx b/src/components/bounty/BountyClaims.tsx
@@ -3,6 +3,7 @@ import React, { useEffect, useState } from 'react';
 import { trpc } from '@/trpc/client';
 import { useGetChain } from '@/hooks/useGetChain';
 import ClaimList from '@/components/bounty/ClaimList';
+import InfiniteScroll from 'react-infinite-scroller';
 import { bountyCurrentVotingClaim } from '@/utils/web3';
 
 const PAGE_SIZE = 9;
@@ -77,41 +78,42 @@ export default function BountyClaims({ bountyId }: { bountyId: string }) {
         </div>
       </div>
       {claims.data && (
-        <ClaimList
-          bountyId={bountyId}
-          isMultiplayer={bounty?.isMultiplayer || false}
-          votingClaim={
-            votingClaim
-              ? {
-                  ...votingClaim,
-                  accepted: votingClaim.is_accepted || false,
-                  id: votingClaim.id.toString(),
-                  bountyId: votingClaim.bounty_id.toString(),
-                  issuer: votingClaim.issuer,
-                }
-              : null
+        <InfiniteScroll
+          loadMore={async () => await claims.fetchNextPage()}
+          hasMore={claims.hasNextPage && !claims.isFetchingNextPage}
+          loader={
+            <div key='loader' className='animate-pulse text-center'>
+              Loading more...
+            </div>
           }
-          claims={claims.data.pages.flatMap((page) => {
-            return page.items.map((item) => ({
-              ...item,
-              accepted: item.is_accepted || false,
-              id: item.id.toString(),
-              issuer: item.issuer,
-              bountyId: item.bounty_id.toString(),
-            }));
-          })}
-        />
-      )}
-      {claims.hasNextPage && (
-        <div className='flex justify-center items-center'>
-          <button
-            onClick={() => claims.fetchNextPage()}
-            className='border border-white rounded-full px-5 backdrop-blur-sm bg-[#D1ECFF]/20 py-2'
-            disabled={claims.isFetchingNextPage}
-          >
-            {claims.isFetchingNextPage ? 'loading…' : 'show more'}
-          </button>
-        </div>
+          threshold={300}
+        >
+          <ClaimList
+            key={claims.data.pages[0]?.items[0]?.id || 'empty-list'}
+            bountyId={bountyId}
+            isMultiplayer={bounty?.isMultiplayer || false}
+            votingClaim={
+              votingClaim
+                ? {
+                    ...votingClaim,
+                    accepted: votingClaim.is_accepted || false,
+                    id: votingClaim.id.toString(),
+                    bountyId: votingClaim.bounty_id.toString(),
+                    issuer: votingClaim.issuer,
+                  }
+                : null
+            }
+            claims={claims.data.pages.flatMap((page) => {
+              return page.items.map((item) => ({
+                ...item,
+                accepted: item.is_accepted || false,
+                id: item.id.toString(),
+                issuer: item.issuer,
+                bountyId: item.bounty_id.toString(),
+              }));
+            })}
+          />
+        </InfiniteScroll>
       )}
     </div>
   );

diff --git a/src/components/bounty/BountyInfo.tsx b/src/components/bounty/BountyInfo.tsx
@@ -136,15 +136,15 @@ export default function BountyInfo({ bountyId }: { bountyId: string }) {
           <p className='mt-5 normal-case break-words'>
             {bounty.data.description}
           </p>
-          <p className='flex flex-row mt-5 normal-case break-all flex-wrap'>
+          <div className='flex flex-row mt-5 normal-case break-all flex-wrap'>
             bounty issuer:&nbsp;
-            <span className='flex flex-row  items-center justify-end overflow-hidden'>
+            <div className='flex flex-row  items-center justify-end overflow-hidden'>
               <DisplayAddress chain={chain} address={bounty.data.issuer} />
               <div className='ml-2'>
                 <CopyAddressButton address={bounty.data.issuer} />
               </div>
-            </span>
-          </p>
+            </div>
+          </div>
           {isAdmin.data && (
             <button
               onClick={() => {

diff --git a/src/components/bounty/BountyMultiplayer.tsx b/src/components/bounty/BountyMultiplayer.tsx
@@ -68,11 +68,11 @@ export default function BountyMultiplayer({
             <div className='flex flex-col px-0'>
               {participants.isSuccess ? (
                 participants.data.map((participant) => (
-                  <p
+                  <div
                     key={participant.user_address}
                     className='flex items-center justify-between w-full'
                   >
-                    <div className='flex flex-row items-center '>
+                    <div className='flex flex-row items-center'>
                       <div className='mr-1'>
                         <CopyAddressButton
                           address={participant.user_address}
@@ -88,7 +88,7 @@ export default function BountyMultiplayer({
                     {`${formatEther(BigInt(participant.amount))} ${
                       chain.currency
                     }`}
-                  </p>
+                  </div>
                 ))
               ) : (
                 <p>Loading addresses…</p>

diff --git a/src/components/bounty/PastBountyCard.tsx b/src/components/bounty/PastBountyCard.tsx
@@ -1,4 +1,3 @@
-import Link from 'next/link';
 import React, { useEffect, useState } from 'react';
 import { ChainId, Claim } from '@/utils/types';
 import { formatEther } from 'viem';
@@ -32,9 +31,11 @@ export default function PastBountyCard({
   return (
     <>
       {claim && (
-        <Link
+        <div
           className='lg:col-span-4 p-3 bg-whiteblue border-1 rounded-xl cursor-pointer'
-          href={`/${chain?.slug}/bounty/${claim.bountyId}`}
+          onClick={() => {
+            window.location.href = `/${chain?.slug}/bounty/${claim.bountyId}`;
+          }}
         >
           <div className='p-[2px] text-white relative bg-poidhRed border-poidhRed border-2 rounded-xl'>
             <div>
@@ -77,7 +78,7 @@ export default function PastBountyCard({
               {formatEther(BigInt(bountyAmount))} {chain?.currency}
             </span>
           </div>
-        </Link>
+        </div>
       )}
     </>
   );

diff --git a/src/components/layout/ContentHome.tsx b/src/components/layout/ContentHome.tsx
@@ -7,6 +7,7 @@ import { trpc } from '@/trpc/client';
 import BountyList from '@/components/ui/BountyList';
 import { cn } from '@/utils';
 import { FormControl, MenuItem, Select } from '@mui/material';
+import InfiniteScroll from 'react-infinite-scroller';
 import { SortIcon } from '@/components/global/Icons';
 
 type DisplayType = 'open' | 'progress' | 'past';
@@ -30,7 +31,7 @@ export default function ContentHome() {
   );
 
   return (
-    <>
+    <div>
       <div className='z-1 flex flex-wrap container mx-auto border-b border-white hover:border-white py-6 md:py-12 sm:py-8 w-full items-center px-8'>
         <div className='hidden md:flex flex-1'></div>
         <div className='w-full md:w-auto flex justify-center'>
@@ -117,33 +118,34 @@ export default function ContentHome() {
 
       <div className='pb-20 z-1'>
         {bounties.data && (
-          <BountyList
-            bounties={bounties.data.pages.flatMap((page) =>
-              page.items.map((bounty) => ({
-                id: bounty.id.toString(),
-                title: bounty.title,
-                description: bounty.description,
-                amount: bounty.amount,
-                isMultiplayer: bounty.is_multiplayer || false,
-                inProgress: bounty.in_progress || false,
-                hasClaims: bounty.claims.length > 0,
-                network: chain.slug,
-              }))
-            )}
-          />
+          <InfiniteScroll
+            loadMore={async () => await bounties.fetchNextPage()}
+            hasMore={bounties.hasNextPage && !bounties.isFetchingNextPage}
+            loader={
+              <div key='loader' className='animate-pulse text-center'>
+                Loading more...
+              </div>
+            }
+            threshold={300}
+          >
+            <BountyList
+              key={bounties.data.pages[0]?.items[0]?.id || 'empty-list'}
+              bounties={bounties.data.pages.flatMap((page) =>
+                page.items.map((bounty) => ({
+                  id: bounty.id.toString(),
+                  title: bounty.title,
+                  description: bounty.description,
+                  amount: bounty.amount,
+                  isMultiplayer: bounty.is_multiplayer || false,
+                  inProgress: bounty.in_progress || false,
+                  hasClaims: bounty.claims.length > 0,
+                  network: chain.slug,
+                }))
+              )}
+            />
+          </InfiniteScroll>
         )}
       </div>
-      {bounties.hasNextPage && (
-        <div className='flex justify-center items-center pb-96'>
-          <button
-            className='border border-white rounded-full px-5  backdrop-blur-sm bg-[#D1ECFF]/20  py-2'
-            onClick={() => bounties.fetchNextPage()}
-            disabled={bounties.isFetchingNextPage}
-          >
-            {bounties.isFetchingNextPage ? 'loading...' : 'show more'}
-          </button>
-        </div>
-      )}
-    </>
+    </div>
   );
 }
diff --git a/src/components/ui/BountyList.tsx b/src/components/ui/BountyList.tsx
@@ -27,7 +27,6 @@ export default function BountyList({ bounties }: { bounties: Bounty[] }) {
             scale: 1,
             transition: {
               delayChildren: 0.3,
-              staggerChildren: 0.2,
             },
           },
         }}