Make The Form Multipage (#47)

* feat(form): make form multistep - kindof

* fix(form): adjust multipage form indices

src/components/review-form.tsx

@@ -11,6 +11,7 @@ import { ReviewSection } from "~/components/review-section";
 import { CoopCycleSection } from "~/components/coop-cycle-section";
 import { CompanyDetailsSection } from "~/components/company-details-section";
 import { RatingsSection } from "~/components/ratings-section";
+import { useState } from "react";
 import { Company, WorkEnvironment, WorkTerm } from "@prisma/client";
 import { api } from "~/trpc/react";
 
@@ -108,7 +109,6 @@ const formSchema = z.object({
 
 export type ReviewFormType = typeof formSchema;
 
-// There's probably a more elegant way of linking this to the Zod schema
 export const benefits = [
   { field: "pto", label: "PTO" },
   { field: "federalHolidays", label: "Federal holidays off" },
@@ -117,6 +117,38 @@ export const benefits = [
   { field: "freeMerch", label: "Free merchandise" },
 ];
 
+const steps = [
+  {
+    fields: ["workTerm", "workYear"],
+  },
+  {
+    fields: [
+      "overallRating",
+      "cultureRating",
+      "supervisorRating",
+      "interviewRating",
+      "interviewDifficulty",
+      "interviewReview",
+    ],
+  },
+  {
+    fields: ["reviewHeadline", "textReview", "location", "hourlyPay"],
+  },
+  {
+    fields: [
+      "workEnvironment",
+      "drugTest",
+      "overtimeNormal",
+      "pto",
+      "federalHolidays",
+      "freeLunch",
+      "freeTransport",
+      "freeMerch",
+      "otherBenefits",
+    ],
+  },
+];
+
 type ReviewFormProps = {
   company: Company;
   roleId: string;
@@ -155,6 +187,36 @@ export function ReviewForm(props: ReviewFormProps) {
     },
   });
 
+  const [currentStep, setCurrentStep] = useState(0);
+
+  type FieldName = keyof z.infer<typeof formSchema>;
+
+  const next = async (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    e.preventDefault();
+    const fields = steps[currentStep]?.fields;
+    const output = await form.trigger(fields as FieldName[], {
+      shouldFocus: true,
+    });
+
+    if (!output) {
+      return;
+    }
+
+    if (currentStep < steps.length) {
+      if (currentStep === steps.length - 1) {
+        await form.handleSubmit(onSubmit)();
+      }
+      setCurrentStep((step) => step + 1);
+    }
+  };
+
+  const prev = async (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    e.preventDefault();
+    if (currentStep > 0) {
+      setCurrentStep((prev) => prev - 1);
+    }
+  };
+
   const mutation = api.review.create.useMutation();
 
   function onSubmit(values: z.infer<ReviewFormType>) {
@@ -163,8 +225,6 @@ export function ReviewForm(props: ReviewFormProps) {
       profileId: props.profileId,
       ...values,
     });
-
-    toast(`Your review for ${props.company.name} has been submitted!`);
   }
 
   function onReset() {
@@ -173,22 +233,31 @@ export function ReviewForm(props: ReviewFormProps) {
 
   return (
     <Form {...form}>
-      <form
-        onSubmit={form.handleSubmit(onSubmit)}
-        onReset={onReset}
-        className="space-y-6"
-      >
-        <CoopCycleSection />
-        <RatingsSection />
-        <ReviewSection />
-        <CompanyDetailsSection companyName={props.company.name} />
-        <div className="flex justify-end space-x-2">
-          <Button variant="secondary" type="reset">
-            Clear form
-          </Button>
-          <Button type="submit">Submit</Button>
-        </div>
+      <form className="space-y-6">
+        {currentStep == 0 && <CoopCycleSection />}
+        {currentStep == 1 && <RatingsSection />}
+        {currentStep == 2 && <ReviewSection />}
+        {currentStep == 3 && <CompanyDetailsSection companyName={props.company.name} />}
+        {currentStep >= 0 && currentStep <= steps.length - 1 && (
+          <div className="flex justify-between">
+            <Button
+              variant="secondary"
+              onClick={prev}
+              disabled={currentStep === 0}
+            >
+              Previous
+            </Button>
+            <Button onClick={next}>
+              {currentStep == steps.length - 1 ? "Submit" : "Next"}
+            </Button>
+          </div>
+        )}
       </form>
+      {currentStep == steps.length && (
+        <h1 className="text-center text-3xl font-semibold">
+          Thank you for submitting your review!
+        </h1>
+      )}
     </Form>
   );
 }