How to implement multiple submit actions

[zanozbot]

Hi everyone!

I'm stuck on this one. I'm trying to implement a form that supports two actions update and delete.
As you can see the code is pretty straightforward. I'm using Zod for data validation.

import { zodResolver } from "@hookform/resolvers/zod";
import { ActionFunctionArgs } from "@remix-run/node";
import { Form } from "@remix-run/react";
import { getValidatedFormData, useRemixForm } from "remix-hook-form";
import zod from "zod";
import { Button } from "~/components/ui/button";
import { Input } from "~/components/ui/input";

const item = zod.object({
  title: zod.string().max(255).optional(),
});
type Item = zod.infer<typeof item>;
const resolver = zodResolver(item);

export const action = async ({ request, params }: ActionFunctionArgs) => {
  const { receivedValues, errors, data } = await getValidatedFormData<Item>(request, resolver);

  // TODO: Implement a switch depending on the submit action
};

export default function Item() {
  const { formState, handleSubmit, watch, setValue, register, getValues } = useRemixForm<Item>({
    resolver,
    defaultValues: {
      title: "Hello",
    },
  });

  return (
    <Form method="post" action="." onSubmit={handleSubmit} className="space-y-4">
      <Input {...register("title")} placeholder="Title" />
      <Button type="submit" variant="ghost">
        Delete
      </Button>
      <Button type="submit">Create</Button>
    </Form>
  );
}

How would I go about solving this predicament?

[zanozbot]

I ended up using the useSubmit hook. It's not the prettiest solution but it gets the job done.

import { zodResolver } from "@hookform/resolvers/zod";
import { ActionFunctionArgs } from "@remix-run/node";
import { Form, useSubmit } from "@remix-run/react";
import { getValidatedFormData, useRemixForm } from "remix-hook-form";
import zod from "zod";
import { Button } from "~/components/ui/button";
import { Input } from "~/components/ui/input";

const item = zod.object({
  title: zod.string().max(255).optional(),
});
type Item = zod.infer<typeof item>;
const resolver = zodResolver(item);

export const action = async ({ request, params }: ActionFunctionArgs) => {
  if (request.method === "DELETE") {
    // handle delete
    return null;
  }

  const { receivedValues, errors, data } = await getValidatedFormData<Item>(request, resolver);
  // ...

  return null;
};

export default function Item() {
  const submit = useSubmit();

  const { formState, handleSubmit, watch, setValue, register, getValues } = useRemixForm<Item>({
    resolver,
    defaultValues: {
      title: "Hello",
    },
  });

  return (
    <Form method="post" action="." onSubmit={handleSubmit} className="space-y-4">
      <Input {...register("title")} placeholder="Title" />
      <Button type="button" variant="ghost" onClick={() => submit(null, { method: "DELETE", action: "." })}>
        Delete
      </Button>
      <Button type="submit">Create</Button>
    </Form>
  );
}