feat: show forms and forms submissions on /forms/id page

src/app/(main)/dashboard/_components/posts.tsx

@@ -30,7 +30,7 @@ export function Posts({ promises }: PostsProps) {
 
       <div className="flex flex-col space-y-2">
         {forms.map((form) => (
-          <Link href={`/form/${form.id}`}>
+          <Link href={`/form/${form.id}`} key={form.id}>
             {/* <pre>{JSON.stringify(form, null, 2)}</pre> */}
             Name: {form.title}
           </Link>

src/app/(main)/form/[id]/layout.tsx

@@ -0,0 +1,20 @@
+import { validateRequest } from "~/lib/auth/validate-request";
+import { redirects } from "~/lib/constants";
+import { redirect } from "next/navigation";
+import * as React from "react";
+
+interface Props {
+  children: React.ReactNode;
+}
+
+export default async function FormLayout({ children }: Props) {
+  const { user } = await validateRequest();
+
+  if (!user) redirect(redirects.toLogin);
+
+  return (
+    <div className="container flex min-h-[calc(100vh-180px)] flex-col gap-6 px-2 pt-6 md:flex-row md:px-4 lg:gap-10">
+      <main className="w-full">{children}</main>
+    </div>
+  );
+}

src/app/(main)/form/[id]/page.tsx

@@ -0,0 +1,18 @@
+import { api } from "@/trpc/server";
+
+export default async function FormPage({ params }: { params: { id: string } }) {
+  const formSubmissions = await api.formData.all.query({ formId: params.id });
+
+  return (
+    <div>
+      <div>My Form Id: {params.id}</div>
+      <div>My Submittions</div>
+
+      <div>
+        {formSubmissions.map((f) => {
+          return <div key={f.id}>{JSON.stringify(f.data as string)}</div>;
+        })}
+      </div>
+    </div>
+  );
+}