diff --git a/ui/src/components/Scraper/index.jsx b/ui/src/components/Scraper/index.jsx index 9f9fd45f..e69de29b 100644 --- a/ui/src/components/Scraper/index.jsx +++ b/ui/src/components/Scraper/index.jsx @@ -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(
, 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 ( -
- - -
- -

Selected Elements:

-
    - {selectedSelectors.map((selector, index) => ( -
  • {selector}
  • - ))} -
- {scrapedData && ( -
-

Scraped Data:

-
{JSON.stringify(scrapedData, null, 2)}
-
- )} -
- ); -}; - -export default Scraper; \ No newline at end of file