feat: alert when list selector is added
This commit is contained in:
@@ -6,6 +6,7 @@ import { Highlighter } from "../atoms/Highlighter";
|
|||||||
import { GenericModal } from '../atoms/GenericModal';
|
import { GenericModal } from '../atoms/GenericModal';
|
||||||
import { useActionContext } from '../../context/browserActions';
|
import { useActionContext } from '../../context/browserActions';
|
||||||
import { useBrowserSteps, TextStep } from '../../context/browserSteps';
|
import { useBrowserSteps, TextStep } from '../../context/browserSteps';
|
||||||
|
import { useGlobalInfoStore } from "../../context/globalInfo"
|
||||||
|
|
||||||
interface ElementInfo {
|
interface ElementInfo {
|
||||||
tagName: string;
|
tagName: string;
|
||||||
@@ -63,6 +64,7 @@ export const BrowserWindow = () => {
|
|||||||
const [paginationSelector, setPaginationSelector] = useState<string>('');
|
const [paginationSelector, setPaginationSelector] = useState<string>('');
|
||||||
|
|
||||||
const { socket } = useSocketStore();
|
const { socket } = useSocketStore();
|
||||||
|
const { notify } = useGlobalInfoStore()
|
||||||
//const { width, height } = useBrowserDimensionsStore();
|
//const { width, height } = useBrowserDimensionsStore();
|
||||||
const { getText, getList, paginationMode, paginationType, limitMode } = useActionContext();
|
const { getText, getList, paginationMode, paginationType, limitMode } = useActionContext();
|
||||||
const { addTextStep, addListStep } = useBrowserSteps();
|
const { addTextStep, addListStep } = useBrowserSteps();
|
||||||
@@ -83,6 +85,8 @@ export const BrowserWindow = () => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const resetListState = useCallback(() => {
|
const resetListState = useCallback(() => {
|
||||||
|
socket?.emit('listSelector', { selector: null });
|
||||||
|
notify(`info`, 'listSelector reset');
|
||||||
setListSelector(null);
|
setListSelector(null);
|
||||||
setFields({});
|
setFields({});
|
||||||
setCurrentListId(null);
|
setCurrentListId(null);
|
||||||
@@ -91,7 +95,7 @@ export const BrowserWindow = () => {
|
|||||||
setShowAttributeModal(false);
|
setShowAttributeModal(false);
|
||||||
setSelectedElement(null);
|
setSelectedElement(null);
|
||||||
setAttributeOptions([]);
|
setAttributeOptions([]);
|
||||||
}, []);
|
}, [socket]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!getList) {
|
if (!getList) {
|
||||||
@@ -117,10 +121,19 @@ export const BrowserWindow = () => {
|
|||||||
}
|
}
|
||||||
}, [screenShot, canvasRef, socket, screencastHandler]);
|
}, [screenShot, canvasRef, socket, screencastHandler]);
|
||||||
|
|
||||||
|
// Watch for changes in listSelector
|
||||||
|
useEffect(() => {
|
||||||
|
if (listSelector) {
|
||||||
|
notify(`info`,`List selector updated to: ${listSelector}`);
|
||||||
|
// socket?.emit('listSelector', { selector: listSelector });
|
||||||
|
}
|
||||||
|
}, [listSelector, socket]);
|
||||||
|
|
||||||
const highlighterHandler = useCallback((data: { rect: DOMRect, selector: string, elementInfo: ElementInfo | null, childSelectors?: string[] }) => {
|
const highlighterHandler = useCallback((data: { rect: DOMRect, selector: string, elementInfo: ElementInfo | null, childSelectors?: string[] }) => {
|
||||||
if (getList === true) {
|
if (getList === true) {
|
||||||
if (listSelector) {
|
if (listSelector) {
|
||||||
socket?.emit('listSelector', { selector: listSelector });
|
socket?.emit('listSelector', { selector: listSelector });
|
||||||
|
notify(`info`, `Setting new list selector to: ${listSelector}`);
|
||||||
if (limitMode) {
|
if (limitMode) {
|
||||||
setHighlighterData(null);
|
setHighlighterData(null);
|
||||||
} else if (paginationMode) {
|
} else if (paginationMode) {
|
||||||
@@ -138,14 +151,16 @@ export const BrowserWindow = () => {
|
|||||||
setHighlighterData(null);
|
setHighlighterData(null);
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
// set highlighterData for the initial listSelector selection
|
// Clear any existing highlighter data before setting new data
|
||||||
setHighlighterData(data);
|
// This ensures we start fresh when selecting a new list selector
|
||||||
|
setHighlighterData(null);
|
||||||
|
setTimeout(() => setHighlighterData(data), 0);
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
// for non-list steps
|
// for non-list steps
|
||||||
setHighlighterData(data);
|
setHighlighterData(data);
|
||||||
}
|
}
|
||||||
}, [getList, socket, listSelector, paginationMode, paginationType]);
|
}, [getList, socket, listSelector, paginationMode, paginationType, limitMode]);
|
||||||
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@@ -207,11 +222,12 @@ export const BrowserWindow = () => {
|
|||||||
}
|
}
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
if (getList === true) {
|
||||||
if (getList === true && !listSelector) {
|
if (!listSelector) {
|
||||||
|
setFields({});
|
||||||
|
setPaginationSelector('');
|
||||||
setListSelector(highlighterData.selector);
|
setListSelector(highlighterData.selector);
|
||||||
setCurrentListId(Date.now());
|
setCurrentListId(Date.now());
|
||||||
setFields({});
|
|
||||||
} else if (getList === true && listSelector && currentListId) {
|
} else if (getList === true && listSelector && currentListId) {
|
||||||
// Add fields to the list
|
// Add fields to the list
|
||||||
if (options.length === 1) {
|
if (options.length === 1) {
|
||||||
@@ -252,7 +268,7 @@ export const BrowserWindow = () => {
|
|||||||
setShowAttributeModal(true);
|
setShowAttributeModal(true);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
} }
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user