src/app/story/columns.tsx

@@ -51,9 +51,14 @@ export const columns: ColumnDef<StoryWithGenres>[] = [
     }
   },
   columnHelper.accessor("genres", {
+    // cell: props => {
+    //   const genres = props.getValue()
+    //   return <GenreBadges genres={genres} />
+    // },
     cell: GenrePickerInputCell,
     filterFn: "arrIncludes",
     meta: {}
+    //TODO - write custom filter function, to account for an array of objects
   }),
 
 ]

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

@@ -227,7 +227,7 @@ export function DataTable<TData, TValue>({
         <TableBody>
           {table.getRowModel().rows?.length ? (
             table.getRowModel().rows.map((row) => (
-              <ContextMenu onOpenChange={open => setIsContextMenuOpen(open)} key={row.id + "contextMenu"}>
+              <ContextMenu onOpenChange={open => setIsContextMenuOpen(open)}>
                 <ContextMenuTrigger asChild>
                   <TableRow
                     key={row.id}
@@ -240,7 +240,6 @@ export function DataTable<TData, TValue>({
                       </TableCell>
                     ))}
                     <FormContextMenu
-                      key={"formContextMenu" + row.id}
                       row={row}
                       table={table}
                     />

src/app/ui/tables/inputs/genrePickerInput.tsx

@@ -4,14 +4,13 @@ import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover
 import { Button } from "@/components/ui/button"
 import { Checkbox } from "@/components/ui/checkbox"
 import { ComponentProps, useState } from "react"
-import { EventType, useForm, UseFormReturn } from "react-hook-form"
+import { useForm, UseFormReturn } from "react-hook-form"
 import { CellContext } from "@tanstack/react-table"
 import { z } from "zod"
 import { zodResolver } from "@hookform/resolvers/zod"
 import { toast } from "@/components/ui/use-toast"
 import GenreBadges from "app/ui/genreBadges"
 import { updateField, updateGenres } from "app/lib/update"
-import { Genre } from "@prisma/client"
 export default function GenrePickerInputCell(props: CellContext<any, any>) {
 
 
@@ -24,25 +23,23 @@ export default function GenrePickerInputCell(props: CellContext<any, any>) {
   const genres = props.table.options.meta.genres
   const [isActive, setIsActive] = useState(false)
 
-  async function onSubmit({ genres }: { genres: number[] }, event: Event) {
+  async function onSubmit({ genres }: { genres: number[] }) {
-    event.preventDefault()
     const genresArray = genres.map((e) => { return { id: e } })
-    console.log(`genres: ${genres}, genresArray: ${JSON.stringify(genresArray)}`)
+    toast({
-    // toast({
+      title: "You submitted the following values:",
-    //   title: "You submitted the following values:",
+      description: (
-    //   description: (
+        <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
-    //     <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+          <code className="text-white">{JSON.stringify(genresArray, null, 2)}</code>
-    //       <code className="text-white">{JSON.stringify(genres)}</code>
+        </pre>
-    //     </pre>
+      ),
-    //   ),
+    })
-    // })
+    const res = await updateGenres({
-    // const res = await updateGenres({
+      id,
-    //   id,
+      table,
-    //   table,
+      genres: genresArray,
-    //   genres: genresArray,
+      pathname
-    //   pathname
+    })
-    // })
+    setIsActive(false)
-    // setIsActive(false)
   }
 
   function onErrors(errors) {
@@ -57,7 +54,7 @@ export default function GenrePickerInputCell(props: CellContext<any, any>) {
     console.log(JSON.stringify(errors))
   }
   const formSchema = z.object({
-    genres: z.array(z.coerce.number())
+    genres: z.array(z.number())
   })
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
@@ -66,9 +63,9 @@ export default function GenrePickerInputCell(props: CellContext<any, any>) {
     }
   })
   return (
-
     <Form {...form}>
       <form onSubmit={form.handleSubmit(onSubmit, onErrors)} id="editGenresForm">
+
         <Popover modal={true}>
           <FormField
             control={form.control}
@@ -76,14 +73,14 @@ export default function GenrePickerInputCell(props: CellContext<any, any>) {
             render={({ field }) => (
               <FormItem className="flex flex-col">
                 <PopoverTrigger>
-                  {value.length > 0 ? <GenreBadges genres={value} /> : <p>Add genres</p>
+                  {value.length > 0 ? <GenreBadges genres={value} /> : <Button variant="ghost">Add genres</Button>
                   }
                 </PopoverTrigger>
 
 
 
                 <PopoverContent align="start">
-                  {genres.map((item: Genre) => (
+                  {genres.map((item) => (
                     < FormField
                       key={item.id}
                       control={form.control}
@@ -100,9 +97,7 @@ export default function GenrePickerInputCell(props: CellContext<any, any>) {
                                 onCheckedChange={(checked) => {
                                   console.log(field.value)
                                   return checked
-                                    ? field.onChange(
+                                    ? field.onChange([...field.value, item.id])
-                                      [...field.value, item.id]
-                                    )
                                     : field.onChange(
                                       field.value?.filter(
                                         (value) => value !== item.id
@@ -127,9 +122,9 @@ export default function GenrePickerInputCell(props: CellContext<any, any>) {
             )}
           />
         </Popover>
+
       </form>
     </Form>
-
   )
 }