Add limit prop as a number logic and use in firebase query

BuidlGuidl · Mar 1, 2024 · 3ebcab8 · 3ebcab8
1 parent 48320f5
commit 3ebcab8
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 13 deletions.
diff --git a/packages/nextjs/app/_components/CompletedGrants.tsx b/packages/nextjs/app/_components/CompletedGrants.tsx
@@ -33,9 +33,8 @@ const CompletedGrantCard = ({ title, description, askAmount, builder, link, comp
   );
 };
 
-export const CompletedGrants = async ({ reducedView = false }) => {
-  const completedGrants = await getAllCompletedGrants();
-  const grantsToShow = reducedView ? completedGrants.slice(0, 8) : completedGrants;
+export const CompletedGrants = async ({ limit }: { limit?: number }) => {
+  const completedGrants = await getAllCompletedGrants(limit);
 
   return (
     <div className="bg-base-100">
@@ -46,17 +45,17 @@ export const CompletedGrants = async ({ reducedView = false }) => {
         </div>
         <div
           className={`${
-            reducedView ? "grant-container-rwd" : ""
+            limit ? "grant-container-rwd" : ""
           } flex flex-col items-center justify-center md:flex-row md:flex-wrap md:items-start gap-6`}
         >
-          {grantsToShow.map(grant => (
+          {completedGrants.map(grant => (
             <CompletedGrantCard key={grant.id} {...grant} />
           ))}
         </div>
-        {reducedView && (
+        {limit && (
           <div className="link w-full text-center mt-8 text-lg lg:text-xl">
             <a href="/completed-grants" className="">
-              See all completed grants ({completedGrants.length})
+              See all completed grants
             </a>
           </div>
         )}

diff --git a/packages/nextjs/app/page.tsx b/packages/nextjs/app/page.tsx
@@ -12,7 +12,7 @@ const Home = () => {
       <GrantsStats />
       <EcosystemGrants />
       <CommunityGrant />
-      <CompletedGrants reducedView={true} />
+      <CompletedGrants limit={8} />
       <ActiveGrants />
     </>
   );

diff --git a/packages/nextjs/services/database/grants.ts b/packages/nextjs/services/database/grants.ts
@@ -75,12 +75,15 @@ export const getAllGrantsForReview = async () => {
   }
 };
 
-export const getAllCompletedGrants = async () => {
+export const getAllCompletedGrants = async (limit?: number) => {
   try {
-    const grantsSnapshot = await grantsCollection
-      .where("status", "==", PROPOSAL_STATUS.COMPLETED)
-      .orderBy("completedAt", "desc")
-      .get();
+    let query = grantsCollection.where("status", "==", PROPOSAL_STATUS.COMPLETED).orderBy("completedAt", "desc");
+
+    if (limit) {
+      query = query.limit(limit);
+    }
+
+    const grantsSnapshot = await query.get();
     const grants: GrantData[] = [];
     grantsSnapshot.forEach(doc => {
       grants.push({ id: doc.id, ...doc.data() } as GrantData);