feat(wip): render url

ui/src/components/Scraper/index.jsx

@@ -1,58 +1,94 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 import axios from 'axios';
-import VisualSelector from '../VisualSelector';
 
-const Scraper = () => {
+function Scraper() {
   const [url, setUrl] = useState('');
-  const [htmlContent, setHtmlContent] = useState('');
+  const [selections, setSelections] = useState([]);
-  const [selectedElements, setSelectedElements] = useState([]);
+  const [data, setData] = useState(null);
-  const [scrapedData, setScrapedData] = useState([]);
 
   const handleUrlChange = (e) => {
     setUrl(e.target.value);
   };
 
-  const handleFetchWebsite = async () => {
+  const handleSelectElement = (e) => {
-    try {
+    const selection = {
-      const response = await axios.post('http://localhost:8000/fetch-website', { url });
+      name: `selection_${selections.length + 1}`,
-      setHtmlContent(response.data.html);
+      selector: generateSelector(e.target),
-    } catch (error) {
+    };
-      console.error('Error:', error);
+    setSelections((prevSelections) => [...prevSelections, selection]);
-    }
   };
 
-  const handleElementSelection = (selectedElements) => {
+  const generateSelector = (element) => {
-    setSelectedElements(selectedElements);
+    let selector = element.tagName.toLowerCase();
+    let parent = element.parentNode;
+
+    while (parent && parent.tagName !== 'HTML') {
+      const id = parent.id;
+      const classes = Array.from(parent.classList).join('.');
+
+      if (id) {
+        selector = `#${id} > ${selector}`;
+        break;
+      } else if (classes) {
+        selector = `.${classes} > ${selector}`;
+        break;
+      } else {
+        selector = `${parent.tagName.toLowerCase()} > ${selector}`;
+      }
+
+      parent = parent.parentNode;
+    }
+
+    return selector;
   };
 
   const handleScrape = async () => {
     try {
-      const response = await axios.post('http://localhost:8000/scrape', {
+      const response = await axios.post('http://localhost:3000/scrape', {
         url,
-        selectedElements,
+        selections,
       });
-      setScrapedData(response.data.data);
+      setData(response.data);
+      console.log('Scraped Data', response.data);
     } catch (error) {
-      console.error('Error:', error);
+      console.error('Error scraping:', error);
     }
   };
 
   return (
     <div>
-      <input type="text" value={url} onChange={handleUrlChange} placeholder="Enter URL" />
+      <input
-      <button onClick={handleFetchWebsite}>Fetch Website</button>
+        type="text"
-      {htmlContent && (
+        placeholder="Enter URL to scrape"
-        <VisualSelector
+        value={url}
-          htmlContent={htmlContent}
+        onChange={handleUrlChange}
-          onElementSelection={handleElementSelection}
+      />
-        />
+      <button onClick={handleScrape}>Scrape</button>
+      <p>Click on the elements you want to scrape:</p>
+      <iframe
+        src={url}
+        onLoad={(e) => {
+          const iframeDocument = e.target.contentDocument;
+          iframeDocument.body.onclick = handleSelectElement;
+        }}
+        style={{ width: '100%', height: '500px' }}
+      />
+      <p>Selected Elements:</p>
+      <ul>
+        {selections.map((selection, index) => (
+          <li key={index}>
+            {selection.name}: {selection.selector}
+          </li>
+        ))}
+      </ul>
+      {data && (
+        <div>
+          <h2>Scraped Data:</h2>
+          <pre>{JSON.stringify(data, null, 2)}</pre>
+        </div>
       )}
-      <button onClick={handleScrape} disabled={selectedElements.length === 0}>
-        Scrape
-      </button>
-      <pre>{JSON.stringify(scrapedData, null, 2)}</pre>
     </div>
   );
-};
+}
 
 export default Scraper;