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

feat(wip): use browser steps context

Browse Source
This commit is contained in:
karishmas6
2024-07-26 22:53:36 +05:30
parent 1f15857fef
commit 6f2fb330cf
1 changed files with 21 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -9,6 +9,7 @@ import Typography from "@mui/material/Typography";
import { useGlobalInfoStore } from "../../context/globalInfo"; import { useGlobalInfoStore } from "../../context/globalInfo";
import { PairForEdit } from "../../pages/RecordingPage"; import { PairForEdit } from "../../pages/RecordingPage";
import { useActionContext } from '../../context/browserActions'; import { useActionContext } from '../../context/browserActions';
import { useBrowserSteps } from '../../context/browserSteps';
interface RightSidePanelProps { interface RightSidePanelProps {
pairForEdit: PairForEdit; pairForEdit: PairForEdit;
@@ -24,12 +25,12 @@ export const RightSidePanel = ({ pairForEdit }: RightSidePanelProps) => {
const [content, setContent] = useState<string>('action'); const [content, setContent] = useState<string>('action');
const [action, setAction] = useState<string>(''); const [action, setAction] = useState<string>('');
const [isSettingsDisplayed, setIsSettingsDisplayed] = useState<boolean>(false); const [isSettingsDisplayed, setIsSettingsDisplayed] = useState<boolean>(false);
const [browserSteps, setBrowserSteps] = useState<BrowserStep[]>([]);
const [stepLabel, setStepLabel] = useState<string>(''); const [stepLabel, setStepLabel] = useState<string>('');
const [stepDescription, setStepDescription] = useState<string>(''); const [stepDescription, setStepDescription] = useState<string>('');
const { lastAction } = useGlobalInfoStore(); const { lastAction } = useGlobalInfoStore();
const { getText, getScreenshot, startGetText, stopGetText, startGetScreenshot, stopGetScreenshot } = useActionContext(); const { getText, getScreenshot, startGetText, stopGetText, startGetScreenshot, stopGetScreenshot } = useActionContext();
const { browserSteps } = useBrowserSteps();
const handleChange = (event: React.SyntheticEvent, newValue: string) => { const handleChange = (event: React.SyntheticEvent, newValue: string) => {
setContent(newValue); setContent(newValue);
@@ -41,19 +42,19 @@ export const RightSidePanel = ({ pairForEdit }: RightSidePanelProps) => {
setIsSettingsDisplayed(true); setIsSettingsDisplayed(true);
}; };
const confirmStep = () => { // const confirmStep = () => {
setBrowserSteps([ // setBrowserSteps([
...browserSteps, // ...browserSteps,
{ id: Date.now(), label: stepLabel, description: stepDescription } // { id: Date.now(), label: stepLabel, description: stepDescription }
]); // ]);
setStepLabel(''); // setStepLabel('');
setStepDescription(''); // setStepDescription('');
}; // };
const discardStep = () => { // const discardStep = () => {
setStepLabel(''); // setStepLabel('');
setStepDescription(''); // setStepDescription('');
}; // };
return ( return (
<Paper <Paper
@@ -120,35 +121,14 @@ export const RightSidePanel = ({ pairForEdit }: RightSidePanelProps) => {
)} )}
</Box> </Box>
<Box display="flex" flexDirection="column" gap={2} style={{ margin: '15px' }}> <Box>
<TextField {browserSteps.map(step => (
label="Label" <Box key={step.id} sx={{ border: '1px solid black', padding: '10px' }}>
value={stepLabel} <Typography variant="h6">{step.label}</Typography>
onChange={(e) => setStepLabel(e.target.value)} <Typography>{step.value}</Typography>
/> </Box>
<TextField ))}
label="Description"
value={stepDescription}
onChange={(e) => setStepDescription(e.target.value)}
/>
<Box display="flex" justifyContent="space-between" gap={2}>
<Button variant="contained" onClick={confirmStep}>
Confirm
</Button>
<Button variant="contained" onClick={discardStep}>
Discard
</Button>
</Box> </Box>
</Box>
<Box display="flex" flexDirection="column" gap={2} style={{ margin: '15px' }}>
{browserSteps.map(step => (
<Box key={step.id} sx={{ border: '1px solid black', padding: '10px' }}>
<Typography variant="h6">{step.label}</Typography>
<Typography>{step.description}</Typography>
</Box>
))}
</Box>
</Paper> </Paper>
); );
}; };