From 3ebcab8a5d6681b60e3ec58d08e86ae8a2928398 Mon Sep 17 00:00:00 2001
From: tokodev <pablo@asdloop.com>
Date: Fri, 1 Mar 2024 12:56:01 +0100
Subject: [PATCH] Add limit prop as a number logic and use in firebase query

---
 packages/nextjs/app/_components/CompletedGrants.tsx | 13 ++++++-------
 packages/nextjs/app/page.tsx                        |  2 +-
 packages/nextjs/services/database/grants.ts         | 13 ++++++++-----
 3 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/packages/nextjs/app/_components/CompletedGrants.tsx b/packages/nextjs/app/_components/CompletedGrants.tsx
index e13bfd2..751976b 100644
--- 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
index 4d45e5d..3fb9eef 100644
--- 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
index e8a1df1..7950453 100644
--- 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);