Active grants page (#134)

BuidlGuidl · Aug 12, 2024 · f5ff154 · f5ff154
1 parent 7230af2
commit f5ff154
Show file tree

Hide file tree

Showing 4 changed files with 93 additions and 4 deletions.
diff --git a/packages/nextjs/app/_components/ActiveGrants.tsx b/packages/nextjs/app/_components/ActiveGrants.tsx
@@ -18,7 +18,7 @@ const ActiveGrantRow = ({ title, askAmount, builder, approvedAt }: GrantData) =>
 };
 
 export const ActiveGrants = async () => {
-  const activeGrants = await getAllActiveGrants();
+  const activeGrants = await getAllActiveGrants(8);
 
   if (!activeGrants.length) {
     return null;
@@ -56,6 +56,11 @@ export const ActiveGrants = async () => {
             </tbody>
           </table>
         </div>
+        <div className="link w-full text-center mt-6 lg:text-lg">
+          <a href="/active-grants" className="">
+            See all active grants
+          </a>
+        </div>
       </div>
     </div>
   );

diff --git a/packages/nextjs/app/active-grants/page.tsx b/packages/nextjs/app/active-grants/page.tsx
@@ -0,0 +1,75 @@
+import Image from "next/image";
+import { NextPage } from "next";
+import { Address } from "~~/components/scaffold-eth";
+import { getAllActiveGrants } from "~~/services/database/grants";
+import { GrantData } from "~~/services/database/schema";
+import { formatDateFromNow } from "~~/utils/grants";
+
+export const dynamic = "force-dynamic";
+
+const ActiveGrantCard = ({ title, description, askAmount, builder, link, approvedAt }: GrantData) => {
+  return (
+    <div className="w-72 md:w-[290px] bg-primary min-h-full rounded-2xl overflow-hidden shadow-lg">
+      <div className="flex justify-between items-center bg-white py-3 px-4 text-sm">
+        <div className="flex items-center">
+          <Image src="/assets/eth-completed-grant.png" alt="ETH Icon" width={10} height={10} />
+          <span className="ml-1 font-bold">{askAmount} ETH</span>
+        </div>
+        <span>{approvedAt ? formatDateFromNow(approvedAt) : "-"}</span>
+      </div>
+      <div className="bg-base-300 p-4 flex items-center justify-start h-[6rem]">
+        <p className="text-xl m-0 line-clamp-2">{title}</p>
+      </div>
+      <div className="flex flex-col p-5 gap-4 bg-white">
+        <div className="text-left">
+          <Address address={builder} link={`https://app.buidlguidl.com/builders/${builder}`} />
+        </div>
+        <div className="text-left flex-1">
+          <p className="m-0 line-clamp-3 text-sm">{description}</p>
+        </div>
+        <div className="text-left mt-auto">
+          <a
+            href={link}
+            className="badge bg-primary rounded-2xl py-4 px-5 hover:opacity-80 mt-2"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            Learn more
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const ActiveGrantsPage: NextPage = async () => {
+  const activeGrants = await getAllActiveGrants();
+  if (!activeGrants.length) {
+    return null;
+  }
+
+  // Sort by approved date DESC
+  const sortedActiveGrants = activeGrants.sort((a, b) => {
+    if (a.approvedAt && b.approvedAt) {
+      return b.approvedAt - a.approvedAt;
+    }
+    return 0;
+  });
+
+  return (
+    <div className="bg-customBlue">
+      <div className="container flex flex-col justify-center max-w-[90%] xl:max-w-7xl mx-auto py-12 lg:pt-20 lg:pb-28 gap-6 xl:px-4">
+        <div className="self-center lg:self-start w-fit relative">
+          <h2 className="text-3xl sm:text-4xl lg:text-5xl text-center lg:text-left font-ppEditorial">Active grants</h2>
+          <Image className="absolute -top-3 -right-7" src="/assets/sparkle.png" alt="sparkle" width={32} height={32} />
+        </div>
+        <div className={`flex flex-col items-center justify-center md:flex-row md:flex-wrap md:items-start gap-6`}>
+          {sortedActiveGrants.map(grant => (
+            <ActiveGrantCard key={grant.id} {...grant} />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+export default ActiveGrantsPage;
diff --git a/packages/nextjs/app/admin/page.tsx b/packages/nextjs/app/admin/page.tsx
@@ -182,6 +182,9 @@ const AdminPage = () => {
   return (
     <div className="container mx-auto mt-12 max-w-[95%]">
       {isLoading && <span className="loading loading-spinner"></span>}
+      <Link href="/active-grants" className="block mb-2 link text-right">
+        Active Grants &gt;
+      </Link>
       {grants && (
         <div className="flex flex-col lg:flex-row gap-12 mt-4">
           <div className="p-8 bg-warning/5 lg:w-1/2">
@@ -210,7 +213,7 @@ const AdminPage = () => {
               />
             ))}
           </div>
-          <div className="p-8 bg-success/5 lg:w-1/2">
+          <div className="pt-2 p-8 bg-success/5 lg:w-1/2">
             <div className="flex justify-between items-center">
               <h2 className="font-bold text-xl">
                 Completed Grants {completedGrants && completedGrants.length > 0 && <>({completedGrants.length})</>}

diff --git a/packages/nextjs/services/database/grants.ts b/packages/nextjs/services/database/grants.ts
@@ -100,9 +100,15 @@ export const getAllCompletedGrants = async (limit?: number) => {
   }
 };
 
-export const getAllActiveGrants = async () => {
+export const getAllActiveGrants = async (limit?: number) => {
   try {
-    const grantsSnapshot = await grantsCollection.where("status", "==", PROPOSAL_STATUS.APPROVED).get();
+    let query = grantsCollection.where("status", "==", PROPOSAL_STATUS.APPROVED).orderBy("approvedAt", "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);