From 113713c36283d295bac308e808e1199edf4cacb2 Mon Sep 17 00:00:00 2001
From: karishmas6 <carishmashukla28@gmail.com>
Date: Sat, 10 Aug 2024 04:46:09 +0530
Subject: [PATCH] feat: get list settings THE RIGHT WAY

---
 src/components/organisms/RightSidePanel.tsx | 77 ++++++++++++++-------
 1 file changed, 53 insertions(+), 24 deletions(-)

diff --git a/src/components/organisms/RightSidePanel.tsx b/src/components/organisms/RightSidePanel.tsx
index 2efdc7bf..804a877a 100644
--- a/src/components/organisms/RightSidePanel.tsx
+++ b/src/components/organisms/RightSidePanel.tsx
@@ -8,7 +8,7 @@ import { SimpleBox } from "../atoms/Box";
 import Typography from "@mui/material/Typography";
 import { useGlobalInfoStore } from "../../context/globalInfo";
 import { useActionContext } from '../../context/browserActions';
-import { useBrowserSteps } from '../../context/browserSteps';
+import { useBrowserSteps, ListStep, TextStep, SelectorObject } from '../../context/browserSteps';
 import { useSocketStore } from '../../context/socket';
 import { ScreenshotSettings } from '../../shared/types';
 import InputAdornment from '@mui/material/InputAdornment';
@@ -62,6 +62,7 @@ export const RightSidePanel = () => {
         settings[step.label] = step.selectorObj;
       }
     });
+    console.log(`seetings text:`, settings)
     return settings;
   }, [browserSteps]);
 
@@ -82,32 +83,60 @@ export const RightSidePanel = () => {
 
 
   const getListSettingsObject = useCallback(() => {
-    const listStep = browserSteps.find(step => step.type === 'list');
-    if (!listStep || listStep.type !== 'list' || Object.keys(listStep.fields).length === 0) return null;
+    const settings: Record<string, { listSelector: string; fields: Record<string, { selector: string; tag?: string; [key: string]: any }> }> = {};
 
-    const firstFieldKey = Object.keys(listStep.fields)[0];
-    const firstField = listStep.fields[firstFieldKey];
+    browserSteps.forEach(step => {
+        if (step.type === 'list' && step.listSelector && Object.keys(step.fields).length > 0) {
+          const fields: Record<string, { selector: string; tag?: string; [key: string]: any }> = {};
+          Object.entries(step.fields).forEach(([label, field]) => {
+                if (field.selectorObj?.selector) {
+                    fields[label] = {
+                        selector: field.selectorObj.selector,
+                        tag: field.selectorObj.tag,
+                        attribute: field.selectorObj.attribute
+                    };
+                }
+            });
 
-    return {
-      listSelector: listStep.listSelector,
-      fields: {
-        [firstField.label]: {
-          selector: firstField.selectorObj.selector,
-          attribute: firstField.selectorObj.attribute || 'innerText'
+            // settings.listSelector = step.listSelector;
+            // settings.fields = fields;
+
+            settings[step.listSelector] = {
+              listSelector: step.listSelector,
+              fields: fields
+          };
         }
-      }
-    };
-  }, [browserSteps]);
+    });
 
-  const stopCaptureAndEmitGetListSettings = useCallback(() => {
-    stopGetList();
-    const settings = getListSettingsObject();
-    if (settings) {
-      socket?.emit('action', { action: 'scrapeList', settings });
-    } else {
-      notify('error', 'Unable to create list settings. Make sure you have defined a field for the list.');
-    }
-  }, [stopGetList, getListSettingsObject, socket, notify]);
+    console.log(`Setting LIST:`, settings)
+
+    return settings;
+}, [browserSteps]);
+
+
+    // const firstFieldKey = Object.keys(listStep.fields)[0];
+    // const firstField = listStep.fields[firstFieldKey];
+
+    // return {
+    //   listSelector: listStep.listSelector,
+    //   fields: {
+    //     [firstField.label]: {
+    //       selector: firstField.selectorObj.selector,
+    //       attribute: firstField.selectorObj.attribute || 'innerText'
+    //     }
+    //   }
+    // };
+  // }, [browserSteps]);
+
+  // const stopCaptureAndEmitGetListSettings = useCallback(() => {
+  //   stopGetList();
+  //   const settings = getListSettingsObject();
+  //   if (settings) {
+  //     socket?.emit('action', { action: 'scrapeList', settings });
+  //   } else {
+  //     notify('error', 'Unable to create list settings. Make sure you have defined a field for the list.');
+  //   }
+  // }, [stopGetList, getListSettingsObject, socket, notify]);
 
   // const handleListFieldChange = (stepId: number, key: 'label' | 'data', value: string) => {
   //   updateListStepField(stepId, key, value);
@@ -138,7 +167,7 @@ export const RightSidePanel = () => {
         {getList &&
           <>
             <Box display="flex" justifyContent="space-between" gap={2} style={{ margin: '15px' }}>
-              <Button variant="outlined" onClick={stopCaptureAndEmitGetListSettings}>Confirm</Button>
+              <Button variant="outlined" onClick={getListSettingsObject}>Confirm</Button>
               <Button variant="outlined" color="error" onClick={stopGetList}>Discard</Button>
             </Box>
           </>