🚌 Validate data in application preview (#189)

src/app/waves/[waveId]/applications/create/preview/applicationPreview.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { User } from "next-auth";
+
+import { WaveParamsSchema } from "@/lib/paramsValidation";
+import { ApplicationPreview } from "@/components/ui/applicationPreview/applicationPreview";
+import { BackButton } from "@/components/ui/backButton";
+import { CategoryBadge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { PageTitle } from "@/components/ui/pageTitle";
+import { SaveIcon } from "@/components/icons/saveIcon";
+
+import { createApplicationAction } from "../steps/createApplicationAction";
+import {
+  applicationDataSchema,
+  useStepsContext,
+  useStepsDispatchContext,
+} from "../stepsProvider";
+
+interface PreviewApplicationProps extends WaveParamsSchema {
+  user: User;
+}
+
+export function PreviewApplication({ waveId, user }: PreviewApplicationProps) {
+  const router = useRouter();
+  const { applicationData } = useStepsContext();
+  const dispatch = useStepsDispatchContext();
+  const validationResult = applicationDataSchema.safeParse(applicationData);
+  if (!validationResult.success) {
+    router.replace(`/waves/${waveId}/applications/create`);
+    return;
+  }
+  const validatedApplicationData = validationResult.data;
+
+  return (
+    <div className="flex flex-col gap-8">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-4">
+          <BackButton href={`/waves/${waveId}/applications/create`} />
+          <PageTitle>{applicationData.name}</PageTitle>
+          <CategoryBadge>Category</CategoryBadge>
+        </div>
+        <div className="flex gap-4">
+          <Button variant="secondary">
+            Save as draft
+            <SaveIcon />
+          </Button>
+          <Button
+            className="px-14"
+            onClick={async () => {
+              await createApplicationAction(validatedApplicationData, waveId);
+              dispatch({ type: "RESET_STEPS" });
+            }}
+          >
+            Submit
+          </Button>
+        </div>
+      </div>
+
+      <ApplicationPreview
+        application={{
+          ...validatedApplicationData,
+          user: {
+            image: user.image,
+            name: user.name,
+          },
+        }}
+      />
+    </div>
+  );
+}

src/app/waves/[waveId]/applications/create/preview/page.tsx

@@ -1,68 +1,24 @@
-"use client";
+import dynamic from "next/dynamic";
 
-import { useSession } from "next-auth/react";
-
-import { useWaveParams } from "@/lib/paramsValidation";
-import { ApplicationPreview } from "@/components/ui/applicationPreview/applicationPreview";
-import { BackButton } from "@/components/ui/backButton";
-import { CategoryBadge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import { PageTitle } from "@/components/ui/pageTitle";
+import { auth } from "@/lib/auth";
+import { parseWaveParams } from "@/lib/paramsValidation";
 import { Unauthenticated } from "@/components/ui/unauthenticated";
-import { SaveIcon } from "@/components/icons/saveIcon";
-
-import { createApplicationAction } from "../steps/createApplicationAction";
-import {
-  applicationDataSchema,
-  useStepsContext,
-  useStepsDispatchContext,
-} from "../stepsProvider";
 
-export default function PreviewApplication() {
-  const { waveId } = useWaveParams();
-  const { data: session } = useSession();
+const PreviewApplication = dynamic(
+  () => import("./applicationPreview").then((mod) => mod.PreviewApplication),
+  { ssr: false },
+);
 
-  const { applicationData } = useStepsContext();
-  const validatedApplicationData = applicationDataSchema.parse(applicationData);
-  const dispatch = useStepsDispatchContext();
-  if (!session?.user) {
+export default async function PreviewApplicationPage({
+  params,
+}: {
+  params: unknown;
+}) {
+  const { waveId } = parseWaveParams(params);
+  const session = await auth();
+  if (!session?.user?.id) {
     return <Unauthenticated />;
   }
 
-  return (
-    <div className="flex flex-col gap-8">
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-4">
-          <BackButton href={`/waves/${waveId}/applications/create`} />
-          <PageTitle>{applicationData.name}</PageTitle>
-          <CategoryBadge>Category</CategoryBadge>
-        </div>
-        <div className="flex gap-4">
-          <Button variant="secondary">
-            Save as draft
-            <SaveIcon />
-          </Button>
-          <Button
-            className="px-14"
-            onClick={async () => {
-              await createApplicationAction(validatedApplicationData, waveId);
-              dispatch({ type: "RESET_STEPS" });
-            }}
-          >
-            Submit
-          </Button>
-        </div>
-      </div>
-
-      <ApplicationPreview
-        application={{
-          ...validatedApplicationData,
-          user: {
-            image: session.user.image,
-            name: session.user.name,
-          },
-        }}
-      />
-    </div>
-  );
+  return <PreviewApplication waveId={waveId} user={session.user} />;
 }

src/lib/paramsValidation.ts

@@ -13,6 +13,8 @@ const waveParamsSchema = z.object({
   waveId: z.coerce.number(),
 });
 
+export type WaveParamsSchema = z.infer<typeof waveParamsSchema>;
+
 export function parseWaveParams(params: unknown) {
   return parseParams(waveParamsSchema, params);
 }