nicoeri/voyager-frontend
1
0
Fork 0
Code

Refactor scraping controls to simplify session handling.

Browse Source 
Replaces inline start/stop logic with reusable functions that accept session-specific parameters. Introduces `handleSessionAction` to unify start/stop actions for individual sessions, improving code clarity and reducing redundancy. Adds buttons in the UI to control each session dynamically based on its state.
This commit is contained in:
Márcio Eric 2025-12-23 17:20:07 -03:00
parent e40266b05b
commit f069b87dbf
1 changed files with 44 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
src/App.js
View File

@ -228,32 +228,38 @@ const WebScraper = () => {
} }
}; };
const startScraping = async () => { const startScrapingById = async (sessionId, sessionName) => {
if (!selectedSession) return;
try { try {
await fetch(`${API_BASE}/sessions/${selectedSession.sessionId}/scrap/start`, { await fetch(`${API_BASE}/sessions/${sessionId}/scrap/start`, {
method: 'POST' method: 'POST'
}); });
addLog(`Iniciando scraping da sessão: ${selectedSession.name}`, 'info'); addLog(`Iniciando scraping da sessão: ${sessionName}`, 'info');
} catch (err) { } catch (err) {
addLog(`Erro ao iniciar: ${err.message}`, 'error'); addLog(`Erro ao iniciar: ${err.message}`, 'error');
} }
}; };
const stopScraping = async () => { const stopScrapingById = async (sessionId, sessionName) => {
if (!selectedSession) return;
try { try {
await fetch(`${API_BASE}/sessions/${selectedSession.sessionId}/scrap/stop`, { await fetch(`${API_BASE}/sessions/${sessionId}/scrap/stop`, {
method: 'POST' method: 'POST'
}); });
addLog(`Parando sessão: ${selectedSession.name}`, 'warning'); addLog(`Parando sessão: ${sessionName}`, 'warning');
} catch (err) { } catch (err) {
addLog(`Erro ao parar: ${err.message}`, 'error'); addLog(`Erro ao parar: ${err.message}`, 'error');
} }
}; };
const startScraping = async () => {
if (!selectedSession) return;
await startScrapingById(selectedSession.sessionId, selectedSession.name);
};
const stopScraping = async () => {
if (!selectedSession) return;
await stopScrapingById(selectedSession.sessionId, selectedSession.name);
};
const addUrlToQueue = async () => { const addUrlToQueue = async () => {
if (!selectedSession || !newUrl) return; if (!selectedSession || !newUrl) return;
@ -335,6 +341,15 @@ const WebScraper = () => {
return total > 0 ? ((done / total) * 100).toFixed(1) : 0; return total > 0 ? ((done / total) * 100).toFixed(1) : 0;
}; };
const handleSessionAction = (e, session) => {
e.stopPropagation(); // Evita selecionar a sessão ao clicar no botão
if (session.isRunning) {
stopScrapingById(session.sessionId, session.name);
} else {
startScrapingById(session.sessionId, session.name);
}
};
return ( return (
<div className="min-h-screen bg-gradient-to-br from-slate-900 to-slate-800 text-white p-6"> <div className="min-h-screen bg-gradient-to-br from-slate-900 to-slate-800 text-white p-6">
<div className="max-w-7xl mx-auto"> <div className="max-w-7xl mx-auto">
@ -381,11 +396,25 @@ const WebScraper = () => {
> >
<div className="flex justify-between items-center mb-2"> <div className="flex justify-between items-center mb-2">
<span className="font-bold">{session.name}</span> <span className="font-bold">{session.name}</span>
{session.isRunning && ( <div className="flex items-center gap-2">
<span className="px-2 py-1 bg-green-500 text-xs rounded"> {session.isRunning && (
Rodando <span className="px-2 py-1 bg-green-500 text-xs rounded">
</span> Rodando
)} </span>
)}
<button
onClick={(e) => handleSessionAction(e, session)}
className={`flex items-center gap-1 px-2 py-1 rounded text-xs transition ${
session.isRunning
? 'bg-orange-600 hover:bg-orange-700'
: 'bg-blue-600 hover:bg-blue-700'
}`}
title={session.isRunning ? 'Parar (Graceful)' : 'Iniciar Scraping'}
>
{session.isRunning ? <Pause size={14} /> : <Play size={14} />}
{session.isRunning ? 'Parar' : 'Iniciar'}
</button>
</div>
</div> </div>
<div className="text-sm text-slate-300"> <div className="text-sm text-slate-300">
<div>Total: {formatNumber(session.queue?.total || 0)}</div> <div>Total: {formatNumber(session.queue?.total || 0)}</div>