I would like to update the database using remix and conform

[necrapper]

I am a newbie in learning programming.

I would like to do these things but do not know how to write them down.

1. Display the data retrieved from supabase in a table.
2. Then, placing an edit button on each row, and when clicked, display a dialog with the data in that row as the default values.
3. Then, edit the dialog and click the update button to update the data
   I do not know how to coding 3. My code was too dirty, so I erased part of the code. However, the error is happening before that. In fact, I tried to write a process to update when actionType === “update” in the Action function, but even formData could not be obtained correctly.

The code is as shown here.

const schema = z.object({
    career: z.string().min(1, { message: "Career is required" }),
    shop_name: z.string().min(1, { message: "Shop name is required" }),
    details: z.string().min(1, { message: "Details are required" }),
    cb: z.number().min(0, { message: "CB must be a positive number" }),
});



//Action Function
export const action: ActionFunction = async ({request}) => {

    const formData = await request.formData();
    console.log('formData', formData);
    const payload = Object.fromEntries(formData);
    console.log('payload', payload);
    const result = schema.safeParse(payload);
    console.log('result', result);
    const actionType = formData.get('_action');
    const id = formData.get('id');
    const career = formData.get('career');
    const shop_name = formData.get('shop_name');
    const details = formData.get('details');
    const cb = parseFloat(formData.get('cb') as string);

    if(actionType === 'edit'){
        console.log('edit mode');
        if(typeof id === 'string'){
            const {data, error} = await supabase
                .from('campaigns')
                .select('*')
                .eq('id', id)
                .single();

            if(error) throw new Error(error.message);
            data.mode = 'edit';
            console.log('data',data);
            return json(data);
        }
        
    }

    if(actionType === 'update'){
        console.log('update mode');
        const submission = parseWithZod(formData, {schema});

        return null;
    }

};

//Loader Function
export const loader: LoaderFunction = async () => {
    const { data, error } = await supabase
        .from('campaigns')
        .select('*');
    if (error) throw new Error(error.message);
    return json(data);
};

//Component
export default function Campaigns() {
    const data = useLoaderData();
    const result = useActionData();

    const [editDialogOpen, setEditDialogOpen] = useState(false);
    const [currentCampaign, setCurrentCampaign] = useState();

    useEffect(() => {
        if(!result) return;

        if(result.mode === 'edit'){
            console.log('edit mode');
            console.log('result', result);
            setCurrentCampaign({...result});
        }

        if(result.mode === 'update'){
            console.log('update mode');
            console.log('result', result);
        }
    }, [result]);

    const [form, fields ] = useForm({
        onSubmit(event, {formData}){
            console.log('formData', formData);
            event.preventDefault();
        },
        constraint: getZodConstraint(schema),
        onValidate({formData}){
            return parseWithZod(formData,{schema});
        },
    });

    useEffect(() => {
        if(currentCampaign){
        console.log('currentCampaign', currentCampaign);
        console.log('form更新のuseEffect')
        console.log('fields.career.name', fields.career.name);
        console.log(currentCampaign?.career || '空白');
        form.update({name:fields.career.name, value: currentCampaign?.career || ''});
        form.update({name:fields.shop_name.name, value: currentCampaign?.shop_name || ''});
        form.update({name:fields.details.name, value: currentCampaign?.details || ''});
        form.update({name:fields.cb.name, value: currentCampaign?.CB || 0}); 
        }
    }, [currentCampaign]);

    return (
      <div>
          <Table>
            <TableHeader>
                <TableRow>
                <TableHead className="w-[100px]">Operation</TableHead>
                <TableHead className="w-[100px]">Career</TableHead>
                <TableHead>Shop_name</TableHead>
                <TableHead>Details</TableHead>
                <TableHead className="text-right">CB</TableHead>
                </TableRow>
            </TableHeader>
            <TableBody>
                {data.map((campaign: any) => (
                <TableRow key={campaign.id}>
                <TableCell className="font-medium">
                    <Dialog open={editDialogOpen} onOpenChange={setEditDialogOpen}>
                        <DialogTrigger asChild>
                            <Form method="post">
                                <input type="hidden" name="id" value={campaign.id} />
                                <Button variant="outline" 
                                type="submit" 
                                value="edit" 
                                name="_action"
                                    >Edit</Button>
                            </Form>
                        </DialogTrigger>
                        <DialogContent>
                            <DialogHeader>
                                <DialogTitle>Edit campaign</DialogTitle>
                            </DialogHeader>
                                <Form method="post" {...getFormProps(form)} >
                                    <input type="hidden" name="id" value={currentCampaign?.id || ''} />
                                    <Label htmlFor={fields.career.id}>Career</Label>
                                    <Input {...getInputProps(fields.career, {type:'text'})} />
                                    <Label htmlFor={fields.shop_name.id}>Shop_name</Label>
                                    <Input {...getInputProps(fields.shop_name, {type:'text',})}  />
                                    <Label htmlFor={fields.details.id}>Details</Label>
                                    <Input {...getInputProps(fields.details, {type:'text'})} />
                                    <Label htmlFor={fields.cb.id}>CB</Label>
                                    <Input {...getInputProps(fields.cb, {type:'number'})}  />
                                    <DialogFooter className="sm:justify-start">
                                        <Button type="submit" variant="destructive" name="_action" value="update">Update</Button>
                                    </DialogFooter>
                                </Form>
                            </DialogContent>
                        </Dialog>
                </TableCell>
                <TableCell className="font-medium">{campaign.career}</TableCell>
                <TableCell>{campaign.shop_name}</TableCell>
                <TableCell>{campaign.details}</TableCell>
                <TableCell className="text-right">{campaign.CB.toLocaleString()}yen</TableCell>
                </TableRow>
                ))}
            </TableBody>
            </Table>
      </div>
    );
  }