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