feat: set capture stage in browser actions context

src/context/browserActions.tsx

@@ -3,6 +3,7 @@ import { useSocketStore } from './socket';
 
 export type PaginationType = 'scrollDown' | 'scrollUp' | 'clickNext' | 'clickLoadMore' | 'none' | '';
 export type LimitType = '10' | '100' | 'custom' | '';
+export type CaptureStage = 'initial' | 'pagination' | 'limit' | 'complete';
 
 interface ActionContextProps {
     getText: boolean;
@@ -13,6 +14,8 @@ interface ActionContextProps {
     paginationType: PaginationType;
     limitType: LimitType;
     customLimit: string;
+    captureStage: CaptureStage; // New captureStage property
+    setCaptureStage: (stage: CaptureStage) => void; // Setter for captureStage
     startPaginationMode: () => void;
     startGetText: () => void;
     stopGetText: () => void;
@@ -39,17 +42,26 @@ export const ActionProvider = ({ children }: { children: ReactNode }) => {
     const [paginationType, setPaginationType] = useState<PaginationType>('');
     const [limitType, setLimitType] = useState<LimitType>('');
     const [customLimit, setCustomLimit] = useState<string>('');
+    const [captureStage, setCaptureStage] = useState<CaptureStage>('initial'); // New captureStage state
 
-    const {socket} = useSocketStore();
+    const { socket } = useSocketStore();
 
     const updatePaginationType = (type: PaginationType) => setPaginationType(type);
     const updateLimitType = (type: LimitType) => setLimitType(type);
     const updateCustomLimit = (limit: string) => setCustomLimit(limit);
 
-    const startPaginationMode = () => setPaginationMode(true);
+    const startPaginationMode = () => {
+        setPaginationMode(true);
+        setCaptureStage('pagination');
+    };
+
     const stopPaginationMode = () => setPaginationMode(false);
 
-    const startLimitMode = () => setLimitMode(true);
+    const startLimitMode = () => {
+        setLimitMode(true);
+        setCaptureStage('limit');
+    };
+
     const stopLimitMode = () => setLimitMode(false);
 
     const startGetText = () => setGetText(true);
@@ -59,35 +71,38 @@ export const ActionProvider = ({ children }: { children: ReactNode }) => {
         setGetList(true);
         socket?.emit('setGetList', { getList: true });
     }
-        
+
     const stopGetList = () => {
         setGetList(false);
         socket?.emit('setGetList', { getList: false });
         setPaginationType('');
         setLimitType('');
         setCustomLimit('');
+        setCaptureStage('initial'); // Reset captureStage when stopping getList
     };
 
     const startGetScreenshot = () => setGetScreenshot(true);
     const stopGetScreenshot = () => setGetScreenshot(false);
 
     return (
-        <ActionContext.Provider value={{ 
+        <ActionContext.Provider value={{
-            getText, 
+            getText,
-            getList, 
+            getList,
-            getScreenshot, 
+            getScreenshot,
-            paginationMode, 
+            paginationMode,
             limitMode,
-            paginationType, 
+            paginationType,
             limitType,
             customLimit,
-            startGetText, 
+            captureStage,
-            stopGetText, 
+            setCaptureStage,
-            startGetList, 
+            startGetText,
-            stopGetList, 
+            stopGetText,
-            startGetScreenshot, 
+            startGetList,
-            stopGetScreenshot, 
+            stopGetList,
-            startPaginationMode, 
+            startGetScreenshot,
+            stopGetScreenshot,
+            startPaginationMode,
             stopPaginationMode,
             startLimitMode,
             stopLimitMode,
@@ -106,4 +121,4 @@ export const useActionContext = () => {
         throw new Error('useActionContext must be used within an ActionProvider');
     }
     return context;
-};
+};

src/context/userViewportDimensions.tsx

@@ -1,38 +0,0 @@
-import React, { useState, useEffect } from 'react';
-
-interface Dimensions {
-    width: number;
-    height: number;
-}
-
-const UserViewportDimensions: React.FC = () => {
-    const [dimensions, setDimensions] = useState<Dimensions>({
-        width: window.innerWidth,
-        height: window.innerHeight,
-    });
-
-    const handleResize = () => {
-        setDimensions({
-            width: window.innerWidth,
-            height: window.innerHeight,
-        });
-    };
-
-    useEffect(() => {
-        window.addEventListener('resize', handleResize);
-
-        return () => {
-            window.removeEventListener('resize', handleResize);
-        };
-    }, []);
-
-    return (
-        <div>
-            <h1>User Viewport Dimensions</h1>
-            <p>Width: {dimensions.width}px</p>
-            <p>Height: {dimensions.height}px</p>
-        </div>
-    );
-};
-
-export default UserViewportDimensions;