From a272db4239f770ebb66f86b8b3047d666ce78f6d Mon Sep 17 00:00:00 2001
From: Tsu-ba-me <ynho.li.aa.e@gmail.com>
Date: Mon, 19 Jun 2023 02:49:06 -0400
Subject: [PATCH] fix(striker-ui): add submit handler to form utils

---
 striker-ui/hooks/useFormUtils.ts | 35 ++++++++++++++++++++++++++++++--
 striker-ui/types/FormUtils.d.ts  | 13 ++++++++++++
 2 files changed, 46 insertions(+), 2 deletions(-)

diff --git a/striker-ui/hooks/useFormUtils.ts b/striker-ui/hooks/useFormUtils.ts
index f0ae1ea3..58d6e9bb 100644
--- a/striker-ui/hooks/useFormUtils.ts
+++ b/striker-ui/hooks/useFormUtils.ts
@@ -1,10 +1,13 @@
 import { MutableRefObject, useCallback, useMemo, useState } from 'react';
 
+import api from '../lib/api';
 import buildObjectStateSetterCallback, {
   buildRegExpObjectStateSetterCallback,
 } from '../lib/buildObjectStateSetterCallback';
+import handleAPIError from '../lib/handleAPIError';
 import { Message } from '../components/MessageBox';
 import { MessageGroupForwardedRefContent } from '../components/MessageGroup';
+import useProtectedState from './useProtectedState';
 
 const useFormUtils = <
   U extends string,
@@ -14,6 +17,7 @@ const useFormUtils = <
   ids: I,
   messageGroupRef: MutableRefObject<MessageGroupForwardedRefContent>,
 ): FormUtils<M> => {
+  const [formSubmitting, setFormSubmitting] = useProtectedState<boolean>(false);
   const [formValidity, setFormValidity] = useState<FormValidity<M>>({});
 
   const setMessage = useCallback(
@@ -80,7 +84,32 @@ const useFormUtils = <
     [unsetKey],
   );
 
-  const isFormInvalid = useMemo(
+  const submitForm = useCallback<SubmitFormFunction>(
+    ({ body, getErrorMsg, msgKey = 'api', method, successMsg, url }) => {
+      setFormSubmitting(true);
+
+      api
+        .request({ data: body, method, url })
+        .then(() => {
+          messageGroupRef?.current?.setMessage?.call(null, msgKey, {
+            children: successMsg,
+          });
+        })
+        .catch((apiError) => {
+          const emsg = handleAPIError(apiError);
+
+          emsg.children = getErrorMsg(emsg.children);
+
+          messageGroupRef?.current?.setMessage?.call(null, msgKey, emsg);
+        })
+        .finally(() => {
+          setFormSubmitting(false);
+        });
+    },
+    [messageGroupRef, setFormSubmitting],
+  );
+
+  const formInvalid = useMemo(
     () => Object.values(formValidity).some((isInputValid) => !isInputValid),
     [formValidity],
   );
@@ -90,12 +119,14 @@ const useFormUtils = <
     buildInputFirstRenderFunction,
     buildInputUnmountFunction,
     formValidity,
-    isFormInvalid,
+    isFormInvalid: formInvalid,
+    isFormSubmitting: formSubmitting,
     setFormValidity,
     setMessage,
     setMessageRe,
     setValidity,
     setValidityRe,
+    submitForm,
     unsetKey,
     unsetKeyRe,
   };
diff --git a/striker-ui/types/FormUtils.d.ts b/striker-ui/types/FormUtils.d.ts
index b65f506c..2341f3ab 100644
--- a/striker-ui/types/FormUtils.d.ts
+++ b/striker-ui/types/FormUtils.d.ts
@@ -20,12 +20,24 @@ type InputUnmountFunctionBuilder<M extends MapToInputTestID> = (
   key: keyof M,
 ) => InputUnmountFunction;
 
+type SubmitFormFunction = (args: {
+  body: Record<string, unknown>;
+  getErrorMsg: (
+    parentMsg: import('react').ReactNode,
+  ) => import('react').ReactNode;
+  msgKey?: string;
+  method: 'delete' | 'post' | 'put';
+  successMsg?: import('react').ReactNode;
+  url: string;
+}) => void;
+
 type FormUtils<M extends MapToInputTestID> = {
   buildFinishInputTestBatchFunction: InputTestBatchFinishCallbackBuilder<M>;
   buildInputFirstRenderFunction: InputFirstRenderFunctionBuilder<M>;
   buildInputUnmountFunction: InputUnmountFunctionBuilder<M>;
   formValidity: FormValidity<M>;
   isFormInvalid: boolean;
+  isFormSubmitting: boolean;
   setFormValidity: import('react').Dispatch<
     import('react').SetStateAction<FormValidity<M>>
   >;
@@ -39,6 +51,7 @@ type FormUtils<M extends MapToInputTestID> = {
   ) => void;
   setValidity: (key: keyof M, value?: boolean) => void;
   setValidityRe: (re: RegExp, value?: boolean) => void;
+  submitForm: SubmitFormFunction;
   unsetKey: (key: keyof M) => void;
   unsetKeyRe: (re: RegExp) => void;
 };