Simplify form mutations

Author: Rikthepixel

src/components/controls/Button.tsx

@@ -39,7 +39,7 @@ const Button = forwardRef(({ className, color, loading, children, disabled, ...p
   return (
     <button ref={ref} className={computedClassName} disabled={loading || disabled} {...props}>
       {!loading && children}
-      <AnimatePresence mode="wait">
+      <AnimatePresence>
         {loading && <motion.span
           key="placeholder"
           className="invisible"

src/components/pages/contribute/FeedbackSection.tsx

@@ -12,6 +12,7 @@ import TextArea from "@/components/controls/TextArea";
 import Form from "@/components/controls/Form";
 import Heading from "@/components/layout/Heading";
 import Label from "@/components/controls/Label";
+import useFormMutation from "@/hooks/useMutation";
 
 const feedbackSchema = z.object({
   text: z.string().min(1, "Your feedback message must at least contain 1 character")
@@ -27,21 +28,12 @@ const FeedbackSection = () => {
     mode: "onChange"
   });
 
-  const [response, setResponse] = useState<null | BackendResponse>(null);
-  const [loading, setLoading] = useState(false);
-
-  const loadingRef = useRef(loading);
-  loadingRef.current = loading;
-
-  const submit = useMemo(() => handleSubmit(({ text }) => {
-    if (loadingRef.current) return;
-    setLoading(true);
-
+  const [submit, response, loading] = useFormMutation<BackendResponse, FeedbackSchema>(handleSubmit, (setResponse, { text }) => {
     backend.url("/feedback")
       .post({ text })
       .json((res: BackendResponse) => setResponse(res));
-  }), [handleSubmit]);
-
+  });
+  
   return (
     <section
       aria-labelledby="feedback"

src/components/pages/front/SignupSection.tsx

@@ -13,6 +13,7 @@ import Form from "@/components/controls/Form";
 import Heading from "@/components/layout/Heading";
 
 import { backend } from "@/utils/wretch";
+import useFormMutation from "@/hooks/useMutation";
 
 const signupSchema = z.object({
   email: z.string().email().min(5, "Your email must at least contain 5 characters")
@@ -27,20 +28,11 @@ const SignupSection = () => {
     mode: "onChange"
   });
 
-  const [response, setResponse] = useState<null | BackendResponse>(null);
-  const [loading, setLoading] = useState(false);
-
-  const loadingRef = useRef(loading);
-  loadingRef.current = loading;
-
-  const submit = useMemo(() => handleSubmit(({ email }) => {
-    if (loadingRef.current) return;
-    setLoading(true);
-
+  const [submit, response, loading] = useFormMutation<BackendResponse, SignupSchema>(handleSubmit, (setResponse, { email }) => {
     backend.url("/email/subscribe")
       .post({ email })
       .json((res: BackendResponse) => setResponse(res));
-  }), [handleSubmit]);
+  });
 
   return (
     <section

src/hooks/useMutation.ts

@@ -0,0 +1,39 @@
+import { Dispatch, SetStateAction, useCallback, useMemo, useRef, useState } from "react";
+import { UseFormHandleSubmit, FieldValues } from "react-hook-form";
+
+export type MutationHandler<TResponse> = Dispatch<SetStateAction<TResponse | null>>;
+
+const useFormMutation = <TResponse extends {}, TFieldValues extends FieldValues = FieldValues, THandleSubmit extends UseFormHandleSubmit<TFieldValues> = UseFormHandleSubmit<TFieldValues>>(
+  handleSubmit: THandleSubmit,
+  handler: (setResponse: MutationHandler<TResponse>, data: TFieldValues, event?: React.BaseSyntheticEvent) => unknown | Promise<unknown>
+) => {
+
+  const [response, setResponse] = useState<null | TResponse>(null);
+  const [loading, setLoading] = useState(false);
+
+  const handlerRef = useRef(handler);
+  handlerRef.current = handler;
+
+  const handleSubmitRef = useRef<THandleSubmit>(handleSubmit);
+  handleSubmitRef.current = handleSubmit;
+
+  const loadingRef = useRef(loading);
+  loadingRef.current = loading;
+
+  const mutate = useMemo(() => handleSubmitRef.current(async (...vals) => {
+    if (loadingRef.current) return;
+    setLoading(true);
+
+    await handlerRef.current(
+      (...setterValues) => {
+        setResponse(...setterValues);
+        setLoading(false);
+      },
+      ...vals
+    );
+  }), []);
+
+  return [mutate, response, loading] as const;
+};
+
+export default useFormMutation;

src/pages/mail/unsubscribe.tsx

@@ -4,7 +4,6 @@ import { z } from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useForm } from "react-hook-form";
 import ArrowPathIcon from "@heroicons/react/24/solid/ArrowPathIcon";
-import { AnimatePresence, motion } from "framer-motion";
 
 import Button from "@/components/controls/Button";
 import { Page } from "@/types/page";
@@ -15,7 +14,6 @@ import Form from "@/components/controls/Form";
 import Heading from "@/components/layout/Heading";
 import { makeOgMeta } from "@/utils/meta/opengraph";
 import { makeSitemapMeta } from "@/utils/meta/sitemap";
-import Label from "@/components/controls/Label";
 
 const unsubscribeSchema = z.object({
   email: z.string().email().min(3)