From 0586b33bcd864779cff9863e48569516058d726e Mon Sep 17 00:00:00 2001
From: andrzej <andrzejjamesstepien@gmail.com>
Date: Wed, 24 Jul 2024 17:24:04 +0200
Subject: [PATCH] improve genre picker cell

---
 prisma/dev.db                                 | Bin 69632 -> 69632 bytes
 src/app/story/columns.tsx                     |   5 --
 src/app/ui/tables/inputs/genrePickerInput.tsx |  51 ++++++++++--------
 3 files changed, 28 insertions(+), 28 deletions(-)

diff --git a/prisma/dev.db b/prisma/dev.db
index b78283ed8df19387f0f6e6388631aba083fc65eb..91f05e71ac2d5f9a8e13d7a7bbaa8de9b1d0a9b6 100644
GIT binary patch
delta 69
zcmZozz|ydQWr8%L_Cy(HM(vFWYyLBF*=*%w+{w<uEx}Z}{WLpcArp(YBnQKES$;;(
W>787R{VY7q48CCQ_Ec`h*(?CFg%U~t

delta 74
zcmV-Q0JZ;spag)R1dtm6Dv=yR0V=Uztp5TF7_|-oxd#Lcg95_0%Lf5*0+%oj0T>B&
gWgtp*ZXhx>m!S#)ESHH20gsnF3IR{IXA1$D1W-m5wEzGB

diff --git a/src/app/story/columns.tsx b/src/app/story/columns.tsx
index 5efbcf0..a7fbf28 100644
--- a/src/app/story/columns.tsx
+++ b/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
   }),
 
 ]
diff --git a/src/app/ui/tables/inputs/genrePickerInput.tsx b/src/app/ui/tables/inputs/genrePickerInput.tsx
index 97ccaae..ddedd5f 100644
--- a/src/app/ui/tables/inputs/genrePickerInput.tsx
+++ b/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>
+
   )
 }