From 71f5a44c8e240d6c59bc810738a32cf452a868dc Mon Sep 17 00:00:00 2001
From: andrzej <andrzejjamesstepien@gmail.com>
Date: Wed, 24 Jul 2024 22:01:20 +0200
Subject: [PATCH] give each genrePicker cell a unique form id

---
 prisma/dev.db                                 | Bin 69632 -> 69632 bytes
 src/app/ui/tables/inputs/genrePickerInput.tsx |  41 ++++++++++--------
 2 files changed, 22 insertions(+), 19 deletions(-)

diff --git a/prisma/dev.db b/prisma/dev.db
index 91f05e71ac2d5f9a8e13d7a7bbaa8de9b1d0a9b6..9c6c0b904d2f766d9ec87accbeaeb592346b6509 100644
GIT binary patch
delta 461
zcmX9)u}T9$6ujHpRbn%cGlAqb$u-M~XiS~f-cJzAbe1*&gN+D*L<4G}CWs)!BI<!4
zh=PKMf&>c%5d(rCA{J_)Hu`q2nb{fU?VH_7i&t8_?%9P!Ic^vBrZ#IM=a!4Ig%ccN
zA3NB>I_g-!C*JUkWpr_gAI#wqcPNMX`UHILJ29JyjAPqE373ckJWgI9Qd%_Dn!_c_
zvN-q1R3c5LqeM;<6ImT$B1t5qNN6SbAO)q6B)A&DF;yyADB%MgT+#Y_yy5`cSiwAI
zaDygln8g{MFdgPwMFf33M)&yr+}52khFRbmc2qjjD%GfU#){NT*v8>XnnC47L6(bx
zENfWEWTa)n#ANv0iTR^6@1n}^LhGye#TVXjfm0k&#a*=N2RHD5TU=umOJTk{iLB7C
q^fd;q!MH}1HkfL(dqbltL$$Oi4SE_`&Y&5WNqv?HgW+G#F8l*E*i!od

delta 461
zcmXw#KT88a6vTIPyLVZe$>mSwB7xj-Vl-N(wf7^4rJul*rczQRCZHB-f(Sw^q8<o>
zC|HP%!9pw)j0lQ__67@mx2HUqdBeWqw^QwiYDY9id2vn8^5W6LZhi8d0X2pfJmL;F
zxWWZaaf}1(VH-oNqk$SeX=+#sON}|?Jq(%6V=c&x#d#tSX-n}yx)iL|R(oPmDq5wM
zNiw0O6Fq2YlO?o}bgUU;t`a$mD?zKR5;7IN`XhKHqzc0mdIWHf6YOIHtEixlHtJX=
z$n*aROPw+TFGoxc_p-(cj^Ghg#<=CXarRTKdT+XHg4D{m(8>5nJModWZJ{{Vl9;kw
z+JY-Caugh%2)}wNKZOs%Ycjmy84uK1AJ@3V8DSoxOReo-6V1O_2}`&07{fQSy{x3~
o1sS91NPX96s?{BgPiYkeoiyqgwT&8(s3BN_YKu^0_%q-$zb?^M$p8QV

diff --git a/src/app/ui/tables/inputs/genrePickerInput.tsx b/src/app/ui/tables/inputs/genrePickerInput.tsx
index ddedd5f..9136632 100644
--- a/src/app/ui/tables/inputs/genrePickerInput.tsx
+++ b/src/app/ui/tables/inputs/genrePickerInput.tsx
@@ -24,25 +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[] }, 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({
-    //   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)
+    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) {
@@ -65,11 +65,14 @@ export default function GenrePickerInputCell(props: CellContext<any, any>) {
       genres: value.map(e => e.id)
     }
   })
+
+  const formId = "editGenresForm" + props.cell.id
+
   return (
 
     <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit, onErrors)} id="editGenresForm">
-        <Popover modal={true}>
+      <form onSubmit={form.handleSubmit(onSubmit, onErrors)} id={formId}>
+        <Popover modal={true} open={isActive} onOpenChange={() => setIsActive(prev => !prev)}>
           <FormField
             control={form.control}
             name="genres"
@@ -119,7 +122,7 @@ export default function GenrePickerInputCell(props: CellContext<any, any>) {
                       }}
                     />
                   ))}
-                  <Button variant="ghost" form="editGenresForm">Submit</Button>
+                  <Button variant="ghost" form={formId}>Submit</Button>
                   <Button variant="link" className="p-0" onClick={() => form.setValue("genres", [])}>Clear</Button>
                 </PopoverContent>
                 <FormMessage />