Skip to content

Commit dc2c231

Browse files
atvanekMatteoDiterrachelk585sophia-bui
committed
Post code walk-through
Co-authored-by: Matteo <[email protected]> Co-authored-by: rachelk585 <[email protected]> Co-authored-by: Sophia Bui <[email protected]>
1 parent 0cf2c69 commit dc2c231

File tree

4 files changed

+74
-43
lines changed

4 files changed

+74
-43
lines changed

‎app/src/components/bottom/CreationPanel.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
2-
import ComponentPanel from '../right/ComponentPanel'
3-
import HTMLPanel from '../left/HTMLPanel'
2+
import ComponentPanel from '../right/ComponentPanel';
3+
import HTMLPanel from '../left/HTMLPanel';
44
import { useSelector } from 'react-redux';
55
import { RootState } from '../../redux/store';
66

@@ -10,8 +10,8 @@ const CreationPanel = (props): JSX.Element => {
1010
const style = useSelector((store: RootState) => store.styleSlice);
1111
return (
1212
<div className="creation-panel" style={style.style}>
13-
<ComponentPanel isThemeLight={props.isThemeLight}/>
14-
<HTMLPanel isThemeLight={props.isThemeLight}/>
13+
<ComponentPanel isThemeLight={props.isThemeLight} />
14+
<HTMLPanel isThemeLight={props.isThemeLight} />
1515
</div>
1616
);
1717
};

‎app/src/components/right/ComponentDrag.tsx renamed to ‎app/src/components/left/ComponentDrag.tsx

Lines changed: 43 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
11
import React from 'react';
22
import Grid from '@mui/material/Grid';
3-
import ComponentPanelItem from './ComponentPanelItem';
3+
import ComponentPanelItem from '../right/ComponentPanelItem';
44
import makeStyles from '@mui/styles/makeStyles';
55
import { useSelector } from 'react-redux';
66
import { RootState } from '../../redux/store';
77
// The component panel section of the left panel displays all components and has the ability to add new components
88
const ComponentDrag = ({ isThemeLight }): JSX.Element => {
99
const classes = useStyles();
10-
const state = useSelector((store:RootState) => store.appState)
11-
const isDarkMode = useSelector((store:RootState) => store.darkMode.isDarkMode);
10+
const state = useSelector((store: RootState) => store.appState);
11+
const isDarkMode = useSelector(
12+
(store: RootState) => store.darkMode.isDarkMode
13+
);
1214
const isFocus = (targetId: Number) => {
1315
return state.canvasFocus.componentId === targetId ? true : false;
1416
};
@@ -19,11 +21,26 @@ const ComponentDrag = ({ isThemeLight }): JSX.Element => {
1921
{/* Font size for 'index' in root components in .compPanelItem h3 style.css */}
2022
<div className={classes.panelWrapperList}>
2123
{/* Heading just below ADD button */}
22-
<h4 className={!isDarkMode ? classes.lightThemeFontColor : classes.darkThemeFontColor}>{state.projectType === 'Next.js' || state.projectType === 'Gatsby.js' ? 'Pages' : 'Root Components'}</h4>
23-
<Grid container direction="row" justifyContent="center" alignItems="center">
24+
<h4
25+
className={
26+
!isDarkMode
27+
? classes.lightThemeFontColor
28+
: classes.darkThemeFontColor
29+
}
30+
>
31+
{state.projectType === 'Next.js' || state.projectType === 'Gatsby.js'
32+
? 'Pages'
33+
: 'Root Components'}
34+
</h4>
35+
<Grid
36+
container
37+
direction="row"
38+
justifyContent="center"
39+
alignItems="center"
40+
>
2441
{state.components
25-
.filter(comp => state.rootComponents.includes(comp.id))
26-
.map(comp => {
42+
.filter((comp) => state.rootComponents.includes(comp.id))
43+
.map((comp) => {
2744
return (
2845
<ComponentPanelItem
2946
isFocus={isFocus(comp.id)}
@@ -33,16 +50,28 @@ const ComponentDrag = ({ isThemeLight }): JSX.Element => {
3350
root={true}
3451
isThemeLight={isThemeLight}
3552
/>
36-
3753
);
3854
})}
3955
</Grid>
4056
{/* Display all reusable components */}
41-
<h4 className={!isDarkMode ? classes.lightThemeFontColor : classes.darkThemeFontColor}>Reusable Components</h4>
42-
<Grid container direction="row" justifyContent="center" alignItems="center">
57+
<h4
58+
className={
59+
!isDarkMode
60+
? classes.lightThemeFontColor
61+
: classes.darkThemeFontColor
62+
}
63+
>
64+
Reusable Components
65+
</h4>
66+
<Grid
67+
container
68+
direction="row"
69+
justifyContent="center"
70+
alignItems="center"
71+
>
4372
{state.components
44-
.filter(comp => !state.rootComponents.includes(comp.id))
45-
.map(comp => {
73+
.filter((comp) => !state.rootComponents.includes(comp.id))
74+
.map((comp) => {
4675
return (
4776
<ComponentPanelItem
4877
isFocus={isFocus(comp.id)}
@@ -55,7 +84,6 @@ const ComponentDrag = ({ isThemeLight }): JSX.Element => {
5584
);
5685
})}
5786
</Grid>
58-
5987
</div>
6088
</div>
6189
);
@@ -67,7 +95,7 @@ const useStyles = makeStyles({
6795
flexDirection: 'column',
6896
alignItems: 'center',
6997
flexGrow: 1,
70-
overflow: 'auto',
98+
overflow: 'auto'
7199
},
72100
panelWrapperList: {
73101
minHeight: '120px',
@@ -77,7 +105,7 @@ const useStyles = makeStyles({
77105
display: 'flex',
78106
flexDirection: 'column',
79107
alignItems: 'center',
80-
wordWrap: 'break-word',
108+
wordWrap: 'break-word'
81109
},
82110
lightThemeFontColor: {
83111
color: '#155084'

‎app/src/components/left/HTMLPanel.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@ import { RootState } from '../../redux/store';
1414
DESCRIPTION: This is the bottom half of the left panel, starting from the 'HTML
1515
Elements' header. The boxes containing each HTML element are rendered in
1616
HTMLItem, which itself is rendered by this component.
17+
18+
!!! TO NAME HTML ELEMENTS in the LEFT panel !!!
1719
1820
Central state contains all available HTML elements (stored in the HTMLTypes property).
1921
The data for HTMLTypes is stored in HTMLTypes.tsx and is added to central state in

‎app/src/containers/LeftContainer.tsx

Lines changed: 25 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,28 @@
1-
import React, { useEffect, useCallback } from 'react';
1+
import React, { useEffect, useCallback } from 'react';
22
import Grid from '@mui/material/Grid';
3-
import ComponentDrag from '../components/right/ComponentDrag';
3+
import ComponentDrag from '../components/left/ComponentDrag';
44
import DragDropPanel from '../components/left/DragDropPanel';
55
import { useDispatch, useSelector } from 'react-redux';
66
import { deleteChild } from '../redux/reducers/slice/appStateSlice';
77

8-
98
// Left-hand portion of the app, where component options are displayed
109
const LeftContainer = (props): JSX.Element => {
11-
12-
const{contextParam, style } = useSelector(store =>({
10+
const { contextParam, style } = useSelector((store) => ({
1311
contextParam: store.contextSlice,
14-
style: store.styleSlice,
15-
}))
12+
style: store.styleSlice
13+
}));
1614
const dispatch = useDispatch();
1715

1816
const handleDelete = () => {
19-
dispatch(deleteChild({id:{},contextParam:contextParam}))
17+
dispatch(deleteChild({ id: {}, contextParam: contextParam }));
2018
};
21-
const keyBindedFunc = useCallback(e => {
22-
if (e.key === 'Backspace' && e.target.tagName !== "TEXTAREA" && e.target.tagName !== "INPUT") handleDelete();
19+
const keyBindedFunc = useCallback((e) => {
20+
if (
21+
e.key === 'Backspace' &&
22+
e.target.tagName !== 'TEXTAREA' &&
23+
e.target.tagName !== 'INPUT'
24+
)
25+
handleDelete();
2326
}, []);
2427
useEffect(() => {
2528
document.addEventListener('keydown', keyBindedFunc);
@@ -30,20 +33,18 @@ const LeftContainer = (props): JSX.Element => {
3033

3134
return (
3235
<div className="left-container hide-show">
33-
<div className="column left" style={style.style}>
34-
<Grid container direction="column" alignItems="center">
35-
<h4>Drag and Drop</h4>
36-
<DragDropPanel />
37-
<div id={'CompBottomHalf'}>
38-
<ComponentDrag isThemeLight={props.isThemeLight}/>
39-
</div>
40-
</Grid>
41-
</div>
42-
<div className='left-indicator'>
43-
<span className="material-symbols-outlined">
44-
eject
45-
</span>
46-
</div>
36+
<div className="column left" style={style.style}>
37+
<Grid container direction="column" alignItems="center">
38+
<h4>Drag and Drop</h4>
39+
<DragDropPanel />
40+
<div id={'CompBottomHalf'}>
41+
<ComponentDrag isThemeLight={props.isThemeLight} />
42+
</div>
43+
</Grid>
44+
</div>
45+
<div className="left-indicator">
46+
<span className="material-symbols-outlined">eject</span>
47+
</div>
4748
</div>
4849
);
4950
};

0 commit comments

Comments
 (0)