From 3b0b8637548f948678ab7b8f48e89289fbfba460 Mon Sep 17 00:00:00 2001
From: karishmas6 <carishmashukla28@gmail.com>
Date: Thu, 10 Oct 2024 18:55:53 +0530
Subject: [PATCH 1/5] feat: start pagination mode after
 hasUnconfirmedListTextFields

---
 src/components/organisms/RightSidePanel.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/organisms/RightSidePanel.tsx b/src/components/organisms/RightSidePanel.tsx
index 5863fdb1..949a15ad 100644
--- a/src/components/organisms/RightSidePanel.tsx
+++ b/src/components/organisms/RightSidePanel.tsx
@@ -274,12 +274,12 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
   const handleConfirmListCapture = useCallback(() => {
     switch (captureStage) {
       case 'initial':
-        startPaginationMode();
         const hasUnconfirmedListTextFields = browserSteps.some(step => step.type === 'list' && Object.values(step.fields).some(field => !confirmedListTextFields[step.id]?.[field.id]));
         if (hasUnconfirmedListTextFields) {
           notify('error', 'Please confirm all field labels.');
           return;
         }
+        startPaginationMode();
         setShowPaginationOptions(true);
         setCaptureStage('pagination');
         break;

From 13c9560a42875383e9a00a13e1aaf530e4e145dd Mon Sep 17 00:00:00 2001
From: karishmas6 <carishmashukla28@gmail.com>
Date: Thu, 10 Oct 2024 19:17:57 +0530
Subject: [PATCH 2/5] feat: wrap in useEffect

---
 src/components/organisms/RightSidePanel.tsx | 119 ++++++++++++--------
 1 file changed, 70 insertions(+), 49 deletions(-)

diff --git a/src/components/organisms/RightSidePanel.tsx b/src/components/organisms/RightSidePanel.tsx
index 949a15ad..0c491eb7 100644
--- a/src/components/organisms/RightSidePanel.tsx
+++ b/src/components/organisms/RightSidePanel.tsx
@@ -271,58 +271,79 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
     onFinishCapture();
   }, [stopGetList, getListSettingsObject, socket, notify, handleStopGetList]);
 
-  const handleConfirmListCapture = useCallback(() => {
-    switch (captureStage) {
-      case 'initial':
-        const hasUnconfirmedListTextFields = browserSteps.some(step => step.type === 'list' && Object.values(step.fields).some(field => !confirmedListTextFields[step.id]?.[field.id]));
-        if (hasUnconfirmedListTextFields) {
-          notify('error', 'Please confirm all field labels.');
-          return;
-        }
-        startPaginationMode();
-        setShowPaginationOptions(true);
-        setCaptureStage('pagination');
-        break;
 
-      case 'pagination':
-        if (!paginationType) {
-          notify('error', 'Please select a pagination type.');
-          return;
-        }
-        const settings = getListSettingsObject();
-        const paginationSelector = settings.pagination?.selector;
-        if (['clickNext', 'clickLoadMore'].includes(paginationType) && !paginationSelector) {
-          notify('error', 'Please select the pagination element first.');
-          return;
-        }
-        stopPaginationMode();
-        setShowPaginationOptions(false);
-        startLimitMode();
-        setShowLimitOptions(true);
-        setCaptureStage('limit');
-        break;
+useEffect(() => {
+  if (captureStage === 'initial') {
+    const hasUnconfirmedListTextFields = browserSteps.some(step =>
+      step.type === 'list' && Object.values(step.fields).some(field => !confirmedListTextFields[step.id]?.[field.id])
+    );
 
-      case 'limit':
-        if (!limitType || (limitType === 'custom' && !customLimit)) {
-          notify('error', 'Please select a limit or enter a custom limit.');
-          return;
-        }
-        const limit = limitType === 'custom' ? parseInt(customLimit) : parseInt(limitType);
-        if (isNaN(limit) || limit <= 0) {
-          notify('error', 'Please enter a valid limit.');
-          return;
-        }
-        stopLimitMode();
-        setShowLimitOptions(false);
-        stopCaptureAndEmitGetListSettings();
-        setCaptureStage('complete');
-        break;
-
-      case 'complete':
-        setCaptureStage('initial');
-        break;
+    if (hasUnconfirmedListTextFields) {
+      notify('error', 'Please confirm all field labels.');
     }
-  }, [captureStage, paginationType, limitType, customLimit, startPaginationMode, stopPaginationMode, startLimitMode, stopLimitMode, notify, stopCaptureAndEmitGetListSettings, getListSettingsObject]);
+  }
+}, [captureStage, confirmedListTextFields, browserSteps, notify]);
+
+const handleConfirmListCapture = useCallback(() => {
+  switch (captureStage) {
+    case 'initial':
+      startPaginationMode();
+      setShowPaginationOptions(true);
+      setCaptureStage('pagination');
+      break;
+
+    case 'pagination':
+      if (!paginationType) {
+        notify('error', 'Please select a pagination type.');
+        return;
+      }
+      const settings = getListSettingsObject();
+      const paginationSelector = settings.pagination?.selector;
+      if (['clickNext', 'clickLoadMore'].includes(paginationType) && !paginationSelector) {
+        notify('error', 'Please select the pagination element first.');
+        return;
+      }
+      stopPaginationMode();
+      setShowPaginationOptions(false);
+      startLimitMode();
+      setShowLimitOptions(true);
+      setCaptureStage('limit');
+      break;
+
+    case 'limit':
+      if (!limitType || (limitType === 'custom' && !customLimit)) {
+        notify('error', 'Please select a limit or enter a custom limit.');
+        return;
+      }
+      const limit = limitType === 'custom' ? parseInt(customLimit) : parseInt(limitType);
+      if (isNaN(limit) || limit <= 0) {
+        notify('error', 'Please enter a valid limit.');
+        return;
+      }
+      stopLimitMode();
+      setShowLimitOptions(false);
+      stopCaptureAndEmitGetListSettings();
+      setCaptureStage('complete');
+      break;
+
+    case 'complete':
+      setCaptureStage('initial');
+      break;
+  }
+}, [
+  captureStage, 
+  paginationType, 
+  limitType, 
+  customLimit, 
+  startPaginationMode, 
+  stopPaginationMode, 
+  startLimitMode, 
+  stopLimitMode, 
+  notify, 
+  stopCaptureAndEmitGetListSettings, 
+  getListSettingsObject
+]);
+
 
   const handlePaginationSettingSelect = (option: PaginationType) => {
     updatePaginationType(option);

From 307e9d1d68cfd168a234b10e7aca675d488bc6bc Mon Sep 17 00:00:00 2001
From: karishmas6 <carishmashukla28@gmail.com>
Date: Thu, 10 Oct 2024 19:29:21 +0530
Subject: [PATCH 3/5] fix: revery

---
 src/components/organisms/RightSidePanel.tsx | 119 ++++++++------------
 1 file changed, 49 insertions(+), 70 deletions(-)

diff --git a/src/components/organisms/RightSidePanel.tsx b/src/components/organisms/RightSidePanel.tsx
index 0c491eb7..949a15ad 100644
--- a/src/components/organisms/RightSidePanel.tsx
+++ b/src/components/organisms/RightSidePanel.tsx
@@ -271,79 +271,58 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
     onFinishCapture();
   }, [stopGetList, getListSettingsObject, socket, notify, handleStopGetList]);
 
+  const handleConfirmListCapture = useCallback(() => {
+    switch (captureStage) {
+      case 'initial':
+        const hasUnconfirmedListTextFields = browserSteps.some(step => step.type === 'list' && Object.values(step.fields).some(field => !confirmedListTextFields[step.id]?.[field.id]));
+        if (hasUnconfirmedListTextFields) {
+          notify('error', 'Please confirm all field labels.');
+          return;
+        }
+        startPaginationMode();
+        setShowPaginationOptions(true);
+        setCaptureStage('pagination');
+        break;
 
-useEffect(() => {
-  if (captureStage === 'initial') {
-    const hasUnconfirmedListTextFields = browserSteps.some(step =>
-      step.type === 'list' && Object.values(step.fields).some(field => !confirmedListTextFields[step.id]?.[field.id])
-    );
+      case 'pagination':
+        if (!paginationType) {
+          notify('error', 'Please select a pagination type.');
+          return;
+        }
+        const settings = getListSettingsObject();
+        const paginationSelector = settings.pagination?.selector;
+        if (['clickNext', 'clickLoadMore'].includes(paginationType) && !paginationSelector) {
+          notify('error', 'Please select the pagination element first.');
+          return;
+        }
+        stopPaginationMode();
+        setShowPaginationOptions(false);
+        startLimitMode();
+        setShowLimitOptions(true);
+        setCaptureStage('limit');
+        break;
 
-    if (hasUnconfirmedListTextFields) {
-      notify('error', 'Please confirm all field labels.');
+      case 'limit':
+        if (!limitType || (limitType === 'custom' && !customLimit)) {
+          notify('error', 'Please select a limit or enter a custom limit.');
+          return;
+        }
+        const limit = limitType === 'custom' ? parseInt(customLimit) : parseInt(limitType);
+        if (isNaN(limit) || limit <= 0) {
+          notify('error', 'Please enter a valid limit.');
+          return;
+        }
+        stopLimitMode();
+        setShowLimitOptions(false);
+        stopCaptureAndEmitGetListSettings();
+        setCaptureStage('complete');
+        break;
+
+      case 'complete':
+        setCaptureStage('initial');
+        break;
     }
-  }
-}, [captureStage, confirmedListTextFields, browserSteps, notify]);
-
-const handleConfirmListCapture = useCallback(() => {
-  switch (captureStage) {
-    case 'initial':
-      startPaginationMode();
-      setShowPaginationOptions(true);
-      setCaptureStage('pagination');
-      break;
-
-    case 'pagination':
-      if (!paginationType) {
-        notify('error', 'Please select a pagination type.');
-        return;
-      }
-      const settings = getListSettingsObject();
-      const paginationSelector = settings.pagination?.selector;
-      if (['clickNext', 'clickLoadMore'].includes(paginationType) && !paginationSelector) {
-        notify('error', 'Please select the pagination element first.');
-        return;
-      }
-      stopPaginationMode();
-      setShowPaginationOptions(false);
-      startLimitMode();
-      setShowLimitOptions(true);
-      setCaptureStage('limit');
-      break;
-
-    case 'limit':
-      if (!limitType || (limitType === 'custom' && !customLimit)) {
-        notify('error', 'Please select a limit or enter a custom limit.');
-        return;
-      }
-      const limit = limitType === 'custom' ? parseInt(customLimit) : parseInt(limitType);
-      if (isNaN(limit) || limit <= 0) {
-        notify('error', 'Please enter a valid limit.');
-        return;
-      }
-      stopLimitMode();
-      setShowLimitOptions(false);
-      stopCaptureAndEmitGetListSettings();
-      setCaptureStage('complete');
-      break;
-
-    case 'complete':
-      setCaptureStage('initial');
-      break;
-  }
-}, [
-  captureStage, 
-  paginationType, 
-  limitType, 
-  customLimit, 
-  startPaginationMode, 
-  stopPaginationMode, 
-  startLimitMode, 
-  stopLimitMode, 
-  notify, 
-  stopCaptureAndEmitGetListSettings, 
-  getListSettingsObject
-]);
-
+  }, [captureStage, paginationType, limitType, customLimit, startPaginationMode, stopPaginationMode, startLimitMode, stopLimitMode, notify, stopCaptureAndEmitGetListSettings, getListSettingsObject]);
 
   const handlePaginationSettingSelect = (option: PaginationType) => {
     updatePaginationType(option);

From 8d0fadfa1115752d619def9b45127fb5fa83a806 Mon Sep 17 00:00:00 2001
From: karishmas6 <carishmashukla28@gmail.com>
Date: Thu, 10 Oct 2024 20:15:48 +0530
Subject: [PATCH 4/5] feat: disable confirm capture if unconfirmed fields

---
 src/components/organisms/RightSidePanel.tsx | 35 +++++++++++----------
 1 file changed, 18 insertions(+), 17 deletions(-)

diff --git a/src/components/organisms/RightSidePanel.tsx b/src/components/organisms/RightSidePanel.tsx
index 949a15ad..aa2b319a 100644
--- a/src/components/organisms/RightSidePanel.tsx
+++ b/src/components/organisms/RightSidePanel.tsx
@@ -271,15 +271,11 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
     onFinishCapture();
   }, [stopGetList, getListSettingsObject, socket, notify, handleStopGetList]);
 
+  const hasUnconfirmedListTextFields = browserSteps.some(step => step.type === 'list' && Object.values(step.fields).some(field => !confirmedListTextFields[step.id]?.[field.id]));
+
   const handleConfirmListCapture = useCallback(() => {
     switch (captureStage) {
       case 'initial':
-        const hasUnconfirmedListTextFields = browserSteps.some(step => step.type === 'list' && Object.values(step.fields).some(field => !confirmedListTextFields[step.id]?.[field.id]));
-        if (hasUnconfirmedListTextFields) {
-          notify('error', 'Please confirm all field labels.');
-          return;
-        }
-        startPaginationMode();
         setShowPaginationOptions(true);
         setCaptureStage('pagination');
         break;
@@ -376,17 +372,22 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
       <Box display="flex" flexDirection="column" gap={2} style={{ margin: '15px' }}>
         {!getText && !getScreenshot && !getList && showCaptureList && <Button variant="contained" onClick={startGetList}>Capture List</Button>}
         {getList && (
-          <>
-            <Box display="flex" justifyContent="space-between" gap={2} style={{ margin: '15px' }}>
-              <Button variant="outlined" onClick={handleConfirmListCapture}>
-                {captureStage === 'initial' ? 'Confirm Capture' :
-                  captureStage === 'pagination' ? 'Confirm Pagination' :
-                    captureStage === 'limit' ? 'Confirm Limit' : 'Finish Capture'}
-              </Button>
-              <Button variant="outlined" color="error" onClick={discardGetList}>Discard</Button>
-            </Box>
-          </>
-        )}
+  <>
+    <Box display="flex" justifyContent="space-between" gap={2} style={{ margin: '15px' }}>
+      <Button
+        variant="outlined"
+        onClick={handleConfirmListCapture}
+        disabled={hasUnconfirmedListTextFields}
+      >
+        {captureStage === 'initial' ? 'Confirm Capture' :
+          captureStage === 'pagination' ? 'Confirm Pagination' :
+            captureStage === 'limit' ? 'Confirm Limit' : 'Finish Capture'}
+      </Button>
+      <Button variant="outlined" color="error" onClick={discardGetList}>Discard</Button>
+    </Box>
+  </>
+)}
+
         {showPaginationOptions && (
           <Box display="flex" flexDirection="column" gap={2} style={{ margin: '15px' }}>
             <Typography>How can we find the next list item on the page?</Typography>

From 9a0bea410eb664117adf193b110e383ababc8803 Mon Sep 17 00:00:00 2001
From: karishmas6 <carishmashukla28@gmail.com>
Date: Thu, 10 Oct 2024 20:16:07 +0530
Subject: [PATCH 5/5] chore: lint

---
 src/components/organisms/RightSidePanel.tsx | 33 ++++++++++-----------
 1 file changed, 16 insertions(+), 17 deletions(-)

diff --git a/src/components/organisms/RightSidePanel.tsx b/src/components/organisms/RightSidePanel.tsx
index aa2b319a..88307086 100644
--- a/src/components/organisms/RightSidePanel.tsx
+++ b/src/components/organisms/RightSidePanel.tsx
@@ -120,7 +120,7 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
     setHoverStates(prev => ({ ...prev, [id]: false }));
   };
 
-  const handlePairDelete = () => {}
+  const handlePairDelete = () => { }
 
   const handleTextLabelChange = (id: number, label: string, listId?: number, fieldKey?: string) => {
     if (listId !== undefined && fieldKey !== undefined) {
@@ -372,22 +372,21 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
       <Box display="flex" flexDirection="column" gap={2} style={{ margin: '15px' }}>
         {!getText && !getScreenshot && !getList && showCaptureList && <Button variant="contained" onClick={startGetList}>Capture List</Button>}
         {getList && (
-  <>
-    <Box display="flex" justifyContent="space-between" gap={2} style={{ margin: '15px' }}>
-      <Button
-        variant="outlined"
-        onClick={handleConfirmListCapture}
-        disabled={hasUnconfirmedListTextFields}
-      >
-        {captureStage === 'initial' ? 'Confirm Capture' :
-          captureStage === 'pagination' ? 'Confirm Pagination' :
-            captureStage === 'limit' ? 'Confirm Limit' : 'Finish Capture'}
-      </Button>
-      <Button variant="outlined" color="error" onClick={discardGetList}>Discard</Button>
-    </Box>
-  </>
-)}
-
+          <>
+            <Box display="flex" justifyContent="space-between" gap={2} style={{ margin: '15px' }}>
+              <Button
+                variant="outlined"
+                onClick={handleConfirmListCapture}
+                disabled={hasUnconfirmedListTextFields}
+              >
+                {captureStage === 'initial' ? 'Confirm Capture' :
+                  captureStage === 'pagination' ? 'Confirm Pagination' :
+                    captureStage === 'limit' ? 'Confirm Limit' : 'Finish Capture'}
+              </Button>
+              <Button variant="outlined" color="error" onClick={discardGetList}>Discard</Button>
+            </Box>
+          </>
+        )}
         {showPaginationOptions && (
           <Box display="flex" flexDirection="column" gap={2} style={{ margin: '15px' }}>
             <Typography>How can we find the next list item on the page?</Typography>