Next JS toast actions messages

actions.js

export async function submitPost(post) {
  const { error } = await supabase
    .from("posts")
    .insert(post);

  if (error) {
    return error;
  }

  return 'Success !';
}

PostForm.jsx

"use client";

import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { Form } from "@/components/ui/form";
import { Button } from "@/components/ui/button";
import * as z from "zod";
import { useFormAction } from "@/lib/useFormAction";

export function PostForm() {
  const [action, isLoading] = useFormAction(submitPost);

  const formSchema = z.object({
    // ...your form schema
  });

  const form = useForm({
    resolver: zodResolver(formSchema),
    defaultValues: {
      // ...your form default values
    },
  });

  const onSubmit = (data) => {
    // ...additionnal logic
    action(data);
  };

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)}>
        {/* ... your form */}
        <Button type="submit">{isLoading ? "Loading..." : "Submit"}</Button>
      </form>
    </Form>
  );
}

useFormAction.jsx

"use client";

import { useEffect, useState } from "react";
import { useToast } from "@/components/ui/use-toast"; // From @shadcn/ui
import useTranslation from "next-translate/useTranslation";

export function useFormAction(action, defaultState = null) {
  const { t } = useTranslation("common");
  const [isLoading, setIsLoading] = useState(false);
  const [message, setMessage] = useState(defaultState);
  const { toast } = useToast();

  useEffect(() => {
    if (message) {
      if (typeof message === "string") {
        toast({
          title: t("Success"),
          description: message,
        });
      } else {
        toast({
          title: t("Error"),
          variant: "destructive",
          description: message.message,
          ...message,
        });
      }
    }
  }, [message]);

  async function actionWithLoading(...args) {
    setIsLoading(true);
    const res = await action(...args);
    setMessage(res);
    setIsLoading(false);
  }

  return [actionWithLoading, isLoading, message];
}