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

chore: lint

Browse Source
This commit is contained in:
amhsirak
2025-01-09 19:16:58 +05:30
parent cc369c5332
commit 1842ebbda6
1 changed files with 133 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

267
src/components/molecules/PairDetail.tsx
View File

@@ -34,7 +34,7 @@ export const PairDetail = ({ pair, index }: PairDetailProps) => {
const { socket } = useSocketStore(); const { socket } = useSocketStore();
const handleCollapseWhere = () => { const handleCollapseWhere = () => {
setCollapseWhere(!collapseWhere); setCollapseWhere(!collapseWhere);
} }
const handleCollapseWhat = () => { const handleCollapseWhat = () => {
@@ -51,26 +51,26 @@ export const PairDetail = ({ pair, index }: PairDetailProps) => {
} }
}, [pair]) }, [pair])
const handleChangeValue = (value: any, where: boolean, keys: (string|number)[]) => { const handleChangeValue = (value: any, where: boolean, keys: (string | number)[]) => {
// a moving reference to internal objects within pair.where or pair.what // a moving reference to internal objects within pair.where or pair.what
let schema: any = where ? pair?.where : pair?.what; let schema: any = where ? pair?.where : pair?.what;
const length = keys.length; const length = keys.length;
for(let i = 0; i < length-1; i++) { for (let i = 0; i < length - 1; i++) {
const elem = keys[i]; const elem = keys[i];
if( !schema[elem] ) schema[elem] = {} if (!schema[elem]) schema[elem] = {}
schema = schema[elem]; schema = schema[elem];
} }
schema[keys[length-1]] = value; schema[keys[length - 1]] = value;
if (pair && socket) { if (pair && socket) {
socket.emit('updatePair', {index: index-1, pair: pair}); socket.emit('updatePair', { index: index - 1, pair: pair });
} }
setRerender(!rerender); setRerender(!rerender);
} }
const DisplayValueContent = (value: any, keys: (string|number)[], where: boolean = true) => { const DisplayValueContent = (value: any, keys: (string | number)[], where: boolean = true) => {
switch (typeof(value)) { switch (typeof (value)) {
case 'string': case 'string':
return <TextField return <TextField
size='small' size='small'
@@ -105,26 +105,26 @@ export const PairDetail = ({ pair, index }: PairDetailProps) => {
<React.Fragment> <React.Fragment>
{ {
value.map((element, index) => { value.map((element, index) => {
return DisplayValueContent(element, [...keys, index], where); return DisplayValueContent(element, [...keys, index], where);
}) })
} }
<AddButton handleClick={()=> { <AddButton handleClick={() => {
let prevValue:any = where ? pair?.where : pair?.what; let prevValue: any = where ? pair?.where : pair?.what;
for (const key of keys) { for (const key of keys) {
prevValue = prevValue[key]; prevValue = prevValue[key];
} }
handleChangeValue([...prevValue, ''], where, keys); handleChangeValue([...prevValue, ''], where, keys);
setRerender(!rerender); setRerender(!rerender);
}} hoverEffect={false}/> }} hoverEffect={false} />
<RemoveButton handleClick={()=> { <RemoveButton handleClick={() => {
let prevValue:any = where ? pair?.where : pair?.what; let prevValue: any = where ? pair?.where : pair?.what;
for (const key of keys) { for (const key of keys) {
prevValue = prevValue[key]; prevValue = prevValue[key];
} }
prevValue.splice(-1); prevValue.splice(-1);
handleChangeValue(prevValue, where, keys); handleChangeValue(prevValue, where, keys);
setRerender(!rerender); setRerender(!rerender);
}}/> }} />
</React.Fragment> </React.Fragment>
) )
} else { } else {
@@ -136,11 +136,10 @@ export const PairDetail = ({ pair, index }: PairDetailProps) => {
key={`tree-view-nested-${keys.join('-')}-${where}`} key={`tree-view-nested-${keys.join('-')}-${where}`}
> >
{ {
Object.keys(value).map((key2, index) => Object.keys(value).map((key2, index) => {
{
return ( return (
<TreeItem nodeId={`${key2}-${index}`} label={`${key2}:`} key={`${key2}-${index}`}> <TreeItem nodeId={`${key2}-${index}`} label={`${key2}:`} key={`${key2}-${index}`}>
{ DisplayValueContent(value[key2], [...keys, key2], where) } {DisplayValueContent(value[key2], [...keys, key2], where)}
</TreeItem> </TreeItem>
) )
}) })
@@ -157,132 +156,132 @@ export const PairDetail = ({ pair, index }: PairDetailProps) => {
return ( return (
<React.Fragment> <React.Fragment>
{ pair && {pair &&
<React.Fragment> <React.Fragment>
<AddWhatCondModal isOpen={addWhatCondOpen} onClose={() => setAddWhatCondOpen(false)} <AddWhatCondModal isOpen={addWhatCondOpen} onClose={() => setAddWhatCondOpen(false)}
pair={pair} index={index}/> pair={pair} index={index} />
<AddWhereCondModal isOpen={addWhereCondOpen} onClose={() => setAddWhereCondOpen(false)} <AddWhereCondModal isOpen={addWhereCondOpen} onClose={() => setAddWhereCondOpen(false)}
pair={pair} index={index}/> pair={pair} index={index} />
</React.Fragment> </React.Fragment>
} }
{ {
pairIsSelected pairIsSelected
? ( ? (
<div style={{padding: '10px', overflow: 'hidden'}}> <div style={{ padding: '10px', overflow: 'hidden' }}>
<Typography>Pair number: {index}</Typography> <Typography>Pair number: {index}</Typography>
<TextField <TextField
size='small' size='small'
label='id' label='id'
onChange={(e) => { onChange={(e) => {
if (pair && socket) { if (pair && socket) {
socket.emit('updatePair', {index: index-1, pair: pair}); socket.emit('updatePair', { index: index - 1, pair: pair });
pair.id = e.target.value; pair.id = e.target.value;
} }
}} }}
value={pair ? pair.id ? pair.id : '' : ''} value={pair ? pair.id ? pair.id : '' : ''}
/>
<Stack spacing={0} direction='row' sx={{
display: 'flex',
alignItems: 'center',
background: 'lightGray',
}}>
<CollapseButton
handleClick={handleCollapseWhere}
isCollapsed={collapseWhere}
/> />
<Typography>Where</Typography> <Stack spacing={0} direction='row' sx={{
<Tooltip title='Add where condition' placement='right'> display: 'flex',
<div> alignItems: 'center',
<AddButton handleClick={()=> { background: 'lightGray',
setAddWhereCondOpen(true); }}>
}} style={{color:'rgba(0, 0, 0, 0.54)', background:'transparent'}}/> <CollapseButton
</div> handleClick={handleCollapseWhere}
</Tooltip> isCollapsed={collapseWhere}
</Stack> />
<Typography>Where</Typography>
<Tooltip title='Add where condition' placement='right'>
<div>
<AddButton handleClick={() => {
setAddWhereCondOpen(true);
}} style={{ color: 'rgba(0, 0, 0, 0.54)', background: 'transparent' }} />
</div>
</Tooltip>
</Stack>
{(collapseWhere && pair && pair.where) {(collapseWhere && pair && pair.where)
? ?
<React.Fragment> <React.Fragment>
{ Object.keys(pair.where).map((key, index) => { {Object.keys(pair.where).map((key, index) => {
return ( return (
<TreeView <TreeView
expanded={expanded} expanded={expanded}
defaultCollapseIcon={<ExpandMoreIcon />} defaultCollapseIcon={<ExpandMoreIcon />}
defaultExpandIcon={<ChevronRightIcon />} defaultExpandIcon={<ChevronRightIcon />}
sx={{ flexGrow: 1, overflowY: 'auto' }} sx={{ flexGrow: 1, overflowY: 'auto' }}
onNodeToggle={handleToggle} onNodeToggle={handleToggle}
key={`tree-view-${key}-${index}`} key={`tree-view-${key}-${index}`}
> >
<TreeItem nodeId={`${key}-${index}`} label={`${key}:`} key={`${key}-${index}`}> <TreeItem nodeId={`${key}-${index}`} label={`${key}:`} key={`${key}-${index}`}>
{ {
// @ts-ignore // @ts-ignore
DisplayValueContent(pair.where[key], [key]) DisplayValueContent(pair.where[key], [key])
} }
</TreeItem> </TreeItem>
</TreeView> </TreeView>
); );
})} })}
</React.Fragment> </React.Fragment>
: null : null
} }
<Stack spacing={0} direction='row' sx={{ <Stack spacing={0} direction='row' sx={{
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
background: 'lightGray', background: 'lightGray',
}}> }}>
<CollapseButton <CollapseButton
handleClick={handleCollapseWhat} handleClick={handleCollapseWhat}
isCollapsed={collapseWhat} isCollapsed={collapseWhat}
/> />
<Typography>What</Typography> <Typography>What</Typography>
<Tooltip title='Add what condition' placement='right'> <Tooltip title='Add what condition' placement='right'>
<div> <div>
<AddButton handleClick={()=> { <AddButton handleClick={() => {
setAddWhatCondOpen(true); setAddWhatCondOpen(true);
}} style={{color:'rgba(0, 0, 0, 0.54)', background:'transparent'}}/> }} style={{ color: 'rgba(0, 0, 0, 0.54)', background: 'transparent' }} />
</div> </div>
</Tooltip> </Tooltip>
</Stack> </Stack>
{(collapseWhat && pair && pair.what) {(collapseWhat && pair && pair.what)
?( ? (
<React.Fragment> <React.Fragment>
{ Object.keys(pair.what).map((key, index) => { {Object.keys(pair.what).map((key, index) => {
return ( return (
<TreeView <TreeView
defaultCollapseIcon={<ExpandMoreIcon />} defaultCollapseIcon={<ExpandMoreIcon />}
defaultExpandIcon={<ChevronRightIcon />} defaultExpandIcon={<ChevronRightIcon />}
sx={{ flexGrow: 1, overflowY: 'auto' }} sx={{ flexGrow: 1, overflowY: 'auto' }}
key={`tree-view-2-${key}-${index}`} key={`tree-view-2-${key}-${index}`}
> >
<TreeItem nodeId={`${key}-${index}`} label={`${pair.what[index].action}`}> <TreeItem nodeId={`${key}-${index}`} label={`${pair.what[index].action}`}>
{ {
// @ts-ignore // @ts-ignore
DisplayValueContent(pair.what[key], [key], false) DisplayValueContent(pair.what[key], [key], false)
} }
<Tooltip title='remove action' placement='left'> <Tooltip title='remove action' placement='left'>
<div style={{float:'right'}}> <div style={{ float: 'right' }}>
<CloseButton handleClick={() => { <CloseButton handleClick={() => {
//@ts-ignore //@ts-ignore
pair.what.splice(key, 1); pair.what.splice(key, 1);
setRerender(!rerender); setRerender(!rerender);
}}/> }} />
</div> </div>
</Tooltip> </Tooltip>
</TreeItem> </TreeItem>
</TreeView> </TreeView>
); );
})} })}
</React.Fragment> </React.Fragment>
) )
: null : null
} }
</div> </div>
) )
: <WarningText> : <WarningText>
<NotificationImportantIcon color="warning"/> <NotificationImportantIcon color="warning" />
No pair from the left side panel was selected. No pair from the left side panel was selected.
</WarningText> </WarningText>
} }
</React.Fragment> </React.Fragment>
); );
} }
@@ -292,19 +291,19 @@ interface CollapseButtonProps {
isCollapsed?: boolean; isCollapsed?: boolean;
} }
const CollapseButton = ({handleClick, isCollapsed } : CollapseButtonProps) => { const CollapseButton = ({ handleClick, isCollapsed }: CollapseButtonProps) => {
return ( return (
<IconButton aria-label="add" size={"small"} onClick={handleClick}> <IconButton aria-label="add" size={"small"} onClick={handleClick}>
{ isCollapsed ? <KeyboardArrowDown/> : <KeyboardArrowUp/>} {isCollapsed ? <KeyboardArrowDown /> : <KeyboardArrowUp />}
</IconButton> </IconButton>
); );
} }
const CloseButton = ({handleClick } : CollapseButtonProps) => { const CloseButton = ({ handleClick }: CollapseButtonProps) => {
return ( return (
<IconButton aria-label="add" size={"small"} onClick={handleClick} <IconButton aria-label="add" size={"small"} onClick={handleClick}
sx={{'&:hover': { color: '#1976d2', backgroundColor: 'white' }}}> sx={{ '&:hover': { color: '#1976d2', backgroundColor: 'white' } }}>
<Close/> <Close />
</IconButton> </IconButton>
); );
} }