mirror of
https://github.com/fosrl/pangolin.git
synced 2026-03-02 00:36:38 +00:00
fix: sync resource toggle states with context on initial load
- Replace defaultChecked with checked for controlled components - Add useEffect to sync rulesEnabled, ssoEnabled, whitelistEnabled when resource context hydrates after mount - Add nullish coalescing fallback to prevent undefined initial state
This commit is contained in:
@@ -187,7 +187,11 @@ export default function ResourceAuthenticationPage() {
|
|||||||
number | null
|
number | null
|
||||||
>(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>(
|
const [selectedIdpId, setSelectedIdpId] = useState<number | null>(
|
||||||
resource.skipToIdpId || null
|
resource.skipToIdpId || null
|
||||||
@@ -472,7 +476,7 @@ export default function ResourceAuthenticationPage() {
|
|||||||
<SwitchInput
|
<SwitchInput
|
||||||
id="sso-toggle"
|
id="sso-toggle"
|
||||||
label={t("ssoUse")}
|
label={t("ssoUse")}
|
||||||
defaultChecked={resource.sso}
|
checked={ssoEnabled}
|
||||||
onCheckedChange={(val) => setSsoEnabled(val)}
|
onCheckedChange={(val) => setSsoEnabled(val)}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
@@ -800,8 +804,13 @@ function OneTimePasswordFormSection({
|
|||||||
}: OneTimePasswordFormSectionProps) {
|
}: OneTimePasswordFormSectionProps) {
|
||||||
const { env } = useEnvContext();
|
const { env } = useEnvContext();
|
||||||
const [whitelistEnabled, setWhitelistEnabled] = useState(
|
const [whitelistEnabled, setWhitelistEnabled] = useState(
|
||||||
resource.emailWhitelistEnabled
|
resource.emailWhitelistEnabled ?? false
|
||||||
);
|
);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setWhitelistEnabled(resource.emailWhitelistEnabled);
|
||||||
|
}, [resource.emailWhitelistEnabled]);
|
||||||
|
|
||||||
const queryClient = useQueryClient();
|
const queryClient = useQueryClient();
|
||||||
|
|
||||||
const [loadingSaveWhitelist, startTransition] = useTransition();
|
const [loadingSaveWhitelist, startTransition] = useTransition();
|
||||||
@@ -894,7 +903,7 @@ function OneTimePasswordFormSection({
|
|||||||
<SwitchInput
|
<SwitchInput
|
||||||
id="whitelist-toggle"
|
id="whitelist-toggle"
|
||||||
label={t("otpEmailWhitelist")}
|
label={t("otpEmailWhitelist")}
|
||||||
defaultChecked={resource.emailWhitelistEnabled}
|
checked={whitelistEnabled}
|
||||||
onCheckedChange={setWhitelistEnabled}
|
onCheckedChange={setWhitelistEnabled}
|
||||||
disabled={!env.email.emailEnabled}
|
disabled={!env.email.emailEnabled}
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -113,7 +113,12 @@ export default function ResourceRules(props: {
|
|||||||
const [rulesToRemove, setRulesToRemove] = useState<number[]>([]);
|
const [rulesToRemove, setRulesToRemove] = useState<number[]>([]);
|
||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
const [pageLoading, setPageLoading] = useState(true);
|
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 [openCountrySelect, setOpenCountrySelect] = useState(false);
|
||||||
const [countrySelectValue, setCountrySelectValue] = useState("");
|
const [countrySelectValue, setCountrySelectValue] = useState("");
|
||||||
const [openAddRuleCountrySelect, setOpenAddRuleCountrySelect] =
|
const [openAddRuleCountrySelect, setOpenAddRuleCountrySelect] =
|
||||||
@@ -836,7 +841,7 @@ export default function ResourceRules(props: {
|
|||||||
<SwitchInput
|
<SwitchInput
|
||||||
id="rules-toggle"
|
id="rules-toggle"
|
||||||
label={t("rulesEnable")}
|
label={t("rulesEnable")}
|
||||||
defaultChecked={rulesEnabled}
|
checked={rulesEnabled}
|
||||||
onCheckedChange={(val) => setRulesEnabled(val)}
|
onCheckedChange={(val) => setRulesEnabled(val)}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user