implement create pubs popup

src/app/lib/create.ts

@@ -26,4 +26,24 @@ export async function createStory(data) {
 }
 
 
+export async function createPub(data) {
+	"use server"
+	const genresArray = data.genres.map(e => { return { id: e } })
+	const res = await prisma.pub.create({
+		data: {
+			title: data.title,
+			link: data.link,
+			query_after_days: data.query_after_days
+		}
+	})
+	console.log(res)
+	const genresRes = await prisma.pub.update({
+		where: { id: res.id },
+		data:
+			{ genres: { set: genresArray } }
+	})
+	console.log(genresRes)
+	revalidatePath("/publication")
+	redirect("/publication")
+}
 

src/app/publication/create.tsx

@@ -0,0 +1,30 @@
+"use client"
+import { Dialog, DialogHeader, DialogTrigger, DialogContent, DialogClose, DialogTitle, DialogFooter, DialogDescription } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { ComponentProps } from "react";
+import { Genre } from "@prisma/client";
+import { createPub } from "app/lib/create";
+import PubForm from "app/ui/forms/pub";
+
+export default function CreatePubDialog({ genres }: ComponentProps<"div"> & { genres: Genre[] }) {
+
+  return (
+
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button>Create new Publication</Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <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} />
+        <DialogFooter>
+          <Button form="pubform">Submit</Button>
+        </DialogFooter>
+
+      </DialogContent>
+    </Dialog>
+  )
+}

src/app/publication/create/page.tsx

@@ -1,40 +0,0 @@
-import PubForm from "app/ui/forms/pub";
-import { getGenres } from "app/lib/get";
-import prisma from "app/lib/db";
-import { CreateContainer, CreateContainerContent, CreateContainerDescription, CreateContainerHeader } from "app/ui/createContainer";
-import { revalidatePath } from "next/cache";
-import { redirect } from "next/navigation";
-export default async function Page() {
-	async function createPub(data) {
-		"use server"
-		const genresArray = data.genres.map(e => { return { id: e } })
-		const res = await prisma.pub.create({
-			data: {
-				title: data.title,
-				link: data.link,
-				query_after_days: data.query_after_days
-			}
-		})
-		console.log(res)
-		const genresRes = await prisma.pub.update({
-			where: { id: res.id },
-			data:
-				{ genres: { set: genresArray } }
-		})
-		console.log(genresRes)
-		revalidatePath("/publication")
-		redirect("/publication")
-	}
-	const genres = await getGenres()
-	return (
-		<CreateContainer>
-			<CreateContainerHeader>New publication</CreateContainerHeader>
-			<CreateContainerContent>
-				<CreateContainerDescription>
-					Create a new entry for a publication i.e. a place you intend to submit to.
-				</CreateContainerDescription>
-				<PubForm genres={genres} createPub={createPub} className="mt-6" />
-			</CreateContainerContent>
-		</CreateContainer>
-	)
-}

src/app/publication/page.tsx

@@ -1,15 +1,21 @@
 import { Genre, Pub } from "@prisma/client";
-import { getPubsWithGenres } from "app/lib/get";
+import { getGenres, getPubsWithGenres } from "app/lib/get";
 import { columns } from "./columns";
 import { DataTable } from "app/ui/tables/data-table";
+import CreatePubDialog from "./create";
 
 export type PubsWithGenres = Pub & { genres: Array<Genre> }
 
+
+
 export default async function Page() {
+  const genres = await getGenres()
   const pubs = await getPubsWithGenres()
   return (
     <div className="container mx-auto">
-      <DataTable data={pubs} columns={columns} type="publication" />
+      <DataTable data={pubs} columns={columns} type="publication">
+        <CreatePubDialog genres={genres} />
+      </DataTable>
 
     </div>
   )

src/app/story/create.tsx

@@ -7,9 +7,8 @@ import { Genre } from "@prisma/client";
 import StoryForm from "app/ui/forms/story";
 
 
-export default function CreateStoryDialog({ genres }: ComponentProps<"div"> & { genres: Array<Genre> }) {
+export default function CreateStoryDialog({ genres }: ComponentProps<"div"> & { genres: Genre[] }) {
 
-  console.log(genres)
   return (
     <Dialog>
       <DialogTrigger asChild>
@@ -21,7 +20,9 @@ export default function CreateStoryDialog({ genres }: ComponentProps<"div"> & {
           <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} />
-
+        <DialogFooter>
+          <Button form="storyform">Submit</Button>
+        </DialogFooter>
 
       </DialogContent>
     </Dialog>

src/app/ui/forms/genrePicker.tsx

@@ -1,19 +1,20 @@
-import { FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form"
+import { FormField, FormItem, FormLabel, FormMessage, FormControl } from "@/components/ui/form"
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
 import { Button } from "@/components/ui/button"
 import { Badge } from "@/components/ui/badge"
+import { Checkbox } from "@/components/ui/checkbox"
 import { cn } from "@/lib/utils"
 import GenreCheckbox from "./genreCheckbox"
 
 export default function GenrePicker({ genres, form }) {
 	return (
+		<Popover modal={true}>
 			<FormField
 				control={form.control}
 				name="genres"
 				render={({ field }) => (
 					<FormItem className="flex flex-col">
 						<FormLabel className="h-5">Genres</FormLabel>
-					<Popover modal={true}>
 						<PopoverTrigger asChild>
 							<Button
 								variant={"outline"}
@@ -23,7 +24,7 @@ export default function GenrePicker({ genres, form }) {
 								)}
 							>
 								{field.value.length !== 0 ? (
-									field.value.map((e, i) => (<Badge>{genres.find(f => e === f.id).name}</Badge>))
+									field.value.map((e, i) => (<Badge key={i}>{genres.find(f => e === f.id).name}</Badge>))
 								) : (
 									<p>Select</p>
 								)}
@@ -34,25 +35,45 @@ export default function GenrePicker({ genres, form }) {
 
 						<PopoverContent align="start">
 							{genres.map((item) => (
-								<FormField
+								< FormField
-
 									key={item.id}
 									control={form.control}
 									name="genres"
 									render={({ field }) => {
 										return (
-											<GenreCheckbox field={field} item={item} />
+											<FormItem
+												key={item.id}
+												className="flex flex-row items-start space-x-3 space-y-0"
+											>
+												<FormControl>
+													<Checkbox
+														checked={field.value?.includes(item.id)}
+														onCheckedChange={(checked) => {
+															return checked
+																? field.onChange([...field.value, item.id])
+																: field.onChange(
+																	field.value?.filter(
+																		(value) => value !== item.id
+																	)
+																)
+														}}
+													/>
+												</FormControl>
+												<FormLabel className="text-sm font-normal">
+													{item.name}
+												</FormLabel>
+											</FormItem>
 										)
 									}}
 								/>
 							))}
 							<Button variant="link" className="p-0" onClick={() => form.setValue("genres", [])}>Clear</Button>
 						</PopoverContent>
-					</Popover>
 						<FormMessage />
 					</FormItem>
 				)}
 			/>
+		</Popover>
 	)
 }
 

src/app/ui/forms/pub.tsx

@@ -25,6 +25,7 @@ import GenreCheckbox from "./genreCheckbox"
 import { randomPublicationTitle } from "app/lib/shortStoryTitleGenerator"
 import { ComponentProps } from "react"
 import { Genre } from "@prisma/client"
+import GenrePicker from "./genrePicker"
 
 const formSchema = z.object({
 	title: z.string().min(2).max(50),
@@ -79,7 +80,7 @@ export default function PubForm({ genres, createPub, className }: ComponentProps
 	return (
 		<div className={className}>
 			<Form {...form}>
-				<form onSubmit={form.handleSubmit(onSubmit, onErrors)} className="space-y-8">
+				<form id="pubform" onSubmit={form.handleSubmit(onSubmit, onErrors)} className="space-y-8">
 					<FormField
 						control={form.control}
 						name="title"
@@ -109,35 +110,7 @@ export default function PubForm({ genres, createPub, className }: ComponentProps
 					/>
 
 					<div className="inline-flex flex-wrap w-full gap-x-16 gap-y-8 max-w-full h-fit">
-						<FormField
+						<GenrePicker genres={genres} form={form} />
-							control={form.control}
-							name="genres"
-							render={({ field }) => (
-								<FormItem className="flex flex-col flex-wrap">
-									<FormLabel className="h-5">Genres</FormLabel>
-									<Popover>
-										<GenresTrigger value={field.value} genres={genres} />
-										<PopoverContent align="start">
-											{genres.map((item) => (
-												<FormField
-													key={item.id}
-													control={form.control}
-													name="genres"
-													render={({ field }) => {
-														return (
-															<GenreCheckbox field={field} item={item} />
-														)
-													}}
-												/>
-											))}
-											<Button variant="link" className="p-0" onClick={() => form.setValue("genres", [])}>Clear</Button>
-										</PopoverContent>
-									</Popover>
-									<FormMessage />
-								</FormItem>
-							)}
-						/>
-
 
 						<FormField
 							control={form.control}
@@ -154,7 +127,6 @@ export default function PubForm({ genres, createPub, className }: ComponentProps
 						/>
 					</div>
 
-					<Button type="submit">Submit</Button>
 				</form>
 			</Form>
 		</div>

src/app/ui/forms/story.tsx

@@ -20,12 +20,11 @@ import {
 	Popover,
 	PopoverContent,
 } from "@/components/ui/popover"
-import GenresTrigger from "./genresTrigger"
-import GenreCheckbox from "./genreCheckbox"
 import { ComponentProps } from "react"
 import { Genre } from "@prisma/client"
 import { randomStoryTitle } from "app/lib/shortStoryTitleGenerator"
 import { usePathname } from "next/navigation"
+import GenrePicker from "./genrePicker"
 
 const formSchema = z.object({
 	title: z.string().min(2).max(50),
@@ -73,12 +72,10 @@ export default function StoryForm({ genres, createStory, className }: ComponentP
 		console.log(JSON.stringify(errors))
 	}
 
-	const pathname = usePathname()
-
 	return (
 		<div className={className}>
 			<Form {...form}>
-				<form onSubmit={form.handleSubmit(onSubmit, onErrors)} className="space-y-8">
+				<form onSubmit={form.handleSubmit(onSubmit, onErrors)} className="space-y-8" id="storyform">
 					<FormField
 						control={form.control}
 						name="title"
@@ -95,35 +92,9 @@ export default function StoryForm({ genres, createStory, className }: ComponentP
 
 					<div className="inline-flex flex-wrap w-full gap-x-16 gap-y-8 items-baseline max-w-full">
 
-
+						<GenrePicker
-						<FormField
+							genres={genres}
-							control={form.control}
+							form={form}
-							name="genres"
-							render={({ field }) => (
-								<FormItem className="flex flex-col">
-									<FormLabel className="h-5">Genres</FormLabel>
-									<Popover>
-										<GenresTrigger value={field.value} genres={genres} />
-										<PopoverContent align="start">
-											{genres.map((item) => (
-												<FormField
-
-													key={item.id}
-													control={form.control}
-													name="genres"
-													render={({ field }) => {
-														return (
-															<GenreCheckbox field={field} item={item} />
-														)
-													}}
-												/>
-											))}
-											<Button variant="link" className="p-0" onClick={() => form.setValue("genres", [])}>Clear</Button>
-										</PopoverContent>
-									</Popover>
-									<FormMessage />
-								</FormItem>
-							)}
 						/>
 
 						<FormField
@@ -142,7 +113,6 @@ export default function StoryForm({ genres, createStory, className }: ComponentP
 
 					</div>
 
-					<Button type="submit" className="">Submit</Button>
 
 
 				</form>

src/app/ui/tables/data-table.tsx

@@ -9,7 +9,7 @@ import {
   DropdownMenuRadioGroup
 } from "@/components/ui/dropdown-menu"
 import { Input } from "@/components/ui/input"
-import { useState } from "react"
+import { Component, ComponentProps, useState } from "react"
 import {
   ColumnDef,
   flexRender,
@@ -33,8 +33,6 @@ import {
 } from "@/components/ui/table"
 import { EyeIcon } from "lucide-react"
 import { usePathname } from "next/navigation"
-import { useRouter } from "next/navigation"
-import Link from "next/link"
 
 interface DataTableProps<TData, TValue> {
   columns: ColumnDef<TData, TValue>[]
@@ -45,8 +43,8 @@ interface DataTableProps<TData, TValue> {
 export function DataTable<TData, TValue>({
   columns,
   data,
-  type
+  children
-}: DataTableProps<TData, TValue> & { type: "publication" | "submission" | "story" | "genre" | "response" }) {
+}: DataTableProps<TData, TValue> & ComponentProps<"div"> & { type: "publication" | "submission" | "story" | "genre" | "response" }) {
   //STATE
   const [sorting, setSorting] = useState<SortingState>([])
   const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>(
@@ -107,9 +105,8 @@ export function DataTable<TData, TValue>({
         />
       </div>
 
-      <Link href={pathname + "/create"}>
+      {children}
-        <Button>Create new {type}</Button>
+
-      </Link>
 
       <DropdownMenu>
         <DropdownMenuTrigger asChild>