vodorod/parcer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: isolate field for state updates

Browse Source
This commit is contained in:
karishmas6
2024-08-09 07:38:18 +05:30
parent 1a6f4b5b3c
commit 99ccaed16a
1 changed files with 39 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
src/components/organisms/BrowserWindow.tsx
View File

@@ -105,12 +105,12 @@ export const BrowserWindow = () => {
}; };
}, [socket, onMouseMove]); }, [socket, onMouseMove]);
const handleClick = (e: React.MouseEvent<HTMLDivElement>) => { const handleClick = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
if (highlighterData && canvasRef?.current) { if (highlighterData && canvasRef?.current) {
const canvasRect = canvasRef.current.getBoundingClientRect(); const canvasRect = canvasRef.current.getBoundingClientRect();
const clickX = e.clientX - canvasRect.left; const clickX = e.clientX - canvasRect.left;
const clickY = e.clientY - canvasRect.top; const clickY = e.clientY - canvasRect.top;
const highlightRect = highlighterData.rect; const highlightRect = highlighterData.rect;
if ( if (
clickX >= highlightRect.left && clickX >= highlightRect.left &&
@@ -134,11 +134,10 @@ export const BrowserWindow = () => {
attribute: 'innerText' attribute: 'innerText'
}); });
} }
} }
if (getList === true && !listSelector) { if (getList === true && !listSelector) {
setListSelector(highlighterData.selector); setListSelector(highlighterData.selector);
//console.log('added list selector', highlighterData.selector);
} else if (getList === true && listSelector) { } else if (getList === true && listSelector) {
const options = getAttributeOptions(highlighterData.elementInfo?.tagName || ''); const options = getAttributeOptions(highlighterData.elementInfo?.tagName || '');
if (options.length > 1) { if (options.length > 1) {
@@ -149,10 +148,9 @@ export const BrowserWindow = () => {
}); });
setShowAttributeModal(true); setShowAttributeModal(true);
} else { } else {
// When setting fields, ensure it matches the TextStep structure
const newField: TextStep = { const newField: TextStep = {
id: Date.now(), id: Date.now(),
type: 'text', // or another appropriate type type: 'text',
label: `label ${Object.keys(fields).length + 1}`, label: `label ${Object.keys(fields).length + 1}`,
data: highlighterData.elementInfo?.innerText || '', data: highlighterData.elementInfo?.innerText || '',
selectorObj: { selectorObj: {
@@ -161,38 +159,49 @@ export const BrowserWindow = () => {
attribute: 'innerText' attribute: 'innerText'
} }
}; };
//console.log('added new field:', newField)
setFields(prevFields => ({
...prevFields,
[newField.id]: newField
}));
// if (Object.keys(updatedFields).length > 0 && listSelector) {
// console.log('listSelector before addListStep:', listSelector);
// console.log('fields before addListStep:', updatedFields);
// addListStep(listSelector, updatedFields); // Use a callback to update the state after rendering
// console.log('Called addListStep with:', { listSelector, updatedFields }); setTimeout(() => {
// } processFieldsUpdate(newField);
}, 0);
} }
} }
} }
} }
}, [highlighterData, canvasRef, getText, getList, listSelector, fields, addTextStep, addListStep]);
const processFieldsUpdate = (newField: TextStep) => {
setFields(prevFields => {
const updatedFields = {
...prevFields,
[newField.id]: newField
};
if (Object.keys(updatedFields).length > 0 && listSelector) {
addListStep(listSelector, updatedFields);
console.log('Called addListStep with:', { listSelector, updatedFields })
// Reset the state after adding the step
setListSelector(null);
setFields({});
}
return updatedFields;
});
}; };
// useEffect(() => { // useEffect(() => {
// // Save the ListStep after the fields are set // // Save the ListStep after the fields are set
// if (Object.keys(fields).length > 0 && listSelector) { // if (Object.keys(fields).length > 0 && listSelector) {
// addListStep(listSelector, fields); // console.log('listSelector before addListStep:', listSelector);
// // Reset after adding the step // console.log('fields before addListStep:', fields)
// setListSelector(null); // // ;
// setFields({}); // addListStep(listSelector, fields);
// } // console.log('Called addListStep with:', { listSelector, fields })
// // Reset after adding the step
// //setListSelector(null);
// // setFields({});
// }
// }, [fields, listSelector, addListStep]); // }, [fields, listSelector, addListStep]);
const handleAttributeSelection = (attribute: string) => { const handleAttributeSelection = (attribute: string) => {