From 967a17460dc9b23c8168fc4f9eddadaad4217334 Mon Sep 17 00:00:00 2001
From: Ronald Langeveld <hi@ronaldlangeveld.com>
Date: Mon, 4 Sep 2023 09:58:28 +0700
Subject: [PATCH] Fixed portal modal infinite looping (#17945)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 .../settings/membership/portal/SignupOptions.tsx    | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/apps/admin-x-settings/src/components/settings/membership/portal/SignupOptions.tsx b/apps/admin-x-settings/src/components/settings/membership/portal/SignupOptions.tsx
index ca891fc0b4..a3a9a4698d 100644
--- a/apps/admin-x-settings/src/components/settings/membership/portal/SignupOptions.tsx
+++ b/apps/admin-x-settings/src/components/settings/membership/portal/SignupOptions.tsx
@@ -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);