sidney
/
microtecflix
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update WhatsappConnectCard to automatically load status on mount and show a reset button in all connection states
Build and Deploy (Gitea) / build-and-deploy (push) Successful in 1m4s Details

This commit is contained in:
Sidney Gomes 2026-07-23 22:53:53 -03:00
parent a4f42a31ec
commit 13ee2d5569
1 changed files with 32 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/components/WhatsappConnectCard.tsx
View File

@ -37,6 +37,10 @@ export const WhatsappConnectCard: React.FC<WhatsappConnectCardProps> = ({ token
} }
}; };
useEffect(() => {
fetchStatus();
}, [token]);
const handleLogout = async () => { const handleLogout = async () => {
if (!token) return; if (!token) return;
setLoading(true); setLoading(true);
@ -106,23 +110,39 @@ export const WhatsappConnectCard: React.FC<WhatsappConnectCardProps> = ({ token
<p className="text-xs text-zinc-400 text-center max-w-xs"> <p className="text-xs text-zinc-400 text-center max-w-xs">
Abra o WhatsApp no seu celular, vá em "Aparelhos Conectados" e escaneie o código acima. Abra o WhatsApp no seu celular, vá em "Aparelhos Conectados" e escaneie o código acima.
</p> </p>
<button <div className="flex items-center space-x-4 mt-2">
onClick={fetchStatus} <button
className="text-xs text-green-400 hover:text-green-300 transition-colors mt-2 cursor-pointer" onClick={fetchStatus}
> className="text-xs text-green-400 hover:text-green-300 transition-colors cursor-pointer font-bold"
Já escaneei (Atualizar) >
</button> Já escaneei (Atualizar)
</button>
<button
onClick={handleLogout}
className="text-xs text-red-400 hover:text-red-300 transition-colors cursor-pointer font-bold"
>
Resetar Conexão
</button>
</div>
</div> </div>
) : ( ) : (
<div className="flex flex-col items-center space-y-4"> <div className="flex flex-col items-center space-y-4">
<QrCode className="w-12 h-12 text-zinc-600" /> <QrCode className="w-12 h-12 text-zinc-600" />
<p className="text-xs text-zinc-400">Nenhuma instância conectada.</p> <p className="text-xs text-zinc-400">Nenhuma instância conectada.</p>
<button <div className="flex items-center space-x-3">
onClick={fetchStatus} <button
className="bg-green-600 hover:bg-green-500 text-white text-xs font-bold px-4 py-2 rounded-lg transition-colors cursor-pointer" onClick={fetchStatus}
> className="bg-green-600 hover:bg-green-500 text-white text-xs font-bold px-4 py-2 rounded-lg transition-colors cursor-pointer"
Gerar QR Code de Conexão >
</button> Gerar QR Code de Conexão
</button>
<button
onClick={handleLogout}
className="bg-red-500/10 hover:bg-red-500/20 text-red-500 text-xs font-bold px-4 py-2 rounded-lg transition-colors cursor-pointer"
>
Forçar Exclusão / Resetar
</button>
</div>
</div> </div>
)} )}
</div> </div>