subman-nextjs/src/app/ui/forms/editSub.tsx

266 lines
7.1 KiB
TypeScript

"use client"
import { z } from "zod"
import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import { Button } from "@/components/ui/button"
import { toast } from "@/components/ui/use-toast"
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover"
import { Calendar } from "@/components/ui/calendar"
import { CalendarIcon } from "@radix-ui/react-icons"
import { cn } from "@/lib/utils"
import { format } from "date-fns"
import {
Form,
FormItem,
FormLabel,
FormField,
FormControl,
FormDescription,
FormMessage
} from "@/components/ui/form"
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select"
import { useState } from "react"
import { createSub } from "app/lib/create"
import { subSchema } from "./schemas"
import { updateSub } from "app/lib/update"
export type SubForm = z.infer<typeof subSchema>
export default function EditSubmissionForm({ stories, pubs, responses, defaults }) {
const form = useForm<z.infer<typeof subSchema>>({
resolver: zodResolver(subSchema),
defaultValues: {
responseId: responses[0].id,
...defaults
}
})
const [isSubCalendarOpen, setIsSubCalendarOpen] = useState(false);
const [isRespCalendarOpen, setIsRespCalendarOpen] = useState(false);
const storiesSelectItems = stories.map(e => (
<SelectItem value={e.id.toString()} key={e.title}>
{e.title}
</SelectItem>
))
const pubsSelectItems = pubs.map(e => (
<SelectItem value={e.id}>
{e.title}
</SelectItem>
))
const reponsesSelectItems = responses.map(e => (
<SelectItem value={e.id}>
{e.response}
</SelectItem>
))
// 2. Define a submit handler.
async function onSubmit(values: z.infer<typeof subSchema>) {
try {
const res = await updateSub(values)
if (res === undefined) throw new Error("something went wrong")
toast({ title: "Successfully created new submission!" })
window.location.reload()
} catch (error) {
toast({
title: "UH-OH",
description: error.message
})
}
}
function onErrors(errors) {
toast({
title: "You have errors",
description: (
<pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
<code className="text-white">{JSON.stringify(errors, null, 2)}</code>
</pre>
),
})
console.log(JSON.stringify(errors))
}
return (
<Form {...form}>
<form id="subform" onSubmit={form.handleSubmit(onSubmit, onErrors)} className="space-y-8">
<FormField
control={form.control}
name="storyId"
render={({ field }) => (
<FormItem>
<FormLabel>Story</FormLabel>
<Select onValueChange={field.onChange} defaultValue={field.value}>
<FormControl>
<SelectTrigger>
<SelectValue placeholder="Select something">
<p>{stories?.find(e => e.id === Number(field.value))?.title ?? null}</p>
</SelectValue>
</SelectTrigger>
</FormControl>
<SelectContent>
{storiesSelectItems}
</SelectContent>
</Select>
<FormDescription>The piece you submitted</FormDescription>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="pubId"
render={({ field }) => (
<FormItem>
<FormLabel>Publication</FormLabel>
<Select onValueChange={field.onChange} defaultValue={field.value}>
<FormControl>
<SelectTrigger>
<SelectValue placeholder="Select something">
<p>{pubs?.find(e => e.id === Number(field.value))?.title ?? null}</p>
</SelectValue>
</SelectTrigger>
</FormControl>
<SelectContent>
{pubsSelectItems}
</SelectContent>
</Select>
<FormDescription>The market you sent it to</FormDescription>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="submitted"
render={({ field }) => (
<FormItem className="flex flex-col">
<FormLabel>Date of submission</FormLabel>
<Popover modal={true} open={isSubCalendarOpen} onOpenChange={setIsSubCalendarOpen}>
<PopoverTrigger asChild>
<FormControl>
<Button
variant={"outline"}
className={cn(
"w-[240px] pl-3 text-left font-normal",
!field.value && "text-muted-foreground"
)}
>
{field.value ? (
format(field.value, "PPP")
) : (
<span>Pick a date</span>
)}
<CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
</Button>
</FormControl>
</PopoverTrigger>
<PopoverContent className="w-auto p-0" align="start">
<Calendar
mode="single"
selected={field.value}
onSelect={(e) => { field.onChange(e); setIsSubCalendarOpen(false); }}
disabled={(date) =>
date > new Date() || date < new Date("1900-01-01")
}
initialFocus
/>
</PopoverContent>
</Popover>
<FormDescription>
The date you sent it
</FormDescription>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="responded"
render={({ field }) => (
<FormItem className="flex flex-col">
<FormLabel>Date of response</FormLabel>
<Popover modal={true} open={isRespCalendarOpen} onOpenChange={setIsRespCalendarOpen}>
<PopoverTrigger asChild>
<FormControl>
<Button
variant={"outline"}
className={cn(
"w-[240px] pl-3 text-left font-normal",
!field.value && "text-muted-foreground"
)}
>
{field.value ? (
format(field.value, "PPP")
) : (
<span>Pick a date</span>
)}
<CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
</Button>
</FormControl>
</PopoverTrigger>
<PopoverContent className="w-auto p-0" align="start">
<Calendar
mode="single"
selected={field.value}
onSelect={(e) => { field.onChange(e); setIsRespCalendarOpen(false); }}
disabled={(date) =>
date > new Date() || date < new Date("1900-01-01")
}
initialFocus
/>
</PopoverContent>
</Popover>
<FormDescription>
The date they wrote back
</FormDescription>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="responseId"
render={({ field }) => (
<FormItem>
<FormLabel>Response</FormLabel>
<Select onValueChange={field.onChange} defaultValue={field.value}>
<FormControl>
<SelectTrigger>
<SelectValue>
<p>{responses?.find(e => e.id === Number(field.value))?.response ?? null}</p>
</SelectValue>
</SelectTrigger>
</FormControl>
<SelectContent>
{reponsesSelectItems}
</SelectContent>
</Select>
<FormDescription>The market you sent it to</FormDescription>
<FormMessage />
</FormItem>
)}
/>
</form>
</Form>
)
}