update sub server actions etc

src/app/lib/update.ts

@@ -1,11 +1,13 @@
 "use server"
-import { Genre } from "@prisma/client"
+import { Genre, Sub } from "@prisma/client"
 import prisma from "./db"
 import { revalidatePath } from "next/cache"
 import { redirect } from "next/navigation"
+import { subSchema } from "app/ui/forms/schemas"
 
 
 export async function updateField({ datum, table, column, id, pathname }: { datum?: string | number | Genre[], table: string, column: string, id: number, pathname: string }) {
+	"use server"
 	try {
 		const res = await prisma[table].update({
 			where: { id },
@@ -23,6 +25,7 @@ export async function updateField({ datum, table, column, id, pathname }: { datu
 }
 
 export async function updateGenres({ genres, table, id, pathname }: { genres: { id: number }[], table: string, id: number, pathname: string }) {
+	"use server"
 	try {
 		const res = await prisma[table].update({
 			where: { id },
@@ -38,3 +41,25 @@ export async function updateGenres({ genres, table, id, pathname }: { genres: {
 		return undefined
 	}
 }
+
+export async function updateSub(data: Sub): Promise<Sub | undefined> {
+	"use server"
+	try {
+		subSchema.parse(data)
+		const res = await prisma.sub.update({ where: { id: data.id }, data })
+		revalidatePath("/submission")
+		return res
+	} catch (error) {
+		console.error(error)
+		return undefined
+	}
+
+}
+
+
+
+
+
+
+
+

src/app/submission/edit.tsx

@@ -5,6 +5,7 @@ import { Button } from "@/components/ui/button";
 import { ComponentProps } from "react";
 import { Pub, Response, Story } from "@prisma/client";
 import SubmissionForm, { SubForm } from "app/ui/forms/sub";
+import EditSubmissionForm from "app/ui/forms/editSub";
 
 
 
@@ -16,7 +17,7 @@ export default function EditSubmissionDialog({ stories, pubs, responses, default
         <DialogTitle>Edit Submission</DialogTitle>
         <DialogDescription>Change response status, edit dates etc</DialogDescription>
       </DialogHeader>
-      <SubmissionForm pubs={pubs} responses={responses} stories={stories} defaults={defaults} />
+      <EditSubmissionForm pubs={pubs} responses={responses} stories={stories} defaults={defaults} />
       <DialogFooter>
         <DialogClose asChild>
         </DialogClose>

src/app/submission/page.tsx

@@ -3,7 +3,6 @@ import { DataTable } from "app/ui/tables/data-table"
 import { columns } from "./columns"
 import { Pub, Response, Story, Sub } from "@prisma/client"
 import CreateSubmissionDialog from "./create"
-import { Trash2 } from "lucide-react"
 
 export type SubComplete = Sub & {
   pub: Pub,
@@ -11,6 +10,7 @@ export type SubComplete = Sub & {
   response: Response
 }
 export default async function Page() {
+
   const subs: Array<SubComplete> = await getSubsComplete()
   const stories = await getStories()
   const pubs = await getPubs()

src/app/ui/forms/editSub.tsx

@@ -0,0 +1,265 @@
+"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>
+	)
+}