improve genre picker cell

src/app/story/columns.tsx

@@ -51,14 +51,9 @@ 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/inputs/genrePickerInput.tsx

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