First Commit
This commit is contained in:
parent
a33bc13327
commit
e40266b05b
117
package-lock.json
generated
117
package-lock.json
generated
@ -8,14 +8,21 @@
|
|||||||
"name": "web-scrapper-pro-client",
|
"name": "web-scrapper-pro-client",
|
||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@microsoft/signalr": "^10.0.0",
|
||||||
"@testing-library/dom": "^10.4.1",
|
"@testing-library/dom": "^10.4.1",
|
||||||
"@testing-library/jest-dom": "^6.9.1",
|
"@testing-library/jest-dom": "^6.9.1",
|
||||||
"@testing-library/react": "^16.3.1",
|
"@testing-library/react": "^16.3.1",
|
||||||
"@testing-library/user-event": "^13.5.0",
|
"@testing-library/user-event": "^13.5.0",
|
||||||
|
"lucide-react": "^0.562.0",
|
||||||
"react": "^19.2.3",
|
"react": "^19.2.3",
|
||||||
"react-dom": "^19.2.3",
|
"react-dom": "^19.2.3",
|
||||||
"react-scripts": "5.0.1",
|
"react-scripts": "5.0.1",
|
||||||
"web-vitals": "^2.1.4"
|
"web-vitals": "^2.1.4"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"autoprefixer": "^10.4.23",
|
||||||
|
"postcss": "^8.5.6",
|
||||||
|
"tailwindcss": "^3.4.19"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@adobe/css-tools": {
|
"node_modules/@adobe/css-tools": {
|
||||||
@ -2858,6 +2865,19 @@
|
|||||||
"integrity": "sha512-Vo+PSpZG2/fmgmiNzYK9qWRh8h/CHrwD0mo1h1DzL4yzHNSfWYujGTYsWGreD000gcgmZ7K4Ys6Tx9TxtsKdDw==",
|
"integrity": "sha512-Vo+PSpZG2/fmgmiNzYK9qWRh8h/CHrwD0mo1h1DzL4yzHNSfWYujGTYsWGreD000gcgmZ7K4Ys6Tx9TxtsKdDw==",
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
|
"node_modules/@microsoft/signalr": {
|
||||||
|
"version": "10.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/@microsoft/signalr/-/signalr-10.0.0.tgz",
|
||||||
|
"integrity": "sha512-0BRqz/uCx3JdrOqiqgFhih/+hfTERaUfCZXFB52uMaZJrKaPRzHzMuqVsJC/V3pt7NozcNXGspjKiQEK+X7P2w==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"abort-controller": "^3.0.0",
|
||||||
|
"eventsource": "^2.0.2",
|
||||||
|
"fetch-cookie": "^2.0.3",
|
||||||
|
"node-fetch": "^2.6.7",
|
||||||
|
"ws": "^7.5.10"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@nicolo-ribaudo/eslint-scope-5-internals": {
|
"node_modules/@nicolo-ribaudo/eslint-scope-5-internals": {
|
||||||
"version": "5.1.1-v1",
|
"version": "5.1.1-v1",
|
||||||
"resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz",
|
"resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz",
|
||||||
@ -4206,6 +4226,18 @@
|
|||||||
"deprecated": "Use your platform's native atob() and btoa() methods instead",
|
"deprecated": "Use your platform's native atob() and btoa() methods instead",
|
||||||
"license": "BSD-3-Clause"
|
"license": "BSD-3-Clause"
|
||||||
},
|
},
|
||||||
|
"node_modules/abort-controller": {
|
||||||
|
"version": "3.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz",
|
||||||
|
"integrity": "sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"event-target-shim": "^5.0.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=6.5"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/accepts": {
|
"node_modules/accepts": {
|
||||||
"version": "1.3.8",
|
"version": "1.3.8",
|
||||||
"resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
|
"resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
|
||||||
@ -7676,6 +7708,15 @@
|
|||||||
"node": ">= 0.6"
|
"node": ">= 0.6"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/event-target-shim": {
|
||||||
|
"version": "5.0.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/event-target-shim/-/event-target-shim-5.0.1.tgz",
|
||||||
|
"integrity": "sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==",
|
||||||
|
"license": "MIT",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=6"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/eventemitter3": {
|
"node_modules/eventemitter3": {
|
||||||
"version": "4.0.7",
|
"version": "4.0.7",
|
||||||
"resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
|
"resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
|
||||||
@ -7691,6 +7732,15 @@
|
|||||||
"node": ">=0.8.x"
|
"node": ">=0.8.x"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/eventsource": {
|
||||||
|
"version": "2.0.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/eventsource/-/eventsource-2.0.2.tgz",
|
||||||
|
"integrity": "sha512-IzUmBGPR3+oUG9dUeXynyNmf91/3zUSJg1lCktzKw47OXuhco54U3r9B7O4XX+Rb1Itm9OZ2b0RkTs10bICOxA==",
|
||||||
|
"license": "MIT",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=12.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/execa": {
|
"node_modules/execa": {
|
||||||
"version": "5.1.1",
|
"version": "5.1.1",
|
||||||
"resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
|
"resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
|
||||||
@ -7890,6 +7940,16 @@
|
|||||||
"bser": "2.1.1"
|
"bser": "2.1.1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/fetch-cookie": {
|
||||||
|
"version": "2.2.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/fetch-cookie/-/fetch-cookie-2.2.0.tgz",
|
||||||
|
"integrity": "sha512-h9AgfjURuCgA2+2ISl8GbavpUdR+WGAM2McW/ovn4tVccegp8ZqCKWSBR8uRdM8dDNlx5WdKRWxBYUwteLDCNQ==",
|
||||||
|
"license": "Unlicense",
|
||||||
|
"dependencies": {
|
||||||
|
"set-cookie-parser": "^2.4.8",
|
||||||
|
"tough-cookie": "^4.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/file-entry-cache": {
|
"node_modules/file-entry-cache": {
|
||||||
"version": "6.0.1",
|
"version": "6.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
|
||||||
@ -11095,6 +11155,15 @@
|
|||||||
"yallist": "^3.0.2"
|
"yallist": "^3.0.2"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/lucide-react": {
|
||||||
|
"version": "0.562.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.562.0.tgz",
|
||||||
|
"integrity": "sha512-82hOAu7y0dbVuFfmO4bYF1XEwYk/mEbM5E+b1jgci/udUBEE/R7LF5Ip0CCEmXe8AybRM8L+04eP+LGZeDvkiw==",
|
||||||
|
"license": "ISC",
|
||||||
|
"peerDependencies": {
|
||||||
|
"react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/lz-string": {
|
"node_modules/lz-string": {
|
||||||
"version": "1.5.0",
|
"version": "1.5.0",
|
||||||
"resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
|
"resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
|
||||||
@ -11423,6 +11492,48 @@
|
|||||||
"tslib": "^2.0.3"
|
"tslib": "^2.0.3"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/node-fetch": {
|
||||||
|
"version": "2.7.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
|
||||||
|
"integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"whatwg-url": "^5.0.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": "4.x || >=6.0.0"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"encoding": "^0.1.0"
|
||||||
|
},
|
||||||
|
"peerDependenciesMeta": {
|
||||||
|
"encoding": {
|
||||||
|
"optional": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/node-fetch/node_modules/tr46": {
|
||||||
|
"version": "0.0.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
|
||||||
|
"integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
|
"node_modules/node-fetch/node_modules/webidl-conversions": {
|
||||||
|
"version": "3.0.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
|
||||||
|
"integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
|
||||||
|
"license": "BSD-2-Clause"
|
||||||
|
},
|
||||||
|
"node_modules/node-fetch/node_modules/whatwg-url": {
|
||||||
|
"version": "5.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
|
||||||
|
"integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"tr46": "~0.0.3",
|
||||||
|
"webidl-conversions": "^3.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/node-forge": {
|
"node_modules/node-forge": {
|
||||||
"version": "1.3.3",
|
"version": "1.3.3",
|
||||||
"resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.3.3.tgz",
|
"resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.3.3.tgz",
|
||||||
@ -14581,6 +14692,12 @@
|
|||||||
"node": ">= 0.8.0"
|
"node": ">= 0.8.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/set-cookie-parser": {
|
||||||
|
"version": "2.7.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz",
|
||||||
|
"integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==",
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
"node_modules/set-function-length": {
|
"node_modules/set-function-length": {
|
||||||
"version": "1.2.2",
|
"version": "1.2.2",
|
||||||
"resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
|
"resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
|
||||||
|
|||||||
@ -3,10 +3,12 @@
|
|||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@microsoft/signalr": "^10.0.0",
|
||||||
"@testing-library/dom": "^10.4.1",
|
"@testing-library/dom": "^10.4.1",
|
||||||
"@testing-library/jest-dom": "^6.9.1",
|
"@testing-library/jest-dom": "^6.9.1",
|
||||||
"@testing-library/react": "^16.3.1",
|
"@testing-library/react": "^16.3.1",
|
||||||
"@testing-library/user-event": "^13.5.0",
|
"@testing-library/user-event": "^13.5.0",
|
||||||
|
"lucide-react": "^0.562.0",
|
||||||
"react": "^19.2.3",
|
"react": "^19.2.3",
|
||||||
"react-dom": "^19.2.3",
|
"react-dom": "^19.2.3",
|
||||||
"react-scripts": "5.0.1",
|
"react-scripts": "5.0.1",
|
||||||
@ -35,5 +37,10 @@
|
|||||||
"last 1 firefox version",
|
"last 1 firefox version",
|
||||||
"last 1 safari version"
|
"last 1 safari version"
|
||||||
]
|
]
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"autoprefixer": "^10.4.23",
|
||||||
|
"postcss": "^8.5.6",
|
||||||
|
"tailwindcss": "^3.4.19"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
568
src/App.js
568
src/App.js
@ -1,25 +1,553 @@
|
|||||||
import logo from './logo.svg';
|
import React, { useState, useEffect, useRef } from 'react';
|
||||||
import './App.css';
|
import { Database, Globe, Download, Play, Pause, Trash2, Plus, RefreshCw, Activity, Clock, CircleX, CircleCheck } from 'lucide-react';
|
||||||
|
import * as signalR from '@microsoft/signalr';
|
||||||
|
|
||||||
|
const API_BASE = 'http://localhost:5123';
|
||||||
|
|
||||||
|
const WebScraper = () => {
|
||||||
|
const [sessions, setSessions] = useState([]);
|
||||||
|
const [selectedSessionId, setSelectedSessionId] = useState(null);
|
||||||
|
const selectedSession = sessions.find(s => s.sessionId === selectedSessionId) ?? null;
|
||||||
|
const [sessionStatus, setSessionStatus] = useState(null);
|
||||||
|
const [newUrl, setNewUrl] = useState('');
|
||||||
|
const [logs, setLogs] = useState([]);
|
||||||
|
const [isConnected, setIsConnected] = useState(false);
|
||||||
|
|
||||||
|
const connectionRef = useRef(null);
|
||||||
|
|
||||||
|
const addLog = (message, type = 'info') => {
|
||||||
|
setLogs(prev => {
|
||||||
|
const newLogs = [...prev, {
|
||||||
|
message,
|
||||||
|
type,
|
||||||
|
time: new Date().toLocaleTimeString()
|
||||||
|
}];
|
||||||
|
return newLogs.slice(-100);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
loadSessions();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// Conectar ao SignalR
|
||||||
|
useEffect(() => {
|
||||||
|
const connection = new signalR.HubConnectionBuilder()
|
||||||
|
.withUrl(`http://localhost:5123/ws/scrape`)
|
||||||
|
.withAutomaticReconnect()
|
||||||
|
.build();
|
||||||
|
|
||||||
|
connection.on('scrapeEvent', (event) => {
|
||||||
|
handleScrapeEvent(normalizeEventType(event));
|
||||||
|
});
|
||||||
|
|
||||||
|
connection.onreconnecting(() => {
|
||||||
|
setIsConnected(false);
|
||||||
|
addLog('Reconectando ao servidor...', 'warning');
|
||||||
|
});
|
||||||
|
|
||||||
|
connection.onreconnected(async () => {
|
||||||
|
setIsConnected(true);
|
||||||
|
addLog('Reconectado ao servidor', 'success');
|
||||||
|
|
||||||
|
try {
|
||||||
|
await connection.invoke('SubscribeOverview');
|
||||||
|
await loadSessions(); // ressincroniza snapshot
|
||||||
|
if (selectedSession) {
|
||||||
|
await connection.invoke('Subscribe', selectedSession.sessionId);
|
||||||
|
await loadSessionStatus(selectedSession.sessionId); // snapshot também
|
||||||
|
}
|
||||||
|
} catch (e) { }
|
||||||
|
});
|
||||||
|
|
||||||
|
connection.onclose(() => {
|
||||||
|
setIsConnected(false);
|
||||||
|
addLog('Desconectado do servidor', 'error');
|
||||||
|
});
|
||||||
|
|
||||||
|
connection.start()
|
||||||
|
.then(async () => {
|
||||||
|
setIsConnected(true);
|
||||||
|
addLog('Conectado ao servidor', 'success');
|
||||||
|
connectionRef.current = connection;
|
||||||
|
|
||||||
|
// ✅ NOVO: assinar overview
|
||||||
|
await connection.invoke('SubscribeOverview');
|
||||||
|
|
||||||
|
// pega snapshot inicial uma vez
|
||||||
|
await loadSessions();
|
||||||
|
})
|
||||||
|
.catch(err => {
|
||||||
|
addLog(`Erro ao conectar: ${err.message}`, 'error');
|
||||||
|
});
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
if (connection) {
|
||||||
|
connection.stop();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// Inscrever na sessão selecionada
|
||||||
|
useEffect(() => {
|
||||||
|
if (connectionRef.current && selectedSession && isConnected) {
|
||||||
|
connectionRef.current.invoke('Subscribe', selectedSession.sessionId)
|
||||||
|
.then(() => {
|
||||||
|
addLog(`Inscrito na sessão: ${selectedSession.name}`, 'info');
|
||||||
|
})
|
||||||
|
.catch(err => {
|
||||||
|
addLog(`Erro ao inscrever: ${err.message}`, 'error');
|
||||||
|
});
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
if (connectionRef.current) {
|
||||||
|
connectionRef.current.invoke('Unsubscribe', selectedSession.sessionId)
|
||||||
|
.catch(() => { });
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}, [selectedSession, isConnected]);
|
||||||
|
|
||||||
|
const upsertSessionFromEvent = (sid, patch) => {
|
||||||
|
setSessions(prev => {
|
||||||
|
const idx = prev.findIndex(s => s.sessionId === sid);
|
||||||
|
if (idx === -1) return prev; // ou: return [...prev, {sessionId:sid, name:'', ...patch}]
|
||||||
|
const copy = [...prev];
|
||||||
|
copy[idx] = { ...copy[idx], ...patch };
|
||||||
|
return copy;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const ScrapeEventType = {
|
||||||
|
0: 'SessionStarted',
|
||||||
|
1: 'SessionStopRequested',
|
||||||
|
2: 'SessionStopped',
|
||||||
|
3: 'ItemStarted',
|
||||||
|
4: 'ItemSucceeded',
|
||||||
|
5: 'ItemFailed',
|
||||||
|
6: 'Progress',
|
||||||
|
};
|
||||||
|
|
||||||
|
const normalizeEventType = (ev) => {
|
||||||
|
if (typeof ev.type === 'number') return { ...ev, type: ScrapeEventType[ev.type] ?? ev.type };
|
||||||
|
return ev;
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleScrapeEvent = (event) => {
|
||||||
|
const sid = event.sessionId;
|
||||||
|
|
||||||
|
switch (event.type) {
|
||||||
|
case 'SessionStarted':
|
||||||
|
upsertSessionFromEvent(event.sessionId, { isRunning: true });
|
||||||
|
addLog(`🚀 Sessão iniciada`, 'success');
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'SessionStopped':
|
||||||
|
upsertSessionFromEvent(event.sessionId, { isRunning: false });
|
||||||
|
addLog(`⏹️ Sessão parada`, 'info');
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'ItemStarted':
|
||||||
|
addLog(`📄 Processando: ${event.url}`, 'info');
|
||||||
|
|
||||||
|
// Atualiza runtime do painel se essa for a sessão selecionada
|
||||||
|
setSessionStatus(prev => {
|
||||||
|
if (!prev || prev.runtime?.sessionId !== sid) return prev;
|
||||||
|
|
||||||
|
return {
|
||||||
|
...prev,
|
||||||
|
runtime: {
|
||||||
|
...prev.runtime,
|
||||||
|
isRunning: true,
|
||||||
|
currentUrl: event.url,
|
||||||
|
currentQueueId: event.queueId ?? prev.runtime?.currentQueueId,
|
||||||
|
currentStartedAt: event.at
|
||||||
|
}
|
||||||
|
};
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'ItemSucceeded':
|
||||||
|
addLog(`✓ Sucesso: ${event.url}`, 'success');
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'ItemFailed':
|
||||||
|
addLog(`✗ Falha: ${event.url} - ${event.error}`, 'error');
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'Progress': {
|
||||||
|
upsertSessionFromEvent(event.sessionId, {
|
||||||
|
queue: {
|
||||||
|
total: event.total,
|
||||||
|
pending: event.pending,
|
||||||
|
processing: event.processing,
|
||||||
|
done: event.done,
|
||||||
|
failed: event.failed,
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// também atualiza painel se for a sessão selecionada
|
||||||
|
if (selectedSession?.sessionId === event.sessionId) {
|
||||||
|
setSessionStatus(prev => ({
|
||||||
|
...(prev ?? {}),
|
||||||
|
counts: {
|
||||||
|
total: event.total,
|
||||||
|
pending: event.pending,
|
||||||
|
processing: event.processing,
|
||||||
|
done: event.done,
|
||||||
|
failed: event.failed
|
||||||
|
},
|
||||||
|
percent: event.percent
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
default:
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const loadSessions = async () => {
|
||||||
|
try {
|
||||||
|
const response = await fetch(`${API_BASE}/sessions`);
|
||||||
|
const data = await response.json();
|
||||||
|
setSessions(data);
|
||||||
|
} catch (err) {
|
||||||
|
addLog(`Erro ao carregar sessões: ${err.message}`, 'error');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const loadSessionStatus = async (sessionId) => {
|
||||||
|
try {
|
||||||
|
const response = await fetch(`${API_BASE}/sessions/${sessionId}/scrap/status`);
|
||||||
|
const data = await response.json();
|
||||||
|
setSessionStatus(data);
|
||||||
|
} catch (err) {
|
||||||
|
addLog(`Erro ao carregar status: ${err.message}`, 'error');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const startScraping = async () => {
|
||||||
|
if (!selectedSession) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
await fetch(`${API_BASE}/sessions/${selectedSession.sessionId}/scrap/start`, {
|
||||||
|
method: 'POST'
|
||||||
|
});
|
||||||
|
addLog(`Iniciando scraping da sessão: ${selectedSession.name}`, 'info');
|
||||||
|
} catch (err) {
|
||||||
|
addLog(`Erro ao iniciar: ${err.message}`, 'error');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const stopScraping = async () => {
|
||||||
|
if (!selectedSession) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
await fetch(`${API_BASE}/sessions/${selectedSession.sessionId}/scrap/stop`, {
|
||||||
|
method: 'POST'
|
||||||
|
});
|
||||||
|
addLog(`Parando sessão: ${selectedSession.name}`, 'warning');
|
||||||
|
} catch (err) {
|
||||||
|
addLog(`Erro ao parar: ${err.message}`, 'error');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const addUrlToQueue = async () => {
|
||||||
|
if (!selectedSession || !newUrl) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch(`${API_BASE}/sessions/${selectedSession.sessionId}/queue`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({ url: newUrl })
|
||||||
|
});
|
||||||
|
|
||||||
|
if (response.ok) {
|
||||||
|
const data = await response.json();
|
||||||
|
addLog(`✓ URL adicionada: ${newUrl}`, 'success');
|
||||||
|
setNewUrl('');
|
||||||
|
loadSessionStatus(selectedSession.sessionId);
|
||||||
|
} else {
|
||||||
|
const error = await response.text();
|
||||||
|
addLog(`Erro ao adicionar URL: ${error}`, 'error');
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
addLog(`Erro ao adicionar URL: ${err.message}`, 'error');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const updateSessionFromProgress = (sessionId, ev) => {
|
||||||
|
setSessions(prev =>
|
||||||
|
prev.map(s =>
|
||||||
|
s.sessionId !== sessionId
|
||||||
|
? s
|
||||||
|
: {
|
||||||
|
...s,
|
||||||
|
queue: {
|
||||||
|
total: ev.total ?? s.queue?.total ?? 0,
|
||||||
|
pending: ev.pending ?? s.queue?.pending ?? 0,
|
||||||
|
processing: ev.processing ?? s.queue?.processing ?? 0,
|
||||||
|
done: ev.done ?? s.queue?.done ?? 0,
|
||||||
|
failed: ev.failed ?? s.queue?.failed ?? 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
)
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const selectSession = (session) => {
|
||||||
|
setSelectedSessionId(session.sessionId);
|
||||||
|
setLogs([]);
|
||||||
|
addLog(`Sessão selecionada: ${session.name}`, 'info');
|
||||||
|
loadSessionStatus(session.sessionId); // snapshot inicial
|
||||||
|
};
|
||||||
|
|
||||||
|
const formatNumber = (num) => {
|
||||||
|
return num?.toLocaleString('pt-BR') || '0';
|
||||||
|
};
|
||||||
|
|
||||||
|
const patchSessionCounts = (sid, ev) => {
|
||||||
|
setSessions(prev =>
|
||||||
|
prev.map(s => s.sessionId !== sid ? s : ({
|
||||||
|
...s,
|
||||||
|
queue: {
|
||||||
|
total: ev.total ?? s.queue?.total ?? 0,
|
||||||
|
pending: ev.pending ?? s.queue?.pending ?? 0,
|
||||||
|
processing: ev.processing ?? s.queue?.processing ?? 0,
|
||||||
|
done: ev.done ?? s.queue?.done ?? 0,
|
||||||
|
failed: ev.failed ?? s.queue?.failed ?? 0
|
||||||
|
}
|
||||||
|
}))
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const patchSessionRunning = (sid, isRunning) => {
|
||||||
|
setSessions(prev =>
|
||||||
|
prev.map(s => s.sessionId !== sid ? s : ({ ...s, isRunning }))
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const getProgressPercent = () => {
|
||||||
|
if (!sessionStatus?.counts) return 0;
|
||||||
|
const { total, done } = sessionStatus.counts;
|
||||||
|
return total > 0 ? ((done / total) * 100).toFixed(1) : 0;
|
||||||
|
};
|
||||||
|
|
||||||
function App() {
|
|
||||||
return (
|
return (
|
||||||
<div className="App">
|
<div className="min-h-screen bg-gradient-to-br from-slate-900 to-slate-800 text-white p-6">
|
||||||
<header className="App-header">
|
<div className="max-w-7xl mx-auto">
|
||||||
<img src={logo} className="App-logo" alt="logo" />
|
{/* Header */}
|
||||||
<p>
|
<div className="mb-8 flex justify-between items-center">
|
||||||
Edit <code>src/App.js</code> and save to reload.
|
<div>
|
||||||
</p>
|
<h1 className="text-4xl font-bold mb-2 flex items-center gap-3">
|
||||||
<a
|
<Globe className="text-blue-400" />
|
||||||
className="App-link"
|
Web Scraper Pro
|
||||||
href="https://reactjs.org"
|
</h1>
|
||||||
target="_blank"
|
<p className="text-slate-400">Gerenciador de scraping com API backend</p>
|
||||||
rel="noopener noreferrer"
|
</div>
|
||||||
>
|
<div className="flex items-center gap-3">
|
||||||
Learn React
|
<div className={`flex items-center gap-2 px-4 py-2 rounded-lg ${isConnected ? 'bg-green-900/30 text-green-400' : 'bg-red-900/30 text-red-400'}`}>
|
||||||
</a>
|
<Activity size={16} />
|
||||||
</header>
|
{isConnected ? 'Conectado' : 'Desconectado'}
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={loadSessions}
|
||||||
|
className="flex items-center gap-2 px-4 py-2 bg-slate-700 hover:bg-slate-600 rounded-lg transition"
|
||||||
|
>
|
||||||
|
<RefreshCw size={16} />
|
||||||
|
Atualizar
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-3 gap-6">
|
||||||
|
{/* Lista de Sessões */}
|
||||||
|
<div className="bg-slate-800 rounded-lg p-6 shadow-xl">
|
||||||
|
<h2 className="text-xl font-bold mb-4 flex items-center gap-2">
|
||||||
|
<Database size={20} />
|
||||||
|
Sessões
|
||||||
|
</h2>
|
||||||
|
<div className="space-y-2">
|
||||||
|
{sessions.map((session) => (
|
||||||
|
<div
|
||||||
|
key={session.sessionId}
|
||||||
|
onClick={() => selectSession(session)}
|
||||||
|
className={`p-4 rounded-lg cursor-pointer transition ${selectedSession?.sessionId === session.sessionId
|
||||||
|
? 'bg-blue-600'
|
||||||
|
: 'bg-slate-700 hover:bg-slate-600'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<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>
|
||||||
|
<div className="text-sm text-slate-300">
|
||||||
|
<div>Total: {formatNumber(session.queue?.total || 0)}</div>
|
||||||
|
<div className="flex gap-4 mt-1">
|
||||||
|
<span className="text-green-400 flex items-center"><CircleCheck size={16} /> {formatNumber(session.queue?.done || 0)}</span>
|
||||||
|
<span className="text-yellow-400 flex items-center"><Clock size={16} /> {formatNumber(session.queue?.pending || 0)}</span>
|
||||||
|
<span className="text-red-400 flex items-center"><CircleX size={16} /> {formatNumber(session.queue?.failed || 0)}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
{sessions.length === 0 && (
|
||||||
|
<div className="text-slate-500 text-center py-8">
|
||||||
|
Nenhuma sessão disponível
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Detalhes e Controles */}
|
||||||
|
<div className="col-span-2 space-y-6">
|
||||||
|
{selectedSession ? (
|
||||||
|
<>
|
||||||
|
{/* Controles */}
|
||||||
|
<div className="bg-slate-800 rounded-lg p-6 shadow-xl">
|
||||||
|
<h3 className="text-lg font-bold mb-4">Controles - {selectedSession.name}</h3>
|
||||||
|
|
||||||
|
<div className="flex gap-3 mb-4">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={newUrl}
|
||||||
|
onChange={(e) => setNewUrl(e.target.value)}
|
||||||
|
placeholder="https://site.com/page"
|
||||||
|
className="flex-1 px-4 py-2 bg-slate-700 rounded-lg border border-slate-600 focus:border-blue-500 focus:outline-none"
|
||||||
|
onKeyPress={(e) => e.key === 'Enter' && addUrlToQueue()}
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
onClick={addUrlToQueue}
|
||||||
|
className="flex items-center gap-2 px-6 py-2 bg-green-600 hover:bg-green-700 rounded-lg font-medium transition"
|
||||||
|
disabled={!newUrl}
|
||||||
|
>
|
||||||
|
<Plus size={18} />
|
||||||
|
Adicionar
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex gap-3">
|
||||||
|
{!selectedSession.isRunning ? (
|
||||||
|
<button
|
||||||
|
onClick={startScraping}
|
||||||
|
className="flex items-center gap-2 px-6 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg font-medium transition"
|
||||||
|
>
|
||||||
|
<Play size={18} />
|
||||||
|
Iniciar Scraping
|
||||||
|
</button>
|
||||||
|
) : (
|
||||||
|
<button
|
||||||
|
onClick={stopScraping}
|
||||||
|
className="flex items-center gap-2 px-6 py-2 bg-orange-600 hover:bg-orange-700 rounded-lg font-medium transition"
|
||||||
|
>
|
||||||
|
<Pause size={18} />
|
||||||
|
Parar (Graceful)
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Estatísticas */}
|
||||||
|
{sessionStatus && (
|
||||||
|
<>
|
||||||
|
<div className="bg-slate-800 rounded-lg p-6 shadow-xl">
|
||||||
|
<h3 className="text-lg font-bold mb-4">Progresso</h3>
|
||||||
|
|
||||||
|
{/* Barra de Progresso */}
|
||||||
|
<div className="mb-4">
|
||||||
|
<div className="flex justify-between text-sm mb-2">
|
||||||
|
<span>Processado</span>
|
||||||
|
<span>{getProgressPercent()}%</span>
|
||||||
|
</div>
|
||||||
|
<div className="w-full bg-slate-700 rounded-full h-4 overflow-hidden">
|
||||||
|
<div
|
||||||
|
className="bg-gradient-to-r from-blue-500 to-green-500 h-full transition-all duration-500"
|
||||||
|
style={{ width: `${getProgressPercent()}%` }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-5 gap-3">
|
||||||
|
<div className="bg-slate-700 rounded-lg p-3">
|
||||||
|
<div className="text-slate-400 text-xs mb-1">Total</div>
|
||||||
|
<div className="text-2xl font-bold">{formatNumber(sessionStatus.counts?.total)}</div>
|
||||||
|
</div>
|
||||||
|
<div className="bg-slate-700 rounded-lg p-3">
|
||||||
|
<div className="text-slate-400 text-xs mb-1">Concluído</div>
|
||||||
|
<div className="text-2xl font-bold text-green-400">{formatNumber(sessionStatus.counts?.done)}</div>
|
||||||
|
</div>
|
||||||
|
<div className="bg-slate-700 rounded-lg p-3">
|
||||||
|
<div className="text-slate-400 text-xs mb-1">Pendente</div>
|
||||||
|
<div className="text-2xl font-bold text-yellow-400">{formatNumber(sessionStatus.counts?.pending)}</div>
|
||||||
|
</div>
|
||||||
|
<div className="bg-slate-700 rounded-lg p-3">
|
||||||
|
<div className="text-slate-400 text-xs mb-1">Processando</div>
|
||||||
|
<div className="text-2xl font-bold text-blue-400">{formatNumber(sessionStatus.counts?.processing)}</div>
|
||||||
|
</div>
|
||||||
|
<div className="bg-slate-700 rounded-lg p-3">
|
||||||
|
<div className="text-slate-400 text-xs mb-1">Falhas</div>
|
||||||
|
<div className="text-2xl font-bold text-red-400">{formatNumber(sessionStatus.counts?.failed)}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* URL Atual */}
|
||||||
|
{sessionStatus.runtime?.isRunning && sessionStatus.runtime?.currentUrl && (
|
||||||
|
<div className="mt-4 p-3 bg-slate-700 rounded-lg">
|
||||||
|
<div className="text-xs text-slate-400 mb-1">Processando agora:</div>
|
||||||
|
<div className="text-sm text-blue-300 truncate" title={sessionStatus.runtime.currentUrl}>
|
||||||
|
{sessionStatus.runtime.currentUrl}
|
||||||
|
</div>
|
||||||
|
<div className="text-xs text-slate-400 mt-1">
|
||||||
|
Iniciado: {new Date(sessionStatus.runtime.currentStartedAt).toLocaleTimeString('pt-BR')}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Logs */}
|
||||||
|
<div className="bg-slate-800 rounded-lg p-6 shadow-xl">
|
||||||
|
<h2 className="text-xl font-bold mb-4">Logs em Tempo Real</h2>
|
||||||
|
<div className="space-y-1 max-h-96 overflow-y-auto font-mono text-xs">
|
||||||
|
{logs.map((log, idx) => (
|
||||||
|
<div key={idx} className={`
|
||||||
|
${log.type === 'error' ? 'text-red-400' : ''}
|
||||||
|
${log.type === 'success' ? 'text-green-400' : ''}
|
||||||
|
${log.type === 'warning' ? 'text-yellow-400' : ''}
|
||||||
|
${log.type === 'info' ? 'text-slate-300' : ''}
|
||||||
|
`}>
|
||||||
|
[{log.time}] {log.message}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
{logs.length === 0 && (
|
||||||
|
<div className="text-slate-500 text-center py-8">
|
||||||
|
Nenhum evento ainda. Selecione uma sessão e inicie o scraping.
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<div className="bg-slate-800 rounded-lg p-12 shadow-xl text-center">
|
||||||
|
<Globe size={64} className="mx-auto mb-4 text-slate-600" />
|
||||||
|
<h3 className="text-xl font-bold mb-2">Selecione uma Sessão</h3>
|
||||||
|
<p className="text-slate-400">
|
||||||
|
Escolha uma sessão à esquerda para começar
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
export default App;
|
export default WebScraper;
|
||||||
@ -1,8 +0,0 @@
|
|||||||
import { render, screen } from '@testing-library/react';
|
|
||||||
import App from './App';
|
|
||||||
|
|
||||||
test('renders learn react link', () => {
|
|
||||||
render(<App />);
|
|
||||||
const linkElement = screen.getByText(/learn react/i);
|
|
||||||
expect(linkElement).toBeInTheDocument();
|
|
||||||
});
|
|
||||||
@ -1,13 +1,3 @@
|
|||||||
body {
|
@tailwind base;
|
||||||
margin: 0;
|
@tailwind components;
|
||||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
@tailwind utilities;
|
||||||
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
|
||||||
sans-serif;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
-moz-osx-font-smoothing: grayscale;
|
|
||||||
}
|
|
||||||
|
|
||||||
code {
|
|
||||||
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
|
||||||
monospace;
|
|
||||||
}
|
|
||||||
12
src/index.js
12
src/index.js
@ -2,16 +2,10 @@ import React from 'react';
|
|||||||
import ReactDOM from 'react-dom/client';
|
import ReactDOM from 'react-dom/client';
|
||||||
import './index.css';
|
import './index.css';
|
||||||
import App from './App';
|
import App from './App';
|
||||||
import reportWebVitals from './reportWebVitals';
|
|
||||||
|
|
||||||
const root = ReactDOM.createRoot(document.getElementById('root'));
|
const root = ReactDOM.createRoot(document.getElementById('root'));
|
||||||
root.render(
|
root.render(
|
||||||
<React.StrictMode>
|
// <React.StrictMode>
|
||||||
<App />
|
<App />
|
||||||
</React.StrictMode>
|
// </React.StrictMode>
|
||||||
);
|
);
|
||||||
|
|
||||||
// If you want to start measuring performance in your app, pass a function
|
|
||||||
// to log results (for example: reportWebVitals(console.log))
|
|
||||||
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
|
|
||||||
reportWebVitals();
|
|
||||||
@ -1 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
|
|
||||||
|
Before Width: | Height: | Size: 2.6 KiB |
@ -1,13 +0,0 @@
|
|||||||
const reportWebVitals = onPerfEntry => {
|
|
||||||
if (onPerfEntry && onPerfEntry instanceof Function) {
|
|
||||||
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
|
|
||||||
getCLS(onPerfEntry);
|
|
||||||
getFID(onPerfEntry);
|
|
||||||
getFCP(onPerfEntry);
|
|
||||||
getLCP(onPerfEntry);
|
|
||||||
getTTFB(onPerfEntry);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
export default reportWebVitals;
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
// jest-dom adds custom jest matchers for asserting on DOM nodes.
|
|
||||||
// allows you to do things like:
|
|
||||||
// expect(element).toHaveTextContent(/react/i)
|
|
||||||
// learn more: https://github.com/testing-library/jest-dom
|
|
||||||
import '@testing-library/jest-dom';
|
|
||||||
9
tailwind.config.js
Normal file
9
tailwind.config.js
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
module.exports = {
|
||||||
|
content: [
|
||||||
|
"./src/**/*.{js,jsx,ts,tsx}",
|
||||||
|
],
|
||||||
|
theme: {
|
||||||
|
extend: {},
|
||||||
|
},
|
||||||
|
plugins: [],
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user