fix(settings): preserve WhatsApp credential drafts on tab refocus

The WhatsApp settings load effect re-ran fetchConfig() whenever `user`
or `profileLoading` changed. Supabase's onAuthStateChange fires a token
refresh (new `user` object, profileLoading toggles) when the browser
tab regains focus, so returning to the tab re-hydrated the form and
overwrote any unsaved credential input.

Guard the effect with a ref tracking the account id already loaded, so
it only fetches once per account and ignores auth-state churn that
doesn't actually change the account. Explicit reloads after save,
registration verification, and reset still call fetchConfig directly.

Closes #307

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Arnas Donauskas 2026-07-01 11:16:54 +03:00
parent 65b677181e
commit 7baeb94003

View File

@ -1,6 +1,6 @@
'use client'; 'use client';
import { useEffect, useState, useCallback } from 'react'; import { useEffect, useRef, useState, useCallback } from 'react';
import { toast } from 'sonner'; import { toast } from 'sonner';
import { import {
Eye, Eye,
@ -53,6 +53,13 @@ export function WhatsAppConfig() {
const [connectionStatus, setConnectionStatus] = useState<ConnectionStatus>('unknown'); const [connectionStatus, setConnectionStatus] = useState<ConnectionStatus>('unknown');
const [resetReason, setResetReason] = useState<ResetReason>(null); const [resetReason, setResetReason] = useState<ResetReason>(null);
const [statusMessage, setStatusMessage] = useState<string>(''); const [statusMessage, setStatusMessage] = useState<string>('');
// Guards against re-hydrating the form when the load effect below
// re-runs for reasons unrelated to actually switching accounts —
// e.g. Supabase's onAuthStateChange fires a token refresh (new
// `user` object, profileLoading flips true/false) when the browser
// tab regains focus. Without this, that churn calls fetchConfig()
// again and overwrites whatever the user typed but hadn't saved yet.
const loadedAccountIdRef = useRef<string | null>(null);
const [phoneNumberId, setPhoneNumberId] = useState(''); const [phoneNumberId, setPhoneNumberId] = useState('');
const [wabaId, setWabaId] = useState(''); const [wabaId, setWabaId] = useState('');
@ -164,9 +171,12 @@ export function WhatsAppConfig() {
// once the profile arrives. // once the profile arrives.
if (authLoading || profileLoading) return; if (authLoading || profileLoading) return;
if (!user || !accountId) { if (!user || !accountId) {
loadedAccountIdRef.current = null;
setLoading(false); setLoading(false);
return; return;
} }
if (loadedAccountIdRef.current === accountId) return;
loadedAccountIdRef.current = accountId;
fetchConfig(accountId); fetchConfig(accountId);
}, [authLoading, profileLoading, user, accountId, fetchConfig]); }, [authLoading, profileLoading, user, accountId, fetchConfig]);