fix(striker-ui): add submit handler to form utils

main
Tsu-ba-me 2 years ago
parent 446359bfe9
commit a272db4239
  1. 35
      striker-ui/hooks/useFormUtils.ts
  2. 13
      striker-ui/types/FormUtils.d.ts

@ -1,10 +1,13 @@
import { MutableRefObject, useCallback, useMemo, useState } from 'react'; import { MutableRefObject, useCallback, useMemo, useState } from 'react';
import api from '../lib/api';
import buildObjectStateSetterCallback, { import buildObjectStateSetterCallback, {
buildRegExpObjectStateSetterCallback, buildRegExpObjectStateSetterCallback,
} from '../lib/buildObjectStateSetterCallback'; } from '../lib/buildObjectStateSetterCallback';
import handleAPIError from '../lib/handleAPIError';
import { Message } from '../components/MessageBox'; import { Message } from '../components/MessageBox';
import { MessageGroupForwardedRefContent } from '../components/MessageGroup'; import { MessageGroupForwardedRefContent } from '../components/MessageGroup';
import useProtectedState from './useProtectedState';
const useFormUtils = < const useFormUtils = <
U extends string, U extends string,
@ -14,6 +17,7 @@ const useFormUtils = <
ids: I, ids: I,
messageGroupRef: MutableRefObject<MessageGroupForwardedRefContent>, messageGroupRef: MutableRefObject<MessageGroupForwardedRefContent>,
): FormUtils<M> => { ): FormUtils<M> => {
const [formSubmitting, setFormSubmitting] = useProtectedState<boolean>(false);
const [formValidity, setFormValidity] = useState<FormValidity<M>>({}); const [formValidity, setFormValidity] = useState<FormValidity<M>>({});
const setMessage = useCallback( const setMessage = useCallback(
@ -80,7 +84,32 @@ const useFormUtils = <
[unsetKey], [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), () => Object.values(formValidity).some((isInputValid) => !isInputValid),
[formValidity], [formValidity],
); );
@ -90,12 +119,14 @@ const useFormUtils = <
buildInputFirstRenderFunction, buildInputFirstRenderFunction,
buildInputUnmountFunction, buildInputUnmountFunction,
formValidity, formValidity,
isFormInvalid, isFormInvalid: formInvalid,
isFormSubmitting: formSubmitting,
setFormValidity, setFormValidity,
setMessage, setMessage,
setMessageRe, setMessageRe,
setValidity, setValidity,
setValidityRe, setValidityRe,
submitForm,
unsetKey, unsetKey,
unsetKeyRe, unsetKeyRe,
}; };

@ -20,12 +20,24 @@ type InputUnmountFunctionBuilder<M extends MapToInputTestID> = (
key: keyof M, key: keyof M,
) => InputUnmountFunction; ) => 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> = { type FormUtils<M extends MapToInputTestID> = {
buildFinishInputTestBatchFunction: InputTestBatchFinishCallbackBuilder<M>; buildFinishInputTestBatchFunction: InputTestBatchFinishCallbackBuilder<M>;
buildInputFirstRenderFunction: InputFirstRenderFunctionBuilder<M>; buildInputFirstRenderFunction: InputFirstRenderFunctionBuilder<M>;
buildInputUnmountFunction: InputUnmountFunctionBuilder<M>; buildInputUnmountFunction: InputUnmountFunctionBuilder<M>;
formValidity: FormValidity<M>; formValidity: FormValidity<M>;
isFormInvalid: boolean; isFormInvalid: boolean;
isFormSubmitting: boolean;
setFormValidity: import('react').Dispatch< setFormValidity: import('react').Dispatch<
import('react').SetStateAction<FormValidity<M>> import('react').SetStateAction<FormValidity<M>>
>; >;
@ -39,6 +51,7 @@ type FormUtils<M extends MapToInputTestID> = {
) => void; ) => void;
setValidity: (key: keyof M, value?: boolean) => void; setValidity: (key: keyof M, value?: boolean) => void;
setValidityRe: (re: RegExp, value?: boolean) => void; setValidityRe: (re: RegExp, value?: boolean) => void;
submitForm: SubmitFormFunction;
unsetKey: (key: keyof M) => void; unsetKey: (key: keyof M) => void;
unsetKeyRe: (re: RegExp) => void; unsetKeyRe: (re: RegExp) => void;
}; };

Loading…
Cancel
Save