src/app/lib/create.ts

@@ -26,34 +26,4 @@ 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")
-}
 
-
-
-export async function createSub(data) {
-	"use server"
-	const res = await prisma.sub.create({ data })
-	console.log(res)
-	revalidatePath("/submission")
-	redirect("/submission")
-
-}

src/app/publication/create.tsx

@@ -1,30 +0,0 @@
-"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

@@ -0,0 +1,40 @@
+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,21 +1,15 @@
 import { Genre, Pub } from "@prisma/client";
-import { getGenres, getPubsWithGenres } from "app/lib/get";
+import { 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,8 +7,9 @@ import { Genre } from "@prisma/client";
 import StoryForm from "app/ui/forms/story";
 
 
-export default function CreateStoryDialog({ genres }: ComponentProps<"div"> & { genres: Genre[] }) {
+export default function CreateStoryDialog({ genres }: ComponentProps<"div"> & { genres: Array<Genre> }) {
 
+  console.log(genres)
   return (
     <Dialog>
       <DialogTrigger asChild>
@@ -20,9 +21,7 @@ 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/submission/create.tsx

@@ -1,33 +0,0 @@
-
-"use client"
-import { createStory, createSub } from "app/lib/create"
-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, Pub, Story } from "@prisma/client";
-import StoryForm from "app/ui/forms/story";
-import SubmissionForm from "app/ui/forms/sub";
-import { getPubs, getResponses, getStories } from "app/lib/get";
-
-
-export default function CreateSubmissionDialog({ stories, pubs, responses }: ComponentProps<"div"> & { stories: Story[], pubs: Pub[], responses: Response[] }) {
-
-  return (
-    <Dialog>
-      <DialogTrigger asChild>
-        <Button>Create new Story</Button>
-      </DialogTrigger>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>New story</DialogTitle>
-          <DialogDescription>Create an entry for a new story i.e. a thing you intend to submit for publication.</DialogDescription>
-        </DialogHeader>
-        <SubmissionForm createSub={createSub} pubs={pubs} responses={responses} stories={stories} />
-        <DialogFooter>
-          <Button form="subform">Submit</Button>
-        </DialogFooter>
-
-      </DialogContent>
-    </Dialog>
-  )
-}

src/app/submission/page.tsx

@@ -1,8 +1,7 @@
-import { getGenres, getPubs, getResponses, getStories, getSubsComplete } from "app/lib/get"
+import { getSubsComplete } from "app/lib/get"
 import { DataTable } from "app/ui/tables/data-table"
 import { columns } from "./columns"
 import { Pub, Response, Story, Sub } from "@prisma/client"
-import CreateSubmissionDialog from "./create"
 
 export type SubComplete = Sub & {
   pub: Pub,
@@ -11,18 +10,9 @@ export type SubComplete = Sub & {
 }
 export default async function Page() {
   const subs: Array<SubComplete> = await getSubsComplete()
-  const stories = await getStories()
-  const pubs = await getPubs()
-  const responses = await getResponses()
   return (
     <div className="container">
-      <DataTable data={subs} columns={columns} type="submission">
+      <DataTable data={subs} columns={columns} type="submission" />
-        <CreateSubmissionDialog
-          stories={stories}
-          pubs={pubs}
-          responses={responses}
-        />
-      </DataTable>
     </div>
   )
 }

src/app/ui/forms/genrePicker.tsx

@@ -1,20 +1,19 @@
-import { FormField, FormItem, FormLabel, FormMessage, FormControl } from "@/components/ui/form"
+import { FormField, FormItem, FormLabel, FormMessage } 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"}
@@ -24,7 +23,7 @@ export default function GenrePicker({ genres, form }) {
 								)}
 							>
 								{field.value.length !== 0 ? (
-									field.value.map((e, i) => (<Badge key={i}>{genres.find(f => e === f.id).name}</Badge>))
+									field.value.map((e, i) => (<Badge>{genres.find(f => e === f.id).name}</Badge>))
 								) : (
 									<p>Select</p>
 								)}
@@ -35,45 +34,25 @@ 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 (
-											<FormItem
+											<GenreCheckbox field={field} item={item} />
-												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,7 +25,6 @@ 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),
@@ -80,7 +79,7 @@ export default function PubForm({ genres, createPub, className }: ComponentProps
 	return (
 		<div className={className}>
 			<Form {...form}>
-				<form id="pubform" onSubmit={form.handleSubmit(onSubmit, onErrors)} className="space-y-8">
+				<form onSubmit={form.handleSubmit(onSubmit, onErrors)} className="space-y-8">
 					<FormField
 						control={form.control}
 						name="title"
@@ -110,7 +109,35 @@ 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">
-						<GenrePicker genres={genres} form={form} />
+						<FormField
+							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}
@@ -127,6 +154,7 @@ export default function PubForm({ genres, createPub, className }: ComponentProps
 						/>
 					</div>
 
+					<Button type="submit">Submit</Button>
 				</form>
 			</Form>
 		</div>

src/app/ui/forms/story.tsx

@@ -20,11 +20,12 @@ 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),
@@ -72,10 +73,12 @@ 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" id="storyform">
+				<form onSubmit={form.handleSubmit(onSubmit, onErrors)} className="space-y-8">
 					<FormField
 						control={form.control}
 						name="title"
@@ -92,9 +95,35 @@ 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
+
-							genres={genres}
+						<FormField
-							form={form}
+							control={form.control}
+							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
@@ -113,6 +142,7 @@ export default function StoryForm({ genres, createStory, className }: ComponentP
 
 					</div>
 
+					<Button type="submit" className="">Submit</Button>
 
 
 				</form>

src/app/ui/forms/sub.tsx

@@ -123,7 +123,7 @@ export default function SubmissionForm({ stories, pubs, responses, createSub })
 
 	return (
 		<Form {...form}>
-			<form id="subform" onSubmit={form.handleSubmit(onSubmit, onErrors)} className="space-y-8">
+			<form onSubmit={form.handleSubmit(onSubmit, onErrors)} className="space-y-8">
 				<FormField
 					control={form.control}
 					name="storyId"
@@ -177,7 +177,7 @@ export default function SubmissionForm({ stories, pubs, responses, createSub })
 					render={({ field }) => (
 						<FormItem className="flex flex-col">
 							<FormLabel>Date of submission</FormLabel>
-							<Popover modal={true} open={isSubCalendarOpen} onOpenChange={setIsSubCalendarOpen}>
+							<Popover open={isSubCalendarOpen} onOpenChange={setIsSubCalendarOpen}>
 								<PopoverTrigger asChild>
 									<FormControl>
 										<Button
@@ -222,7 +222,7 @@ export default function SubmissionForm({ stories, pubs, responses, createSub })
 					render={({ field }) => (
 						<FormItem className="flex flex-col">
 							<FormLabel>Date of response</FormLabel>
-							<Popover modal={true} open={isRespCalendarOpen} onOpenChange={setIsRespCalendarOpen}>
+							<Popover open={isRespCalendarOpen} onOpenChange={setIsRespCalendarOpen}>
 								<PopoverTrigger asChild>
 									<FormControl>
 										<Button
@@ -276,7 +276,7 @@ export default function SubmissionForm({ stories, pubs, responses, createSub })
 										</SelectValue>
 									</SelectTrigger>
 								</FormControl>
-								<SelectContent aria-modal={true}>
+								<SelectContent>
 									{reponsesSelectItems}
 								</SelectContent>
 							</Select>
@@ -286,6 +286,7 @@ export default function SubmissionForm({ stories, pubs, responses, createSub })
 					)}
 				/>
 
+				<Button type="submit">Submit</Button>
 			</form>
 		</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 { Component, ComponentProps, useState } from "react"
+import { useState } from "react"
 import {
   ColumnDef,
   flexRender,
@@ -33,6 +33,8 @@ 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>[]
@@ -43,8 +45,8 @@ interface DataTableProps<TData, TValue> {
 export function DataTable<TData, TValue>({
   columns,
   data,
-  children
+  type
-}: DataTableProps<TData, TValue> & ComponentProps<"div"> & { type: "publication" | "submission" | "story" | "genre" | "response" }) {
+}: DataTableProps<TData, TValue> & { type: "publication" | "submission" | "story" | "genre" | "response" }) {
   //STATE
   const [sorting, setSorting] = useState<SortingState>([])
   const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>(
@@ -105,8 +107,9 @@ export function DataTable<TData, TValue>({
         />
       </div>
 
-      {children}
+      <Link href={pathname + "/create"}>
-
+        <Button>Create new {type}</Button>
+      </Link>
 
       <DropdownMenu>
         <DropdownMenuTrigger asChild>