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