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 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,
};

@ -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;
};

Loading…
Cancel
Save