HOC для рефакторинга
Как зарефакторить в HOC reCaptcha правильно? Есть несколько компонентов с относительно одинаковым кодом:
...
let LoginForm = ({
disableCaptcha,
recaptchaRef,
}) => {
const onChange = (recaptchaValue) => {
handleLogin(recaptchaValue);
};
const [isBtnDisabled, setIsBtnDisabled] = useState(recaptchaSiteKey && !disableCaptcha);
const asyncScriptOnLoad = () => {
setIsBtnDisabled(false);
};
...
{recaptchaSiteKey && !disableCaptcha && (
<Recaptcha
ref={recaptchaRef}
sitekey={recaptchaSiteKey}
onChange={onChange}
size="invisible"
asyncScriptOnLoad={asyncScriptOnLoad}
/>
)}
<Col xs="12" className="login-submit-btn">
<ButtonSubmitComponent messageType="login" disabled={isBtnDisabled} />
</Col>
...
у другого компонента отличается строки:
const onChange = (recaptchaValue) => {
handleResetPassword(recaptchaValue);
};
...
const [isBtnDisabled, setIsBtnDisabled] = useState(!!disableCaptcha);
...
{ recaptchaSiteKey && (
<Recaptcha...
остановился на этом этапе...
const ReCaptchaContainer = ({
recaptchaRef,
recaptchaValue,
}) => {
const [isBtnDisabled, setIsBtnDisabled] = useState(recaptchaValue);
const onChange = useCallback((handleValue) => {
handleValue(recaptchaValue);
return () => { setIsBtnDisabled(isBtnDisabled); };
}, [recaptchaValue]);
const asyncScriptOnLoad = () => {
setIsBtnDisabled(false);
};
return (
<Recaptcha
ref={recaptchaRef}
sitekey={recaptchaValue}
onChange={onChange}
size="invisible"
asyncScriptOnLoad={asyncScriptOnLoad}
/>
);
};
ReCaptchaContainer.propTypes = {
recaptchaRef: PropTypes.func.isRequired,
recaptchaValue: PropTypes.func.isRequired,
};
export default ReCaptchaContainer;
}
(react-google-recaptcha-v2)