controlled create dialogs

src/app/publication/create.tsx

@@ -6,12 +6,18 @@ import { Genre } from "@prisma/client";
 import { createPub } from "app/lib/create";
 import PubForm from "app/ui/forms/pub";
 import { Plus } from "lucide-react";
+import { useState } from "react";
 
 export default function CreatePubDialog({ genres }: ComponentProps<"div"> & { genres: Genre[] }) {
 
+  const [isOpen, setIsOpen] = useState(false)
+  function closeDialog() {
+    setIsOpen(false)
+  }
+
   return (
 
-    <Dialog>
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
       <DialogTrigger asChild>
         <Button>
           <span className="hidden md:block">Create new publication</span>
@@ -23,11 +29,9 @@ export default function CreatePubDialog({ genres }: ComponentProps<"div"> & { ge
           <DialogTitle>New publication</DialogTitle>
           <DialogDescription>Create an entry for a new publication i.e. a place you intend to submit stories to.</DialogDescription>
         </DialogHeader>
-        <PubForm createPub={createPub} genres={genres} />
+        <PubForm createPub={createPub} genres={genres} closeDialog={closeDialog} />
         <DialogFooter>
-          <DialogClose >
           <Button form="pubform">Submit</Button>
-          </DialogClose>
         </DialogFooter>
 
       </DialogContent>

src/app/story/create.tsx

@@ -11,6 +11,9 @@ import { Plus } from "lucide-react";
 export default function CreateStoryDialog({ genres }: ComponentProps<"div"> & { genres: Genre[] }) {
 
   const [isOpen, setIsOpen] = useState(false)
+  function closeDialog() {
+    setIsOpen(false)
+  }
 
   return (
     <Dialog open={isOpen} onOpenChange={setIsOpen}>
@@ -25,12 +28,9 @@ export default function CreateStoryDialog({ genres }: ComponentProps<"div"> & {
           <DialogTitle>New story</DialogTitle>
           <DialogDescription>Create an entry for a new story i.e. a thing you intend to submit for publication.</DialogDescription>
         </DialogHeader>
-        <StoryForm createStory={createStory} genres={genres} className="" />
+        <StoryForm createStory={createStory} genres={genres} className="" closeDialog={closeDialog} />
         <DialogFooter>
-          <DialogClose>
-            {/* TODO: pass setIsOpen to form as prop, to be handled post-verification */}
           <Button form="storyform">Submit</Button>
-          </DialogClose>
         </DialogFooter>
 
       </DialogContent>

src/app/tailwind.css

@@ -1097,10 +1097,6 @@ body {
   justify-content: space-between;
 }
 
-.justify-around {
-  justify-content: space-around;
-}
-
 .gap-1 {
   gap: 0.25rem;
 }
@@ -1202,6 +1198,10 @@ body {
   white-space: nowrap;
 }
 
+.rounded-3xl {
+  border-radius: 1.5rem;
+}
+
 .rounded-full {
   border-radius: 9999px;
 }
@@ -1214,25 +1214,11 @@ body {
   border-radius: calc(var(--radius) - 4px);
 }
 
-.rounded-3xl {
-  border-radius: 1.5rem;
-}
-
-.rounded-l-3xl {
-  border-top-left-radius: 1.5rem;
-  border-bottom-left-radius: 1.5rem;
-}
-
 .rounded-t-3xl {
   border-top-left-radius: 1.5rem;
   border-top-right-radius: 1.5rem;
 }
 
-.rounded-l {
-  border-top-left-radius: 0.25rem;
-  border-bottom-left-radius: 0.25rem;
-}
-
 .rounded-tl-3xl {
   border-top-left-radius: 1.5rem;
 }

src/app/ui/forms/pub.tsx

@@ -21,8 +21,9 @@ import { Genre } from "@prisma/client"
 import GenrePicker from "./genrePicker"
 import { pubSchema } from "./schemas"
 import { useRouter } from "next/navigation"
+import { Ban } from "lucide-react"
 
-export default function PubForm({ genres, createPub, className }: ComponentProps<"div"> & { genres: Array<Genre>, createPub: (data: any) => void }) {
+export default function PubForm({ genres, createPub, className, closeDialog }: ComponentProps<"div"> & { genres: Array<Genre>, createPub: (data: any) => void, closeDialog: () => void }) {
 	const form = useForm<z.infer<typeof pubSchema>>({
 		resolver: zodResolver(pubSchema),
 		defaultValues: {
@@ -41,6 +42,7 @@ export default function PubForm({ genres, createPub, className }: ComponentProps
 			if (!res) throw new Error("something went wrong")
 			toast({ title: "Successfully submitted:", description: values.title })
 			router.refresh()
+			closeDialog()
 		} catch (error) {
 			toast({
 				title: "Oh dear... ",
@@ -51,11 +53,8 @@ export default function PubForm({ genres, createPub, className }: ComponentProps
 
 	function onErrors(errors) {
 		toast({
-			title: "You have errors",
 			description: (
-				<pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+				<Ban />
-					<code className="text-white">{JSON.stringify(errors, null, 2)}</code>
-				</pre>
 			),
 		})
 		console.log(JSON.stringify(errors))

src/app/ui/forms/story.tsx

@@ -15,11 +15,12 @@ import {
 import { Input } from "@/components/ui/input"
 import { toast } from "@/components/ui/use-toast"
 
-import { ComponentProps } from "react"
+import { ComponentProps, SetStateAction } from "react"
 import { Genre, Story } from "@prisma/client"
 import { randomStoryTitle } from "app/lib/shortStoryTitleGenerator"
 import GenrePicker from "./genrePicker"
 import { useRouter } from "next/navigation"
+import { Ban, Cross } from "lucide-react"
 
 export const formSchema = z.object({
 	id: z.number().optional(),
@@ -28,7 +29,7 @@ export const formSchema = z.object({
 	genres: z.array(z.number())
 })
 
-export default function StoryForm({ genres, createStory, className }: ComponentProps<"div"> & { genres: Array<Genre>, createStory: (data: any) => void, className: string }) {
+export default function StoryForm({ genres, createStory, className, closeDialog }: ComponentProps<"div"> & { genres: Array<Genre>, createStory: (data: any) => void, className: string, closeDialog: () => void }) {
 	const form = useForm<z.infer<typeof formSchema>>({
 		resolver: zodResolver(formSchema),
 		defaultValues: {
@@ -46,6 +47,7 @@ export default function StoryForm({ genres, createStory, className }: ComponentP
 			if (!res) throw new Error("something went wrong")
 			toast({ title: "Sucessfully submitted:", description: values.title })
 			router.refresh()
+			closeDialog()
 		} catch (error) {
 			toast({
 				title: "Oh dear... ",
@@ -58,12 +60,7 @@ export default function StoryForm({ genres, createStory, className }: ComponentP
 
 	function onErrors(errors) {
 		toast({
-			title: "You have errors",
+			description: (<Ban />)
-			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))
 	}
@@ -100,7 +97,7 @@ export default function StoryForm({ genres, createStory, className }: ComponentP
 								<FormItem className="flex flex-col">
 									<FormLabel className="h-5">Word count</FormLabel>
 									<FormControl>
-										<Input className=" w-24" type="number" step={500} min={1} {...field}></Input>
+										<Input className=" w-24" type="number" step={500} {...field}></Input>
 									</FormControl>
 									<FormMessage />
 								</FormItem>