Merge pull request #2537 from Abhinav-kodes/fix/toggle-hydration-sync

fix: sync resource toggle states with context on initial load

src/app/[orgId]/settings/resources/proxy/[niceId]/authentication/page.tsx

@@ -187,7 +187,11 @@ export default function ResourceAuthenticationPage() {
         number | null
     >(null);
 
-    const [ssoEnabled, setSsoEnabled] = useState(resource.sso);
+    const [ssoEnabled, setSsoEnabled] = useState(resource.sso ?? false);
+
+    useEffect(() => {
+        setSsoEnabled(resource.sso ?? false);
+    }, [resource.sso]);
 
     const [selectedIdpId, setSelectedIdpId] = useState<number | null>(
         resource.skipToIdpId || null
@@ -472,7 +476,7 @@ export default function ResourceAuthenticationPage() {
                             <SwitchInput
                                 id="sso-toggle"
                                 label={t("ssoUse")}
-                                defaultChecked={resource.sso}
+                                checked={ssoEnabled}
                                 onCheckedChange={(val) => setSsoEnabled(val)}
                             />
 
@@ -800,8 +804,13 @@ function OneTimePasswordFormSection({
 }: OneTimePasswordFormSectionProps) {
     const { env } = useEnvContext();
     const [whitelistEnabled, setWhitelistEnabled] = useState(
-        resource.emailWhitelistEnabled
+        resource.emailWhitelistEnabled ?? false
     );
+
+    useEffect(() => {
+        setWhitelistEnabled(resource.emailWhitelistEnabled);
+    }, [resource.emailWhitelistEnabled]);
+
     const queryClient = useQueryClient();
 
     const [loadingSaveWhitelist, startTransition] = useTransition();
@@ -894,7 +903,7 @@ function OneTimePasswordFormSection({
                     <SwitchInput
                         id="whitelist-toggle"
                         label={t("otpEmailWhitelist")}
-                        defaultChecked={resource.emailWhitelistEnabled}
+                        checked={whitelistEnabled}
                         onCheckedChange={setWhitelistEnabled}
                         disabled={!env.email.emailEnabled}
                     />

src/app/[orgId]/settings/resources/proxy/[niceId]/rules/page.tsx

@@ -113,7 +113,12 @@ export default function ResourceRules(props: {
     const [rulesToRemove, setRulesToRemove] = useState<number[]>([]);
     const [loading, setLoading] = useState(false);
     const [pageLoading, setPageLoading] = useState(true);
-    const [rulesEnabled, setRulesEnabled] = useState(resource.applyRules);
+    const [rulesEnabled, setRulesEnabled] = useState(resource.applyRules ?? false);
+
+    useEffect(() => {
+        setRulesEnabled(resource.applyRules);
+    }, [resource.applyRules]);
+
     const [openCountrySelect, setOpenCountrySelect] = useState(false);
     const [countrySelectValue, setCountrySelectValue] = useState("");
     const [openAddRuleCountrySelect, setOpenAddRuleCountrySelect] =
@@ -836,7 +841,7 @@ export default function ResourceRules(props: {
                             <SwitchInput
                                 id="rules-toggle"
                                 label={t("rulesEnable")}
-                                defaultChecked={rulesEnabled}
+                                checked={rulesEnabled}
                                 onCheckedChange={(val) => setRulesEnabled(val)}
                             />
                         </div>