vodorod/parcer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: code cleanup (old scraper)

Browse Source
This commit is contained in:
karishmas6
2024-04-20 22:30:25 +05:30
parent 527fa05b9f
commit 5f5600a387
1 changed files with 0 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
ui/src/components/Scraper/index.jsx
View File

@@ -1,91 +0,0 @@
import React, { useState, useEffect, useRef } from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';
const Scraper = () => {
const [url, setUrl] = useState('');
const [selectedSelectors, setSelectedSelectors] = useState([]);
const [scrapedData, setScrapedData] = useState(null);
const containerRef = useRef(null);
useEffect(() => {
const handleSelectElement = async (selector) => {
try {
await window.playwright.selectElement(selector);
setSelectedSelectors((prevSelectors) => [...prevSelectors, selector]);
} catch (error) {
console.error('Error selecting element:', error);
}
};
window.playwright = {
selectElement: handleSelectElement,
};
return () => {
window.playwright = null;
};
}, []);
const handleUrlChange = (e) => {
setUrl(e.target.value);
};
const handleOpenSite = async () => {
try {
const containerId = containerRef.current.id;
const response = await axios.post('http://localhost:3000/scrape', { url, containerId });
// Mount the Playwright context into the frontend container
if (response.data.success) {
const { context } = response.data;
await context.setDefaultViewportSize({ width: 1280, height: 720 });
await context.exposeBinding('selectElement', async (selector) => {
const selection = {
name: `selection_${selectedSelectors.length + 1}`,
selector,
};
setSelectedSelectors((prevSelectors) => [...prevSelectors, selection]);
});
ReactDOM.render(<div id="playwright-container" />, containerRef.current);
await context.mount(document.getElementById('playwright-container'));
} else {
console.error('Error opening site:', response.data.error);
}
} catch (error) {
console.error('Error opening site:', error);
}
};
const handleScrape = async () => {
try {
const response = await axios.post('http://localhost:3000/scrape', { selectedSelectors });
setScrapedData(response.data);
} catch (error) {
console.error('Error scraping:', error);
}
};
return (
<div>
<input type="text" value={url} onChange={handleUrlChange} placeholder="Enter URL" />
<button onClick={handleOpenSite}>Open Site</button>
<div ref={containerRef} style={{ width: '100%', height: '500px', border: '1px solid black' }} />
<button onClick={handleScrape}>Scrape Data</button>
<p>Selected Elements:</p>
<ul>
{selectedSelectors.map((selector, index) => (
<li key={index}>{selector}</li>
))}
</ul>
{scrapedData && (
<div>
<h2>Scraped Data:</h2>
<pre>{JSON.stringify(scrapedData, null, 2)}</pre>
</div>
)}
</div>
);
};
export default Scraper;