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

feat: use pagination type from global context

Browse Source
This commit is contained in:
karishmas6
2024-09-06 23:42:26 +05:30
parent 3e14fee663
commit 75582c3426
1 changed files with 14 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/components/organisms/RightSidePanel.tsx
View File

@@ -23,10 +23,9 @@ export const RightSidePanel = () => {
const [errors, setErrors] = useState<{ [id: number]: string }>({}); const [errors, setErrors] = useState<{ [id: number]: string }>({});
const [confirmedTextSteps, setConfirmedTextSteps] = useState<{ [id: number]: boolean }>({}); const [confirmedTextSteps, setConfirmedTextSteps] = useState<{ [id: number]: boolean }>({});
const [showPaginationOptions, setShowPaginationOptions] = useState(false); const [showPaginationOptions, setShowPaginationOptions] = useState(false);
const [selectedPaginationSetting, setSelectedPaginationSetting] = useState<string>('');
const { lastAction, notify } = useGlobalInfoStore(); const { lastAction, notify } = useGlobalInfoStore();
const { getText, startGetText, stopGetText, getScreenshot, startGetScreenshot, stopGetScreenshot, paginationMode, getList, startGetList, stopGetList, startPaginationMode, stopPaginationMode } = useActionContext(); const { getText, startGetText, stopGetText, getScreenshot, startGetScreenshot, stopGetScreenshot, paginationMode, getList, startGetList, stopGetList, startPaginationMode, stopPaginationMode, paginationType, updatePaginationType } = useActionContext();
const { browserSteps, updateBrowserTextStepLabel, deleteBrowserStep, addScreenshotStep } = useBrowserSteps(); const { browserSteps, updateBrowserTextStepLabel, deleteBrowserStep, addScreenshotStep } = useBrowserSteps();
const { socket } = useSocketStore(); const { socket } = useSocketStore();
@@ -110,18 +109,18 @@ export const RightSidePanel = () => {
settings = { settings = {
listSelector: step.listSelector, listSelector: step.listSelector,
fields: fields, fields: fields,
pagination: { type: selectedPaginationSetting, selector: step.pagination?.selector }, pagination: { type: paginationType, selector: step.pagination?.selector },
}; };
} }
}); });
return settings; return settings;
}, [browserSteps, selectedPaginationSetting]); }, [browserSteps, paginationType]);
const resetListState = useCallback(() => { const resetListState = useCallback(() => {
setShowPaginationOptions(false); setShowPaginationOptions(false);
setSelectedPaginationSetting(''); updatePaginationType('');
}, []); }, []);
const handleStopGetList = useCallback(() => { const handleStopGetList = useCallback(() => {
@@ -145,13 +144,13 @@ export const RightSidePanel = () => {
if (!paginationMode) { if (!paginationMode) {
startPaginationMode(); startPaginationMode();
} }
if (!selectedPaginationSetting) { if (!paginationType) {
setShowPaginationOptions(true); setShowPaginationOptions(true);
return; return;
} }
const settings = getListSettingsObject(); const settings = getListSettingsObject();
const paginationSelector = settings.pagination?.selector const paginationSelector = settings.pagination?.selector
if (['clickNext', 'clickLoadMore'].includes(selectedPaginationSetting)) { if (['clickNext', 'clickLoadMore'].includes(paginationType)) {
if (paginationSelector === '') { if (paginationSelector === '') {
notify('error', 'Please select the pagination element first.'); notify('error', 'Please select the pagination element first.');
return; return;
@@ -159,11 +158,11 @@ export const RightSidePanel = () => {
} }
stopCaptureAndEmitGetListSettings(); stopCaptureAndEmitGetListSettings();
setShowPaginationOptions(false); setShowPaginationOptions(false);
setSelectedPaginationSetting(''); updatePaginationType('');
}, [selectedPaginationSetting, stopCaptureAndEmitGetListSettings, notify]); }, [paginationType, stopCaptureAndEmitGetListSettings, notify]);
const handlePaginationSettingSelect = (option: string) => { const handlePaginationSettingSelect = (option: string) => {
setSelectedPaginationSetting(option); updatePaginationType(option);
if (['clickNext', 'clickLoadMore'].includes(option)) { if (['clickNext', 'clickLoadMore'].includes(option)) {
} }
}; };
@@ -202,11 +201,11 @@ export const RightSidePanel = () => {
{showPaginationOptions && ( {showPaginationOptions && (
<Box display="flex" flexDirection="column" gap={2} style={{ margin: '15px' }}> <Box display="flex" flexDirection="column" gap={2} style={{ margin: '15px' }}>
<Typography>How can we find the next list item on the page?</Typography> <Typography>How can we find the next list item on the page?</Typography>
<Button variant={selectedPaginationSetting === 'clickNext' ? "contained" : "outlined"} onClick={() => handlePaginationSettingSelect('clickNext')}>Click on next to navigate to the next page</Button> <Button variant={paginationType === 'clickNext' ? "contained" : "outlined"} onClick={() => handlePaginationSettingSelect('clickNext')}>Click on next to navigate to the next page</Button>
<Button variant={selectedPaginationSetting === 'clickLoadMore' ? "contained" : "outlined"} onClick={() => handlePaginationSettingSelect('clickLoadMore')}>Click on load more to load more items</Button> <Button variant={paginationType === 'clickLoadMore' ? "contained" : "outlined"} onClick={() => handlePaginationSettingSelect('clickLoadMore')}>Click on load more to load more items</Button>
<Button variant={selectedPaginationSetting === 'scrollDown' ? "contained" : "outlined"} onClick={() => handlePaginationSettingSelect('scrollDown')}>Scroll down to load more items</Button> <Button variant={paginationType === 'scrollDown' ? "contained" : "outlined"} onClick={() => handlePaginationSettingSelect('scrollDown')}>Scroll down to load more items</Button>
<Button variant={selectedPaginationSetting === 'scrollUp' ? "contained" : "outlined"} onClick={() => handlePaginationSettingSelect('scrollUp')}>Scroll up to load more items</Button> <Button variant={paginationType === 'scrollUp' ? "contained" : "outlined"} onClick={() => handlePaginationSettingSelect('scrollUp')}>Scroll up to load more items</Button>
<Button variant={selectedPaginationSetting === 'none' ? "contained" : "outlined"} onClick={() => handlePaginationSettingSelect('none')}>No more items to load</Button> <Button variant={paginationType === 'none' ? "contained" : "outlined"} onClick={() => handlePaginationSettingSelect('none')}>No more items to load</Button>
</Box> </Box>
)} )}