feat: alert when list selector is added

This commit is contained in:
karishmas6
2024-10-25 17:19:59 +05:30
parent 711cdf1781
commit 4e1512c815

View File

@@ -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);
} }
} }
} } }
} }
}; };