fix: only show WhatsApp QR after user clicks Connect

- Don't auto-poll WAHA on settings page load
- Check connection status once on mount (to show 'Connected' if already paired)
- QR screenshot + polling only starts after clicking 'Connect WhatsApp'
- Polling stops once status changes to CONNECTED
This commit is contained in:
2026-03-03 05:47:20 +08:00
parent 4f23f28873
commit 5f111d1808

View File

@@ -144,6 +144,7 @@ function WhatsAppPanel() {
const [phone, setPhone] = useState<string>("")
const [pushName, setPushName] = useState<string>("")
const [starting, setStarting] = useState(false)
const [showQr, setShowQr] = useState(false) // only true after user clicks Connect
const checkStatus = useCallback(async () => {
try {
@@ -153,23 +154,28 @@ function WhatsAppPanel() {
if (data.screenshot) setQrImage(data.screenshot)
if (data.phone) setPhone(data.phone)
if (data.pushName) setPushName(data.pushName)
// Auto-show QR panel once connected (user paired successfully)
if (data.status === "CONNECTED") setShowQr(false)
} catch {
setStatus("ERROR")
}
}, [])
// On mount: just check if already connected. Don't start polling yet.
useEffect(() => { checkStatus() }, [checkStatus])
// Poll only when user has clicked Connect and we're waiting for scan
useEffect(() => {
checkStatus()
// Poll every 5 seconds when waiting for QR scan
if (!showQr) return
const interval = setInterval(checkStatus, 5000)
return () => clearInterval(interval)
}, [checkStatus])
}, [showQr, checkStatus])
const startSession = async () => {
setStarting(true)
setShowQr(true)
try {
await fetch("/api/whatsapp/qr", { method: "POST" })
// Wait a bit for session to initialize
await new Promise(r => setTimeout(r, 3000))
await checkStatus()
} catch { /* ignore */ }
@@ -217,7 +223,7 @@ function WhatsAppPanel() {
)
}
if (status === "SCAN_QR_CODE") {
if (status === "SCAN_QR_CODE" && showQr) {
return (
<Card className="border-warm-amber/30">
<CardHeader className="pb-3">