src/app/lib/create.ts

@@ -1,29 +0,0 @@
-"use server"
-import { Genre } from "@prisma/client"
-import prisma from "./db"
-import { revalidatePath } from "next/cache"
-import { redirect } from "next/navigation"
-
-export async function createStory(data) {
-	"use server"
-	const genresArray = data.genres.map((e: Genre) => { return { id: e } })
-	const res = await prisma.story.create({
-		data: {
-			title: data.title,
-			word_count: data.word_count,
-		}
-	})
-	console.log(res)
-	const genresRes = await prisma.story.update({
-		where: { id: res.id },
-		data: {
-			genres: { set: genresArray }
-		}
-	})
-	console.log(genresRes)
-	revalidatePath("/story")
-	redirect("/story")
-}
-
-
-

src/app/story/create.tsx

@@ -1,30 +0,0 @@
-"use client"
-import { createStory } 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 } from "@prisma/client";
-import StoryForm from "app/ui/forms/story";
-
-
-export default function CreateStoryDialog({ genres }: ComponentProps<"div"> & { genres: Array<Genre> }) {
-
-  console.log(genres)
-  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>
-        <StoryForm createStory={createStory} genres={genres} />
-
-
-      </DialogContent>
-    </Dialog>
-  )
-}
-

src/app/story/page.tsx

@@ -1,29 +1,16 @@
 import { Story } from "@prisma/client";
 import { DataTable } from "app/ui/tables/data-table";
 import { columns } from "./columns";
-import { getGenres, getStoriesWithGenres, getPubsWithGenres } from "app/lib/get";
+import { getStoriesWithGenres } from "app/lib/get";
 import { Genre } from "@prisma/client";
-import CreateStoryDialog from "./create";
 
 export type StoryWithGenres = Story & { genres: Array<Genre> }
 
-
-
-
-
-
 export default async function Page() {
-  const genres = await getGenres()
+  const stories: Array<StoryWithGenres> = await getStoriesWithGenres()
-  const storiesWithGenres: Array<StoryWithGenres> = await getStoriesWithGenres()
-  const pubsWithGenres = await getPubsWithGenres()
-
-
-
   return (
     <div className="container mx-auto">
-      <DataTable columns={columns} data={storiesWithGenres} type="story">
+      <DataTable columns={columns} data={stories} type="story" />
-        <CreateStoryDialog genres={genres} />
-      </DataTable>
     </div>
   )
 }

src/app/ui/forms/genreCheckboxes.tsx

@@ -0,0 +1,17 @@
+import { getGenres } from "app/lib/get"
+import React from "react"
+import { letterCase } from "app/lib/functions"
+export default async function GenreCheckboxes() {
+
+	const genres = await getGenres()
+	const genreCheckboxes = genres.map(e => {
+		const label = letterCase(e.name)
+		return (<React.Fragment key={`fragment${e.name}`}>
+			<input type="checkbox" id={e.name} key={`genreCheckboxInput${e.id}`} />
+			<label htmlFor={e.name} key={`genreCheckboxLabel${e.id}`}>{label}</label>
+		</React.Fragment>
+		)
+	})
+	return <>{genreCheckboxes}</>
+
+}

src/app/ui/forms/genreComboBox.tsx

@@ -0,0 +1 @@
+

src/app/ui/forms/genrePicker.tsx

@@ -1,62 +0,0 @@
-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 { cn } from "@/lib/utils"
-import GenreCheckbox from "./genreCheckbox"
-
-export default function GenrePicker({ genres, form }) {
-	return (
-		<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"}
-								className={cn(
-									"min-w-fit max-w-full w-fit pl-3 text-left font-normal flex-wrap gap-y-1 h-fit min-h-10",
-									!field.value && "text-muted-foreground"
-								)}
-							>
-								{field.value.length !== 0 ? (
-									field.value.map((e, i) => (<Badge>{genres.find(f => e === f.id).name}</Badge>))
-								) : (
-									<p>Select</p>
-								)}
-							</Button>
-						</PopoverTrigger>
-
-
-
-						<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>
-			)}
-		/>
-	)
-}
-
-
-
-
-

src/app/ui/forms/genresTrigger.tsx

@@ -0,0 +1,27 @@
+import { FormField, FormItem, FormLabel, FormControl } from "@/components/ui/form"
+import { Popover, PopoverContent, PopoverTrigger } from "@radix-ui/react-popover"
+import { Checkbox } from "@radix-ui/react-checkbox"
+import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
+import { Badge } from "@/components/ui/badge"
+export default function GenresTrigger({ value, genres }) {
+	return (
+		<>
+			<PopoverTrigger asChild>
+				<Button
+					variant={"outline"}
+					className={cn(
+						"min-w-fit max-w-full w-fit pl-3 text-left font-normal flex-wrap gap-y-1 h-fit min-h-10",
+						!value && "text-muted-foreground"
+					)}
+				>
+					{value.length !== 0 ? (
+						value.map((e, i) => (<Badge>{genres.find(f => e === f.id).name}</Badge>))
+					) : (
+						<p>Select</p>
+					)}
+				</Button>
+			</PopoverTrigger>
+		</>
+	)
+}