From f069b87dbf3500a4f9b9b887876ed2a3d0cbdcaa Mon Sep 17 00:00:00 2001
From: Marcio <marcio.eric.nicolau@gmail.com>
Date: Tue, 23 Dec 2025 17:20:07 -0300
Subject: [PATCH] Refactor scraping controls to simplify session handling.

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.
---
 src/App.js | 59 ++++++++++++++++++++++++++++++++++++++++--------------
 1 file changed, 44 insertions(+), 15 deletions(-)

diff --git a/src/App.js b/src/App.js
index cb46226..2e2aa26 100644
--- a/src/App.js
+++ b/src/App.js
@@ -228,32 +228,38 @@ const WebScraper = () => {
     }
   };
 
-  const startScraping = async () => {
-    if (!selectedSession) return;
-
+  const startScrapingById = async (sessionId, sessionName) => {
     try {
-      await fetch(`${API_BASE}/sessions/${selectedSession.sessionId}/scrap/start`, {
+      await fetch(`${API_BASE}/sessions/${sessionId}/scrap/start`, {
         method: 'POST'
       });
-      addLog(`Iniciando scraping da sessão: ${selectedSession.name}`, 'info');
+      addLog(`Iniciando scraping da sessão: ${sessionName}`, 'info');
     } catch (err) {
       addLog(`Erro ao iniciar: ${err.message}`, 'error');
     }
   };
 
-  const stopScraping = async () => {
-    if (!selectedSession) return;
-
+  const stopScrapingById = async (sessionId, sessionName) => {
     try {
-      await fetch(`${API_BASE}/sessions/${selectedSession.sessionId}/scrap/stop`, {
+      await fetch(`${API_BASE}/sessions/${sessionId}/scrap/stop`, {
         method: 'POST'
       });
-      addLog(`Parando sessão: ${selectedSession.name}`, 'warning');
+      addLog(`Parando sessão: ${sessionName}`, 'warning');
     } catch (err) {
       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 () => {
     if (!selectedSession || !newUrl) return;
 
@@ -335,6 +341,15 @@ const WebScraper = () => {
     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 (
     <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">
@@ -381,11 +396,25 @@ const WebScraper = () => {
                 >
                   <div className="flex justify-between items-center mb-2">
                     <span className="font-bold">{session.name}</span>
-                    {session.isRunning && (
-                      <span className="px-2 py-1 bg-green-500 text-xs rounded">
-                        Rodando
-                      </span>
-                    )}
+                    <div className="flex items-center gap-2">
+                      {session.isRunning && (
+                        <span className="px-2 py-1 bg-green-500 text-xs rounded">
+                          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 className="text-sm text-slate-300">
                     <div>Total: {formatNumber(session.queue?.total || 0)}</div>