Fixed portal modal infinite looping (#17945)

refs https://github.com/TryGhost/Product/issues/3349
https://ghost.slack.com/archives/C0568LN2CGJ/p1693556448443489

- fixes an issue that's caused an infinite loop in the Portal design modal and stressing the CPU.

---

<!-- Leave the line below if you'd like GitHub Copilot to generate a
summary from your commit -->
<!--
copilot:summary
-->
### <samp>🤖 Generated by Copilot at ac33e3e</samp>

Refactors error handling logic for signup options form fields in
`SignupOptions.tsx` using `useCallback` and `useEffect` hooks. This
enhances the code quality and efficiency.
This commit is contained in:
Ronald Langeveld 2023-09-04 09:58:28 +07:00 committed by GitHub
parent 5e3470a3a1
commit 967a17460d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -1,7 +1,7 @@
import CheckboxGroup from '../../../../admin-x-ds/global/form/CheckboxGroup';
import Form from '../../../../admin-x-ds/global/form/Form';
import HtmlField from '../../../../admin-x-ds/global/form/HtmlField';
import React, {useEffect, useMemo} from 'react';
import React, {useCallback, useEffect, useMemo} from 'react';
import Toggle from '../../../../admin-x-ds/global/form/Toggle';
import {CheckboxProps} from '../../../../admin-x-ds/global/form/Checkbox';
import {Setting, SettingValue, checkStripeEnabled, getSettingValues} from '../../../../api/settings';
@ -30,13 +30,18 @@ const SignupOptions: React.FC<{
return div.innerText.length;
}, [portalSignupTermsHtml]);
const handleError = useCallback((key: string, error: string | undefined) => {
setError(key, error);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
useEffect(() => {
if (signupTermsLength > signupTermsMaxLength) {
setError('portal_signup_terms_html', 'Signup notice is too long');
handleError('portal_signup_terms_html', 'Signup notice is too long');
} else {
setError('portal_signup_terms_html', undefined);
handleError('portal_signup_terms_html', undefined);
}
}, [signupTermsLength, setError]);
}, [signupTermsLength, handleError]);
const togglePlan = (plan: string) => {
const index = portalPlans.indexOf(plan);