fix: array fields

components/MilestoneFields.tsx

@@ -1,6 +1,6 @@
 "use client";
 import React, { useState, useEffect, ReactNode } from "react";
-import { useFormContext } from "react-hook-form";
+import { useFieldArray, useFormContext } from "react-hook-form";
 import { FormControl, FormField, FormItem, FormMessage } from "./ui/form";
 import { Input } from "./ui/input";
 import { Button } from "./ui/button";
@@ -14,30 +14,18 @@ interface Props {
 }
 
 export const MilestoneFields = ({ children }: Props) => {
-  const [rows, setRows] = useState<Row[]>([]);
-  const { control } = useFormContext();
-
-  useEffect(() => {
-    setRows([...rows, { key: "default" }]);
-  }, []);
-
-  function addRow() {
-    let key = "milestone-" + (rows.length + 2);
-    setRows([...rows, { key }]);
-  }
-
-  function removeRow(index: string) {
-    if (index !== "default")
-      setRows((current) => current.filter((_) => _.key !== index));
-  }
+  const { control } = useFormContext()
+  const { fields, append, remove } = useFieldArray({
+    name: "milestones",
+    control
+  })
 
   return (
     <fieldset>
-      {rows.map((row, index) => (
-        <div key={index} className="mb-6">
+      {fields.map((row, index) => (
+        <div key={row.id} className="mb-6">
           <FormField
-            control={control}
-            name={`milestone.${row.key}.amount`}
+            name={`milestones.${index}.amount`}
             render={({ field }) => (
               <FormItem className="pb-4">
                 <FormControl>
@@ -48,8 +36,7 @@ export const MilestoneFields = ({ children }: Props) => {
             )}
           />
           <FormField
-            control={control}
-            name={`milestone.${row.key}.text`}
+            name={`milestones.${index}.text`}
             render={({ field }) => (
               <FormItem >
                 <FormControl>
@@ -65,7 +52,7 @@ export const MilestoneFields = ({ children }: Props) => {
         variant={"ghost"}
         type="button"
         className="w-full"
-        onClick={addRow}
+        onClick={append}
       >
         + add another
       </Button>

components/TeamFields.tsx

@@ -1,15 +1,14 @@
-import React, { useState, useEffect, ReactNode } from "react";
-import { useFormContext } from "react-hook-form";
+import { ReactNode } from "react";
+import { useFieldArray, useFormContext } from "react-hook-form";
+import { Button } from "./ui/button";
 import {
   FormControl,
   FormField,
   FormItem,
-  FormLabel,
-  FormMessage,
+  FormMessage
 } from "./ui/form";
-import { Textarea } from "./ui/textarea";
 import { Input } from "./ui/input";
-import { Button } from "./ui/button";
+import { Textarea } from "./ui/textarea";
 
 interface Row {
   key: string;
@@ -20,34 +19,18 @@ interface Props {
 }
 
 export const TeamFields = ({ children }: Props) => {
-  const [rows, setRows] = useState<Row[]>([]);
-  const {
-    register,
-    control,
-    formState: { errors },
-  } = useFormContext();
-
-  useEffect(() => {
-    setRows([...rows, { key: "default" }]);
-  }, []);
-
-  function addRow() {
-    let key = "milestone-" + (rows.length + 2);
-    setRows([...rows, { key }]);
-  }
-
-  function removeRow(index: string) {
-    if (index !== "default")
-      setRows((current) => current.filter((_) => _.key !== index));
-  }
+  const { control } = useFormContext()
+  const { fields, append, remove } = useFieldArray({
+    name: "team",
+    control
+  })
 
   return (
     <fieldset>
-      {rows.map((row, index) => (
-        <div key={index} className="mb-6 space-y-4">
+      {fields.map((row, index) => (
+        <div key={row.id} className="mb-6 space-y-4">
           <FormField
-            control={control}
-            name={`team.${row.key}.name`}
+            name={`team.${index}.name`}
             render={({ field }) => (
               <FormItem>
                 <FormControl>
@@ -58,8 +41,7 @@ export const TeamFields = ({ children }: Props) => {
             )}
           />
           <FormField
-            control={control}
-            name={`team.${row.key}.bio`}
+            name={`team.${index}.bio`}
             render={({ field }) => (
               <FormItem>
                 <FormControl>
@@ -70,8 +52,7 @@ export const TeamFields = ({ children }: Props) => {
             )}
           />
           <FormField
-            control={control}
-            name={`team.${row.key}.email`}
+            name={`team.${index}.email`}
             render={({ field }) => (
               <FormItem>
                 <FormControl>
@@ -87,7 +68,7 @@ export const TeamFields = ({ children }: Props) => {
         type="button"
         className="w-full"
         variant={"ghost"}
-        onClick={addRow}
+        onClick={append}
       >
         + add another
       </Button>

pages/project/create/index.tsx

@@ -39,7 +39,7 @@ import { useToast } from "@/components/ui/use-toast";
 import { cn } from "@/lib/utils";
 import { Brief } from "@/types/mongo";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { format } from "date-fns";
+import { format, isBefore } from "date-fns";
 import { CalendarIcon } from "lucide-react";
 import { useForm } from "react-hook-form";
 import { useAccount, useMutation, useNetwork, useQuery } from "wagmi";
@@ -117,22 +117,22 @@ const formSchema = z.object({
       bio: z.string().min(1, { message: "Bio is required" }),
       email: z
         .string()
+        .min(1, { message: "Email is required" })
         .email({ message: "Please enter a valid email" })
-        .min(1, { message: "Email is required" }),
     })
   ),
   collaborators: z.string(),
   waitlist: z.boolean().default(true),
   milestones: z.array(
     z.object({
-      amount: z.coerce.number(),
-      // .min(0, { message: "Amount is required" }),
-      text: z.string(),
-      // .min(1, { message: "Milestone description is required" }),
+      amount: z.coerce.number()
+        .min(0, { message: "Amount is required" }),
+      text: z.string()
+        .min(1, { message: "Milestone description is required" }),
     })
   ),
   edition_price: z.coerce.number().min(0, { message: "Edition price too small, minimum 0" }).max(20, { message: "Edition price too large, maximum 20" }),
-  mint_end_date: z.date().min(new Date(), {
+  mint_end_date: z.date().refine(current => current > new Date(), {
     message: "Must end later than today",
   }),
   benefits: z.array(
@@ -161,7 +161,11 @@ export default function ProjectForm() {
       brief: "",
       video_image: "",
       inspiration: "",
-      team: [],
+      team: [{
+        name: "",
+        bio: "",
+        email: "",
+      }],
       collaborators: "",
       waitlist: true,
       milestones: [],
@@ -199,6 +203,7 @@ export default function ProjectForm() {
   );
   const router = useRouter();
   const { toast } = useToast();
+  console.log({ checkoutLink, createProjectData })
 
   async function onSubmit(values: z.infer<typeof formSchema>) {
     // print form errors
@@ -234,7 +239,7 @@ export default function ProjectForm() {
       <form
         id="create-project"
         onSubmit={handleSubmit(onSubmit)}
-        className="max-w-4xl mx-auto mt-40"
+        className="max-w-4xl mx-auto mt-24"
         // @ts-expect-error For netlify forms
         netlify
       >
@@ -544,8 +549,8 @@ export default function ProjectForm() {
                         <Input type="number" placeholder="0-20" {...field} />
                       </FormControl>
                       <p>$USD</p>
-                      <FormMessage />
                     </div>
+                    <FormMessage />
                   </FormItem>
                 )}
               />