diff --git a/src/components/organisms/RightSidePanel.tsx b/src/components/organisms/RightSidePanel.tsx index 46202ac3..5242cbc3 100644 --- a/src/components/organisms/RightSidePanel.tsx +++ b/src/components/organisms/RightSidePanel.tsx @@ -13,7 +13,7 @@ export const RightSidePanel = () => { const [textLabels, setTextLabels] = useState<{ [id: number]: string }>({}); const [errors, setErrors] = useState<{ [id: number]: string }>({}); const [confirmedTextSteps, setConfirmedTextSteps] = useState<{ [id: number]: boolean }>({}); - + const { lastAction } = useGlobalInfoStore(); const { getText, getScreenshot, startGetText, stopGetText, startGetScreenshot, stopGetScreenshot } = useActionContext(); const { browserSteps, updateBrowserTextStepLabel, deleteBrowserStep, addScreenshotStep } = useBrowserSteps(); @@ -21,11 +21,10 @@ export const RightSidePanel = () => { const handleTextLabelChange = (id: number, label: string) => { setTextLabels(prevLabels => ({ ...prevLabels, [id]: label })); - if (!label.trim()) { - setErrors(prevErrors => ({ ...prevErrors, [id]: 'Label cannot be empty' })); - } else { - setErrors(prevErrors => ({ ...prevErrors, [id]: '' })); - } + setErrors(prevErrors => ({ + ...prevErrors, + [id]: label.trim() ? '' : 'Label cannot be empty' + })); }; const handleTextStepConfirm = (id: number) => { @@ -51,7 +50,7 @@ export const RightSidePanel = () => { }; const getTextSettingsObject = useCallback(() => { - const settings: Record = {}; + const settings: Record = {}; browserSteps.forEach(step => { if (step.type === 'text' && step.label && step.selectorObj?.selector) { settings[step.label] = step.selectorObj; @@ -60,7 +59,6 @@ export const RightSidePanel = () => { return settings; }, [browserSteps]); - const stopCaptureAndEmitGetTextSettings = useCallback(() => { stopGetText(); const settings = getTextSettingsObject(); @@ -70,7 +68,6 @@ export const RightSidePanel = () => { } }, [stopGetText, getTextSettingsObject, socket, browserSteps]); - const captureScreenshot = (fullPage: boolean) => { const screenshotSettings: ScreenshotSettings = { fullPage, @@ -84,6 +81,14 @@ export const RightSidePanel = () => { addScreenshotStep(fullPage); }; + const handleBack = () => { + if (getText) { + stopGetText(); + } else if (getScreenshot) { + stopGetScreenshot(); + } + }; + return ( @@ -92,60 +97,62 @@ export const RightSidePanel = () => { {!getText && !getScreenshot && } - {getText && } + {getText && } {!getText && !getScreenshot && } {getScreenshot && ( - )} - { - getText || getScreenshot ? ( + {(getText || getScreenshot) && ( + + + + + + {browserSteps.map(step => ( - { - step.type === 'text' ? ( - <> - handleTextLabelChange(step.id, e.target.value)} - fullWidth - margin="normal" - error={!!errors[step.id]} - helperText={errors[step.id]} - InputProps={{ readOnly: confirmedTextSteps[step.id] }} - /> - - {!confirmedTextSteps[step.id] && ( - - - - - )} - - ) : ( - step.type === 'screenshot' && ( - {`Take ${step.fullPage ? 'Fullpage' : 'Visible Part'} Screenshot`} - ) + {step.type === 'text' ? ( + <> + handleTextLabelChange(step.id, e.target.value)} + fullWidth + margin="normal" + error={!!errors[step.id]} + helperText={errors[step.id]} + InputProps={{ readOnly: confirmedTextSteps[step.id] }} + /> + + {!confirmedTextSteps[step.id] && ( + + + + + )} + + ) : ( + step.type === 'screenshot' && ( + {`Take ${step.fullPage ? 'Fullpage' : 'Visible Part'} Screenshot`} ) - } + )} ))} - ) : null - } + + )} ); };