From 7f82b5ba899a19dc6a9c221c9a8cd282e88d8a5d Mon Sep 17 00:00:00 2001 From: marcuspang Date: Wed, 2 Aug 2023 23:15:00 +0200 Subject: [PATCH] fix: array fields --- components/MilestoneFields.tsx | 35 ++++++++--------------- components/TeamFields.tsx | 51 +++++++++++----------------------- pages/project/create/index.tsx | 25 ++++++++++------- 3 files changed, 42 insertions(+), 69 deletions(-) diff --git a/components/MilestoneFields.tsx b/components/MilestoneFields.tsx index 95fb5b7..6367a6b 100644 --- a/components/MilestoneFields.tsx +++ b/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([]); - 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 (
- {rows.map((row, index) => ( -
+ {fields.map((row, index) => ( +
( @@ -48,8 +36,7 @@ export const MilestoneFields = ({ children }: Props) => { )} /> ( @@ -65,7 +52,7 @@ export const MilestoneFields = ({ children }: Props) => { variant={"ghost"} type="button" className="w-full" - onClick={addRow} + onClick={append} > + add another diff --git a/components/TeamFields.tsx b/components/TeamFields.tsx index a70707a..0115edc 100644 --- a/components/TeamFields.tsx +++ b/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([]); - 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 (
- {rows.map((row, index) => ( -
+ {fields.map((row, index) => ( +
( @@ -58,8 +41,7 @@ export const TeamFields = ({ children }: Props) => { )} /> ( @@ -70,8 +52,7 @@ export const TeamFields = ({ children }: Props) => { )} /> ( @@ -87,7 +68,7 @@ export const TeamFields = ({ children }: Props) => { type="button" className="w-full" variant={"ghost"} - onClick={addRow} + onClick={append} > + add another diff --git a/pages/project/create/index.tsx b/pages/project/create/index.tsx index 5238fcd..dc15321 100644 --- a/pages/project/create/index.tsx +++ b/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) { // print form errors @@ -234,7 +239,7 @@ export default function ProjectForm() {
@@ -544,8 +549,8 @@ export default function ProjectForm() {

$USD

-
+ )} />