added user field to application, some improvements

Author: chin-flags

app/applications/page.tsx

@@ -0,0 +1,27 @@
+import { getApplications } from "@/lib/actions";
+import { notFound } from "next/navigation";
+import ApplicationsContainer from "@/components/ApplicationsContainer";
+
+type PageProps = {
+  searchParams: {
+    user: string;
+  };
+};
+
+const MyApplications = async ({ searchParams }: PageProps) => {
+  const user = searchParams.user;
+
+  if (!user) {
+    return notFound();
+  }
+
+  const applications = await getApplications(
+    (applications) => applications.user === user
+  );
+
+  return (
+    <ApplicationsContainer applications={applications} className="mt-24" />
+  );
+};
+
+export default MyApplications;

app/page.tsx

@@ -1,8 +1,7 @@
 import { Inter } from "next/font/google";
-import Hero from "../components/Hero";
-import EditorsPick from "../components/EditorsPick";
-import AllApps from "../components/AllApps";
-import { getApplications } from "../lib/actions";
+import Hero from "@/components/Hero";
+import { getApplications } from "@/lib/actions";
+import ApplicationsContainer from "@/components/ApplicationsContainer";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -14,8 +13,16 @@ const Home = async () => {
       <div className="grid grid-cols-1 gap-4 sm:grid-cols-6"></div>
 
       <Hero />
-      <EditorsPick applications={applications?.slice(0, 3)} />
-      <AllApps applications={applications} />
+      <ApplicationsContainer
+        header="Our Editor's Pick"
+        applications={applications?.slice(0, 3)}
+        className="mt-24"
+      />
+      <ApplicationsContainer
+        header="All Available Tools"
+        applications={applications}
+        className="mt-24"
+      />
     </div>
   );
 };

components/AllApps.tsx

@@ -0,0 +1,33 @@
+import React, { FC } from "react";
+import AppCard from "./AppCard";
+import { H2 } from "./Text";
+import { cn } from "@/lib/utils";
+
+type ApplicationsContainerProps = {
+  applications: IApplication[];
+  header?: string;
+  className?: string;
+};
+
+const ApplicationsContainer: FC<ApplicationsContainerProps> = ({
+  header,
+  applications,
+  className,
+}) => {
+  return (
+    <div className={cn(className, "container px-6 pb-2 mx-auto")}>
+      {header && (
+        <H2 className="text-center text-transparent mb-14 bg-gradient-to-br bg-clip-text from-primary to-slate-500">
+          {header}
+        </H2>
+      )}
+      <div className="grid justify-center gap-4 cursor-pointer md:grid-cols-2 lg:grid-cols-3 md:gap-6 lg:gap-12">
+        {applications?.map((data) => (
+          <AppCard key={data.id} application={data} />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default ApplicationsContainer;

components/ApplicationsContainer.tsx

@@ -1,15 +1,17 @@
-'use client';
+"use client";
 
 import { Fragment, useState } from "react";
-import { Dialog, Menu, Transition } from "@headlessui/react";
-import { Bars4Icon, CheckIcon } from "@heroicons/react/24/outline";
+import { useAccount } from "wagmi";
+import { Menu, Transition } from "@headlessui/react";
+import { Bars4Icon } from "@heroicons/react/24/outline";
 import NewApplication from "./NewApplication";
 import Link from "next/link";
 import PolisLogo from "./icons/PolisLogo";
 import { ConnectButton } from "./ConnectButton";
 
 export const Nav = () => {
   const [open, setOpen] = useState(false);
+  const { address } = useAccount();
 
   return (
     <>
@@ -21,7 +23,7 @@ export const Nav = () => {
         <div className="hidden lg:block">
           <div className="flex items-center gap-7">
             <Link
-              href="/application"
+              href={`/applications?user=${address}`}
               className="duration-200 ease-in-out hover:opacity-50"
             >
               My Application

components/EditorsPick.tsx

@@ -1,7 +1,7 @@
 "use client";
 import { FC, useState, useTransition } from "react";
-import { useRouter } from "next/navigation";
 import cn from "classnames";
+import { useAccount } from "wagmi";
 import { Tab } from "@headlessui/react";
 import {
   ChevronDoubleRightIcon,
@@ -24,7 +24,7 @@ type NewApplicationStepsProps = {
 const NewApplicationSteps: FC<NewApplicationStepsProps> = ({ closeModal }) => {
   const TOTAL_STEPS = 3;
   const [currentStep, setCurrentStep] = useState(0);
-  const router = useRouter();
+  const { address } = useAccount();
   const [isPending, startTransition] = useTransition();
   const methods = useForm<IApplicationInput>({
     defaultValues: {
@@ -73,7 +73,10 @@ const NewApplicationSteps: FC<NewApplicationStepsProps> = ({ closeModal }) => {
     }
 
     startTransition(() => {
-      submitApplication({ images: formData, data: JSON.stringify(rest) });
+      submitApplication({
+        images: formData,
+        data: JSON.stringify({ ...rest, user: address }),
+      });
       closeModal();
     });
   });

components/Nav.tsx

@@ -6,12 +6,15 @@ import {
   storeDatabase,
   ApplicationNode,
   query,
+  Filter,
 } from "./database";
 import { getDirectoryContent, add } from "./ipfs";
 import { revalidatePath } from "next/cache";
 
-export const getApplications = async (): Promise<IApplication[]> => {
-  const applicationNodes = await retrieveDatabase();
+export const getApplications = async (
+  filter?: Filter
+): Promise<IApplication[]> => {
+  const applicationNodes = await query(filter);
 
   const applications = Array.from(applicationNodes.values()).map(
     async ({ screenshots: screenshotsHash, logo: logoHash, ...rest }) => {
@@ -105,5 +108,5 @@ export const submitApplication = async ({
   });
 
   await storeDatabase(newState);
-  revalidatePath("/")
+  revalidatePath("/");
 };

components/NewApplication/Steps/index.tsx

@@ -6,13 +6,14 @@ export type ApplicationNode = {
   title: string;
   category: string[];
   description: string;
+  user: string;
   applicationUrl?: string;
   repoUrl?: string;
   logo?: string;
   screenshots?: string;
 };
 
-type Query = (node: ApplicationNode) => boolean;
+export type Filter = (node: ApplicationNode) => boolean;
 
 export const addNode = (
   state: Map<string, ApplicationNode>,
@@ -49,14 +50,14 @@ export const storeDatabase = async (state: Map<string, ApplicationNode>) => {
 
 export const retrieveDatabase = async () => {
   const hash = await getcurrentHash();
-  
+
   const json = await cat(hash);
   return deserializeDatabase(json);
 };
 
-export const query = async (predicate: Query) => {
+export const query = async (predicate?: Filter) => {
   const state = await retrieveDatabase();
   const nodes = Array.from(state.values());
-  const matches = nodes.filter(predicate);
+  const matches = nodes.filter(predicate || Boolean);
   return matches;
 };

lib/actions.ts

@@ -0,0 +1,6 @@
+import { ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export const  cn= (...inputs: ClassValue[]) => {
+    return twMerge(clsx(inputs))
+  }