From 7f11ce372efac184177a70027b80e198dc2fc8b5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Carlos=20S=C3=A1nchez?= <oceanrdn@gmail.com>
Date: Mon, 19 Feb 2024 19:35:37 +0100
Subject: [PATCH] My grants page

---
 .../builders/[builderAddress]/grants/route.ts | 17 ++++++
 packages/nextjs/app/my-grants/page.tsx        | 56 +++++++++++++++++++
 packages/nextjs/components/Header.tsx         |  8 ++-
 packages/nextjs/services/database/grants.ts   | 14 +++++
 4 files changed, 92 insertions(+), 3 deletions(-)
 create mode 100644 packages/nextjs/app/api/builders/[builderAddress]/grants/route.ts
 create mode 100644 packages/nextjs/app/my-grants/page.tsx

diff --git a/packages/nextjs/app/api/builders/[builderAddress]/grants/route.ts b/packages/nextjs/app/api/builders/[builderAddress]/grants/route.ts
new file mode 100644
index 0000000..41d72f7
--- /dev/null
+++ b/packages/nextjs/app/api/builders/[builderAddress]/grants/route.ts
@@ -0,0 +1,17 @@
+import { NextResponse } from "next/server";
+import { getAllGrantsForUser } from "~~/services/database/grants";
+
+export async function GET(_request: Request, { params }: { params: { builderAddress: string } }) {
+  try {
+    const builderAddress = params.builderAddress;
+    const grants = await getAllGrantsForUser(builderAddress);
+    return NextResponse.json(grants);
+  } catch (error) {
+    return NextResponse.json(
+      { message: "Internal Server Error" },
+      {
+        status: 500,
+      },
+    );
+  }
+}
diff --git a/packages/nextjs/app/my-grants/page.tsx b/packages/nextjs/app/my-grants/page.tsx
new file mode 100644
index 0000000..ecff4f0
--- /dev/null
+++ b/packages/nextjs/app/my-grants/page.tsx
@@ -0,0 +1,56 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { NextPage } from "next";
+import { useAccount } from "wagmi";
+import { GrantData } from "~~/services/database/schema";
+import { PROPOSAL_STATUS } from "~~/utils/grants";
+
+const badgeBgColor = {
+  [PROPOSAL_STATUS.PROPOSED]: "bg-warning",
+  [PROPOSAL_STATUS.APPROVED]: "bg-success",
+  [PROPOSAL_STATUS.SUBMITTED]: "bg-warning",
+  [PROPOSAL_STATUS.COMPLETED]: "bg-success",
+  [PROPOSAL_STATUS.REJECTED]: "bg-error",
+};
+
+// ToDo. Action (v1.0 = submit grant after completion)
+// ToDo. Loading states
+const MyGrants: NextPage = () => {
+  const { address } = useAccount();
+  const [builderGrants, setBuilderGrants] = useState<GrantData[]>([]);
+
+  useEffect(() => {
+    const fetchBuilderGrants = async () => {
+      try {
+        const response = await fetch(`/api/builders/${address}/grants`);
+        const data = await response.json();
+        setBuilderGrants(data);
+      } catch (error) {
+        console.error("Failed to fetch builder grants", error);
+      }
+    };
+
+    if (address) {
+      fetchBuilderGrants();
+    }
+  }, [address]);
+
+  return (
+    <div className="container mx-auto max-w-screen-md mt-12">
+      <h1 className="text-4xl font-bold">My grants</h1>
+      {builderGrants.map(grant => (
+        <div key={grant.id} className="border p-4 my-4">
+          <h3 className="font-bold">
+            {grant.title}
+            <span className="text-sm text-gray-500 ml-2">({grant.id})</span>
+          </h3>
+          <p>{grant.description}</p>
+          <p className={`badge ${badgeBgColor[grant.status]}`}>{grant.status}</p>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default MyGrants;
diff --git a/packages/nextjs/components/Header.tsx b/packages/nextjs/components/Header.tsx
index 3ceb161..3420d87 100644
--- a/packages/nextjs/components/Header.tsx
+++ b/packages/nextjs/components/Header.tsx
@@ -3,7 +3,7 @@ import Image from "next/image";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { RainbowKitCustomConnectButton } from "./scaffold-eth";
-import { LockClosedIcon } from "@heroicons/react/24/outline";
+import { AcademicCapIcon, LockClosedIcon } from "@heroicons/react/24/outline";
 import { useGlobalState } from "~~/services/store/store";
 
 type HeaderMenuLink = {
@@ -14,8 +14,9 @@ type HeaderMenuLink = {
 
 export const menuLinks: HeaderMenuLink[] = [
   {
-    label: "Home",
-    href: "/",
+    label: "My Grants",
+    href: "/my-grants",
+    icon: <AcademicCapIcon className="h-4 w-4" />,
   },
   {
     label: "Admin",
@@ -33,6 +34,7 @@ export const HeaderMenuLinks = () => {
       {menuLinks.map(({ label, href, icon }) => {
         const isActive = pathname === href;
         if (href === "/admin" && builderData?.role !== "admin") return null;
+        if (href === "/my-grants" && !builderData) return null;
         return (
           <li key={href}>
             <Link
diff --git a/packages/nextjs/services/database/grants.ts b/packages/nextjs/services/database/grants.ts
index 5c42539..fffea63 100644
--- a/packages/nextjs/services/database/grants.ts
+++ b/packages/nextjs/services/database/grants.ts
@@ -36,6 +36,20 @@ export const getAllGrants = async () => {
   }
 };
 
+export const getAllGrantsForUser = async (userAddress: string) => {
+  try {
+    const grantsSnapshot = await grantsCollection.where("builder", "==", userAddress).get();
+    const grants: GrantData[] = [];
+    grantsSnapshot.forEach(doc => {
+      grants.push({ id: doc.id, ...doc.data() } as GrantData);
+    });
+    return grants;
+  } catch (error) {
+    console.error("Error getting all grants for user:", error);
+    throw error;
+  }
+};
+
 export const getAllGrantsForReview = async () => {
   try {
     const grantsSnapshot = await grantsCollection