266 lines
7.1 KiB
TypeScript
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>
|
|
)
|
|
}
|