"use client" import { FormField, FormItem, FormLabel, FormMessage, FormControl, Form } from "@/components/ui/form" 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 { 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" export default function GenrePickerInputCell(props: CellContext) { const table = props.table.options.meta.tableName const pathname = props.table.options.meta.pathname const id = props.row.original.id const column = props.column.id const value = props.cell.getValue() const genres = props.table.options.meta.genres const [isActive, setIsActive] = useState(false) async function onSubmit({ genres }: { genres: number[] }) { const genresArray = genres.map((e) => { return { id: e } }) toast({ title: "You submitted the following values:", description: (
          {JSON.stringify(genresArray, null, 2)}
        
), }) const res = await updateGenres({ id, table, genres: genresArray, pathname }) setIsActive(false) } function onErrors(errors) { toast({ title: "You have errors", description: (
          {JSON.stringify(errors, null, 2)}
        
), }) console.log(JSON.stringify(errors)) } const formSchema = z.object({ genres: z.array(z.number()) }) const form = useForm>({ resolver: zodResolver(formSchema), defaultValues: { genres: value.map(e => e.id) } }) return (
( {value.length > 0 ? : } {genres.map((item) => ( < FormField key={item.id} control={form.control} name="genres" render={({ field }) => { return ( { console.log(field.value) return checked ? field.onChange([...field.value, item.id]) : field.onChange( field.value?.filter( (value) => value !== item.id ) ) }} /> {item.name} ) }} /> ))} )} />
) }