Add My Submissions page (#83)

Co-authored-by: pabl0cks <[email protected]>

packages/nextjs/app/api/users/[address]/submissions/route.ts

@@ -0,0 +1,18 @@
+import { NextResponse } from "next/server";
+import { getSubmissionsByBuilder } from "~~/services/database/repositories/submissions";
+
+export async function GET(request: Request, { params }: { params: { address: string } }) {
+  try {
+    const { address } = params;
+
+    if (!address) {
+      return NextResponse.json({ error: "Address not provided" }, { status: 400 });
+    }
+
+    const submissions = await getSubmissionsByBuilder(address);
+    return NextResponse.json(submissions);
+  } catch (error) {
+    console.error(error);
+    return NextResponse.json({ error: "Error fetching submissions" }, { status: 500 });
+  }
+}

packages/nextjs/app/my-submissions/page.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { SubmissionCard } from "../submissions/_components/SubmissionCard";
+import { useQuery } from "@tanstack/react-query";
+import { useAccount } from "wagmi";
+import { RainbowKitCustomConnectButton } from "~~/components/scaffold-eth";
+import scaffoldConfig from "~~/scaffold.config";
+import { SubmissionWithWinnerTag } from "~~/services/database/repositories/submissions";
+
+const MySubmissions = () => {
+  const { address: connectedAddress, isConnecting } = useAccount();
+  const router = useRouter();
+  const { submissionsEnabled } = scaffoldConfig;
+
+  const {
+    isPending,
+    error,
+    data: submissions,
+  } = useQuery({
+    queryKey: ["my-submissions", connectedAddress],
+    queryFn: () => fetch(`/api/users/${connectedAddress}/submissions`).then(res => res.json()),
+  });
+
+  if (isConnecting || isPending) {
+    return <div className="max-w-7xl container mx-auto px-6 mt-10">Loading...</div>;
+  }
+
+  if (error) {
+    return <div className="max-w-7xl container mx-auto px-6 mt-10">Error loading submissions.</div>;
+  }
+
+  return (
+    <div className="max-w-7xl container mx-auto px-6 mt-10">
+      {!connectedAddress ? (
+        <div className="max-w-7xl container mx-auto px-6 mt-10">
+          <span className="mr-4">Connect Wallet to see your submissions</span>
+          <RainbowKitCustomConnectButton />
+        </div>
+      ) : (
+        <div>
+          <h1 className="text-4xl font-bold mb-6">My Submissions</h1>
+          {submissions.length === 0 ? (
+            <div className="flex flex-col items-center">
+              {submissionsEnabled ? (
+                <>
+                  <p className="mb-4">You haven&apos;t made any submissions yet.</p>
+                  <button onClick={() => router.push("/submit")} className="btn btn-primary">
+                    Submit an Extension
+                  </button>
+                </>
+              ) : (
+                <>
+                  <p className="mb-4">You haven&apos;t made any submissions.</p>
+                  <button className="btn btn-disabled" disabled>
+                    Submissions Closed
+                  </button>
+                </>
+              )}
+            </div>
+          ) : (
+            <div className="grid gap-6 md:grid-cols-2 xl:grid-cols-3">
+              {submissions.map((submission: SubmissionWithWinnerTag) => (
+                <SubmissionCard key={submission.id} submission={submission} />
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default MySubmissions;

packages/nextjs/components/Header.tsx

@@ -3,7 +3,14 @@
 import React, { useCallback, useRef, useState } from "react";
 import Image from "next/image";
 import Link from "next/link";
-import { Bars3Icon, ChatBubbleLeftEllipsisIcon, DocumentTextIcon, LockClosedIcon } from "@heroicons/react/24/outline";
+import { useAccount } from "wagmi";
+import {
+  Bars3Icon,
+  ChatBubbleLeftEllipsisIcon,
+  ClipboardDocumentListIcon,
+  DocumentTextIcon,
+  LockClosedIcon,
+} from "@heroicons/react/24/outline";
 import { RainbowKitCustomConnectButton } from "~~/components/scaffold-eth";
 import { useOutsideClick } from "~~/hooks/scaffold-eth";
 import { useAuthSession } from "~~/hooks/useAuthSession";
@@ -14,26 +21,38 @@ type HeaderMenuLink = {
   icon?: React.ReactNode;
 };
 
-export const menuLinks: HeaderMenuLink[] = [
-  {
-    label: "Submissions",
-    href: "/submissions",
-    icon: <DocumentTextIcon className="h-4 w-4" />,
-  },
-  {
-    label: "Admin",
-    href: "/admin",
-    icon: <LockClosedIcon className="h-4 w-4" />,
-  },
-  {
-    label: "Join Telegram",
-    href: "https://t.me/+jgKFHjb9B_cyNmMx",
-    icon: <ChatBubbleLeftEllipsisIcon className="h-4 w-4" />,
-  },
-];
-
 export const HeaderMenuLinks = () => {
   const { isAdmin } = useAuthSession();
+  const { address: connectedAddress } = useAccount();
+
+  const menuLinks: HeaderMenuLink[] = [
+    {
+      label: "Submissions",
+      href: "/submissions",
+      icon: <DocumentTextIcon className="h-4 w-4" />,
+    },
+  ];
+
+  if (connectedAddress) {
+    menuLinks.push({
+      label: "My Submissions",
+      href: "/my-submissions",
+      icon: <ClipboardDocumentListIcon className="h-4 w-4" />,
+    });
+  }
+
+  menuLinks.concat([
+    {
+      label: "Admin",
+      href: "/admin",
+      icon: <LockClosedIcon className="h-4 w-4" />,
+    },
+    {
+      label: "Join Telegram",
+      href: "https://t.me/+jgKFHjb9B_cyNmMx",
+      icon: <ChatBubbleLeftEllipsisIcon className="h-4 w-4" />,
+    },
+  ]);
 
   return (
     <>
@@ -49,7 +68,7 @@ export const HeaderMenuLinks = () => {
                 href={href}
                 target="_blank"
                 rel="noreferrer noopener"
-                className="hover:underline flex items-center align-center active:!text-neutral py-1.5 px-3 text-lg gap-2"
+                className="hover:underline flex items-center active:!text-neutral py-1.5 px-3 text-lg gap-2 whitespace-nowrap"
               >
                 {icon}
                 <span>{label}</span>
@@ -58,7 +77,7 @@ export const HeaderMenuLinks = () => {
               <Link
                 href={href}
                 passHref
-                className="hover:underline flex items-center align-center active:!text-neutral py-1.5 px-3 text-lg gap-2"
+                className="hover:underline flex items-center active:!text-neutral py-1.5 px-3 text-lg gap-2 whitespace-nowrap"
               >
                 {icon}
                 <span>{label}</span>

packages/nextjs/services/database/repositories/submissions.ts

@@ -37,3 +37,11 @@ export async function clearEligible(submissionId: number) {
     .set({ eligible: null, eligibleAdmin: null, eligibleTimestamp: null })
     .where(eq(submissions.id, submissionId));
 }
+
+export async function getSubmissionsByBuilder(builderId: string) {
+  return await db.query.submissions.findMany({
+    where: eq(submissions.builder, builderId),
+    with: { comments: true, votes: true },
+    orderBy: [desc(submissions.id)],
+  });
+}