sign error with fetcher

src/pages/Registration/SigningResult/ErrorPage.tsx

@@ -1,37 +1,15 @@
 import Icon from "components/Icon";
 import { appRoutes } from "constants/routes";
 import { regRoutes } from "constants/routes";
-import { useErrorContext } from "contexts/ErrorContext";
-import { useState } from "react";
-import { Link } from "react-router-dom";
-import { useFiscalSponsorshipAgreementSigningURLMutation } from "services/aws/registration";
+import { Link, useFetcher } from "react-router-dom";
 import type { ErrorQueryParams } from "./types";
 
-const initialText = "Retry";
-const redirectingText = "Redirecting...";
-
 export default function ErrorPage(props: ErrorQueryParams) {
-  const { handleError } = useErrorContext();
-  const [generateSigningURL] =
-    useFiscalSponsorshipAgreementSigningURLMutation();
-
-  //use standalone state, as mutation state ends before redirect
-  const [submitText, setSubmitText] = useState(initialText);
-
-  async function proceed(signerEID: string) {
-    try {
-      setSubmitText(redirectingText);
-      const { url } = await generateSigningURL(signerEID).unwrap();
-      window.location.href = url;
-    } catch (err) {
-      setSubmitText(initialText);
-      handleError(err, { context: "generating signing url" });
-    }
-  }
+  const fetcher = useFetcher();
 
-  const isRedirecting = submitText === redirectingText;
+  const isRedirecting = fetcher.state === "submitting";
   return (
-    <>
+    <fetcher.Form action="." method="post">
       <div className="bg-red rounded-full aspect-square grid place-items-center mb-4">
         <Icon type="Exclamation" size={30} className="text-white m-5" />
       </div>
@@ -40,12 +18,13 @@ export default function ErrorPage(props: ErrorQueryParams) {
         {props.error}: {props.message}
       </p>
       <button
-        type="button"
+        name="signer_eid"
+        value={props.signerEid}
+        type="submit"
         disabled={isRedirecting}
         className="w-full max-w-[26.25rem] btn-blue btn-reg mt-6"
-        onClick={() => proceed(props.signerEid)}
       >
-        {submitText}
+        Retry
       </button>
       <Link
         className="w-full max-w-[26.25rem] btn-outline-filled btn-reg mt-4"
@@ -54,6 +33,6 @@ export default function ErrorPage(props: ErrorQueryParams) {
       >
         Back
       </Link>
-    </>
+    </fetcher.Form>
   );
 }

src/pages/Registration/Steps/FSAInquiry/useSubmit.ts

@@ -1,7 +1,6 @@
-import { useErrorContext } from "contexts/ErrorContext";
+import type { Update } from "@better-giving/registration/update";
 import type { SubmitHandler, UseFormReturn } from "react-hook-form";
-import { useNavigate } from "react-router-dom";
-import { useUpdateRegMutation } from "services/aws/registration";
+import { useFetcher, useNavigate } from "react-router-dom";
 import { steps } from "../../routes";
 import type { Step3Data } from "../../types";
 import type { FV } from "./types";
@@ -13,32 +12,30 @@ export default function useSubmit(
 ) {
   const {
     handleSubmit,
-    formState: { isDirty, isSubmitting },
+    formState: { isDirty },
   } = form;
 
-  const [updateReg] = useUpdateRegMutation();
-  const { handleError } = useErrorContext();
+  const fetcher = useFetcher();
+
   const navigate = useNavigate();
 
   const submit: SubmitHandler<FV> = async (fv) => {
     if (!isDirty && data.irs501c3 !== undefined && possiblyTaxExempt) {
       return navigate(`../${steps.docs}`);
     }
-    const result = await updateReg({
-      id: data.init.id,
+    const update: Update = {
       type: "fsa-inq",
       irs501c3: possiblyTaxExempt && fv.irs501c3 === "yes",
+    };
+    fetcher.submit(update, {
+      encType: "application/json",
+      action: ".",
+      method: "patch",
     });
-
-    if ("error" in result) {
-      return handleError(result.error, { context: "updating registration" });
-    }
-
-    navigate(`../${steps.docs}`);
   };
 
   return {
     submit: handleSubmit(submit),
-    isSubmitting,
+    isSubmitting: fetcher.state !== "idle",
   };
 }

src/pages/Registration/Steps/fsa-action.ts

@@ -9,13 +9,21 @@ export const fsaAction: ActionFunction = async ({ request, params }) => {
   const auth = await loadAuth();
   if (!auth) return redirectToAuth(request);
 
-  const data: FsaPayload["signer"] = await request.json();
+  const signer = await (async (r) => {
+    const r1 = r.clone();
+    const form = await r1.formData();
+    const signer_eid = form.get("signer_eid")?.toString();
+    return (
+      signer_eid ||
+      ((await request.json()) as Exclude<FsaPayload["signer"], string>)
+    );
+  })(request);
 
   const from = new URL(request.url);
   from.pathname = `register/${params.regId}/${regRoutes.sign_result}`;
   from.search = "";
   const payload: FsaPayload = {
-    signer: data,
+    signer,
     redirectUrl: from.toString(),
   };
 

src/pages/Registration/index.tsx

@@ -11,6 +11,7 @@ import {
 } from "react-router-dom";
 import SigningResult from "./SigningResult";
 import { route as stepsRoute } from "./Steps";
+import { fsaAction } from "./Steps/fsa-action";
 import { regLoader } from "./data/step-loader";
 
 function Layout() {
@@ -51,7 +52,11 @@ export const route: RouteObject = {
       loader: regLoader,
       children: [
         stepsRoute,
-        { path: regRoutes.sign_result, element: <SigningResult /> },
+        {
+          path: regRoutes.sign_result,
+          element: <SigningResult />,
+          action: fsaAction,
+        },
       ],
     },
   ],

src/services/aws/aws.ts

@@ -30,7 +30,6 @@ export const aws = createApi({
     "application",
     "banking-applications",
     "banking-application",
-    "registration",
     "endow-admins",
     "donations",
     "user",