Skip to content

Commit 5f6cf74

Browse files
dentonwongdentonwong
authored
Merge pull request #10 from oslabs-beta/victor/sidebar
UI: improve UI of sidebar
2 parents f97c936 + a270a62 commit 5f6cf74

File tree

14 files changed

+366
-152
lines changed

14 files changed

+366
-152
lines changed

‎app/src/components/App.tsx

Lines changed: 24 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,40 @@
1-
import React, {useEffect } from 'react';
21
import '../public/styles/style.css';
2+
3+
import React, { useEffect } from 'react';
4+
import {
5+
setInitialState,
6+
toggleLoggedIn
7+
} from '../redux/reducers/slice/appStateSlice';
8+
//redux toolkit addition
9+
import { useDispatch, useSelector } from 'react-redux';
10+
11+
import AppContainer from '../containers/AppContainer';
12+
import Cookies from 'js-cookie';
313
import { DndProvider } from 'react-dnd';
414
import { HTML5Backend } from 'react-dnd-html5-backend';
5-
import AppContainer from '../containers/AppContainer';
15+
import { RootState } from '../redux/store';
616
import localforage from 'localforage';
717
import { saveProject } from '../helperFunctions/projectGetSaveDel';
8-
import Cookies from 'js-cookie';
9-
//redux toolkit addition
10-
import { useSelector, useDispatch } from 'react-redux';
11-
import { setInitialState, toggleLoggedIn} from '../redux/reducers/slice/appStateSlice';
12-
13-
import { RootState } from '../redux/store';
1418

1519
// Intermediary component to wrap main App component with higher order provider components
1620
export const App = (): JSX.Element => {
1721
const state = useSelector((store: RootState) => store.appState);
1822
const dispatch = useDispatch();
1923
// checks if user is signed in as guest or actual user and changes loggedIn boolean accordingly
20-
useEffect(()=>{
24+
useEffect(() => {
2125
if (window.localStorage.getItem('ssid') !== 'guest') {
22-
dispatch(toggleLoggedIn())
23-
}
24-
},[])
26+
dispatch(toggleLoggedIn());
27+
}
28+
}, []);
2529

2630
// following useEffect runs on first mount
2731
useEffect(() => {
2832
// if user is a guest, see if a project exists in localforage and retrieve it
29-
if (!state.isLoggedIn) {
30-
localforage.getItem('guestProject').then(project => {
33+
if (!state.isLoggedIn) {
34+
localforage.getItem('guestProject').then((project) => {
3135
// if project exists, use dispatch to set initial state to that project
3236
if (project) {
33-
dispatch(setInitialState(project))
37+
dispatch(setInitialState(project));
3438
}
3539
});
3640
} else {
@@ -42,10 +46,9 @@ export const App = (): JSX.Element => {
4246
userId = window.localStorage.getItem('ssid');
4347
}
4448
//also load user's last project, which was saved in localforage on logout
45-
localforage.getItem(userId).then(project => {
49+
localforage.getItem(userId).then((project) => {
4650
if (project) {
47-
48-
dispatch(setInitialState(project))
51+
dispatch(setInitialState(project));
4952
} else {
5053
console.log(
5154
'No user project found in localforage, setting initial state blank'
@@ -96,12 +99,11 @@ export const App = (): JSX.Element => {
9699
>
97100
ReacType
98101
</header>
99-
100-
<AppContainer />
101-
102+
103+
<AppContainer />
102104
</DndProvider>
103105
</div>
104106
);
105-
}
107+
};
106108

107109
export default App;

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import React from 'react';
2+
3+
const ComponentsContainer = () => {
4+
return <div>ComponentsContainer</div>;
5+
};
6+
7+
export default ComponentsContainer;

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

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import { Route, Switch, useLocation } from 'react-router-dom';
2+
import { useDispatch, useSelector } from 'react-redux';
3+
4+
import ComponentsContainer from './ComponentsContainer';
5+
import ElementsContainer from './ElementsContainer';
6+
import React from 'react';
7+
import RoomsContainer from './RoomsContainer';
8+
import TreeContainer from './TreeContainer';
9+
10+
function ContentArea() {
11+
const { contextParam, style } = useSelector((store) => ({
12+
contextParam: store.contextSlice,
13+
style: store.styleSlice
14+
}));
15+
const dispatch = useDispatch();
16+
17+
const location = useLocation<{ hideContent: boolean }>();
18+
19+
// If the hideContent flag is true, don't render any content
20+
if (location.state?.hideContent) {
21+
return null;
22+
}
23+
if (
24+
['/elements', '/reuseable', '/component-tree', '/rooms'].includes(
25+
location.pathname
26+
)
27+
) {
28+
return (
29+
<div className="left-container">
30+
<div className="column left" style={style.style}>
31+
<Switch>
32+
<Route path="/elements" component={ElementsContainer} />
33+
<Route path="/reuseable" component={ComponentsContainer} />
34+
<Route path="/component-tree" component={TreeContainer} />
35+
<Route path="/rooms" component={RoomsContainer} />
36+
</Switch>
37+
</div>
38+
</div>
39+
);
40+
}
41+
42+
return null;
43+
}
44+
45+
export default ContentArea;

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

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1-
import React from 'react';
1+
import { useDispatch, useSelector } from 'react-redux';
2+
23
import Grid from '@mui/material/Grid';
34
import HTMLItem from './HTMLItem';
5+
import React from 'react';
46
import { RootState } from '../../redux/store';
5-
import { useSelector, useDispatch } from 'react-redux';
67
import { deleteElement } from '../../redux/reducers/slice/appStateSlice';
78

89
/*
@@ -38,7 +39,7 @@ const DragDropPanel = (props): JSX.Element => {
3839
<div className={`${!isDarkMode ? 'HTMLItems' : 'HTMLItemsDark'}`}>
3940
<div id="HTMLItemsTopHalf">
4041
<Grid id="HTMLItemsGrid">
41-
<h3 style={{ color: !isDarkMode ? '#000' : '#fff' }}>
42+
<h3 style={{ color: !isDarkMode ? '#C6C6C6' : '#fff' }}>
4243
HTML ELEMENTS
4344
</h3>
4445
{htmlTypesToRender.map((option) => {
@@ -59,7 +60,7 @@ const DragDropPanel = (props): JSX.Element => {
5960
}
6061
})}
6162
{state.projectType === 'Classic React' ? (
62-
<h3 style={{ color: !isDarkMode ? '#000' : '#fff' }}>
63+
<h3 style={{ color: !isDarkMode ? '#C6C6C6' : '#fff' }}>
6364
REACT ROUTER
6465
</h3>
6566
) : null}
@@ -83,7 +84,7 @@ const DragDropPanel = (props): JSX.Element => {
8384
})}
8485

8586
{state.projectType === 'Next.js' ? (
86-
<h3 style={{ color: !isDarkMode ? '#000' : '#fff' }}>Next.js</h3>
87+
<h3 style={{ color: !isDarkMode ? '#C6C6C6' : '#fff' }}>Next.js</h3>
8788
) : null}
8889
{htmlTypesToRender.map((option) => {
8990
if (

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

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import { Drawer, List, ListItem, ListItemIcon } from '@mui/material';
2+
import React, { useCallback, useEffect } from 'react';
3+
import { useDispatch, useSelector } from 'react-redux';
4+
5+
import ComponentDrag from './ComponentDrag';
6+
import DragDropPanel from './DragDropPanel';
7+
import FolderIcon from '@mui/icons-material/Folder';
8+
import Grid from '@mui/material/Grid';
9+
import SettingsIcon from '@mui/icons-material/Settings';
10+
import { deleteChild } from '../../redux/reducers/slice/appStateSlice';
11+
12+
// Left-hand portion of the app, where component options are displayed
13+
const ElementsContainer = (props): JSX.Element => {
14+
const [selectedTab, setSelectedTab] = React.useState('files');
15+
16+
const { contextParam, style } = useSelector((store) => ({
17+
contextParam: store.contextSlice,
18+
style: store.styleSlice
19+
}));
20+
const dispatch = useDispatch();
21+
22+
const handleDelete = () => {
23+
dispatch(deleteChild({ id: {}, contextParam: contextParam }));
24+
};
25+
const keyBindedFunc = useCallback((e) => {
26+
if (
27+
e.key === 'Backspace' &&
28+
e.target.tagName !== 'TEXTAREA' &&
29+
e.target.tagName !== 'INPUT'
30+
)
31+
handleDelete();
32+
}, []);
33+
useEffect(() => {
34+
document.addEventListener('keydown', keyBindedFunc);
35+
return () => {
36+
document.removeEventListener('keydown', keyBindedFunc);
37+
};
38+
}, []);
39+
40+
return (
41+
<Grid container direction="column" alignItems="center">
42+
<h4>Drag and Drop</h4>
43+
<DragDropPanel />
44+
<div id={'CompBottomHalf'}>
45+
<ComponentDrag isThemeLight={props.isThemeLight} />
46+
</div>
47+
</Grid>
48+
);
49+
};
50+
51+
export default ElementsContainer;

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

Lines changed: 54 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,19 @@
11
import React, { useState } from 'react';
2-
import { useDrag } from 'react-dnd';
3-
import { ItemTypes } from '../../constants/ItemTypes';
2+
43
import Grid from '@mui/material/Grid';
5-
import makeStyles from '@mui/styles/makeStyles';
4+
import { ItemTypes } from '../../constants/ItemTypes';
65
import List from '@mui/material/List';
76
import ListItem from '@mui/material/ListItem';
87
import ListItemText from '@mui/material/ListItemText';
8+
import { RootState } from '../../redux/store';
99
import createModal from '../right/createModal';
10+
import makeStyles from '@mui/styles/makeStyles';
11+
import { useDrag } from 'react-dnd';
1012
import { useSelector } from 'react-redux';
11-
import { RootState } from '../../redux/store';
1213

1314
const useStyles = makeStyles({
1415
HTMLPanelItem: {
15-
color: '#186BB4',
16+
color: '#8F8F8F',
1617
height: '35px',
1718
width: '90px',
1819
fontSize: '80%',
@@ -22,32 +23,32 @@ const useStyles = makeStyles({
2223
textAlign: 'center',
2324
margin: '7px auto',
2425
marginLeft: '30px',
25-
borderRadius: '25px',
2626
cursor: 'grab',
2727
'& > h3': {
28-
display: 'inline-block',
28+
display: 'inline-block'
2929
}
3030
},
3131
lightThemeFontColor: {
32-
color: '#292929'
32+
color: '#8F8F8F'
3333
},
3434
darkThemeFontColor: {
35-
color: '#fff'
35+
color: '#8F8F8F'
3636
}
37-
3837
});
3938

40-
const HTMLItem : React.FC<{
39+
const HTMLItem: React.FC<{
4140
name: string;
4241
id: number;
4342
Icon: any;
4443
handleDelete: (id: number) => void;
4544
}> = ({ name, id, handleDelete }) => {
46-
4745
const classes = useStyles();
4846
const [modal, setModal] = useState(null);
49-
const isDarkMode = useSelector((store:RootState) => store.darkMode.isDarkMode);
50-
const [{ isDragging }, drag] = useDrag({ // is dragging is never read, but if deleted adjustment in the ref are needed line 122/128 ref={drag} to {...drag}
47+
const isDarkMode = useSelector(
48+
(store: RootState) => store.darkMode.isDarkMode
49+
);
50+
const [{ isDragging }, drag] = useDrag({
51+
// is dragging is never read, but if deleted adjustment in the ref are needed line 122/128 ref={drag} to {...drag}
5152
item: {
5253
type: ItemTypes.INSTANCE,
5354
newInstance: true,
@@ -72,7 +73,7 @@ const HTMLItem : React.FC<{
7273
key={`clear${deleteID}`}
7374
onClick={() => handleDelete(deleteID)}
7475
style={{
75-
border: '1px solid #3f51b5',
76+
border: '1px solid #C6C6C6',
7677
marginBottom: '2%',
7778
marginTop: '5%'
7879
}}
@@ -87,7 +88,7 @@ const HTMLItem : React.FC<{
8788
key={`close${deleteID}`}
8889
onClick={closeModal}
8990
style={{
90-
border: '1px solid #3f51b5',
91+
border: '1px solid #C6C6C6',
9192
marginBottom: '2%',
9293
marginTop: '5%'
9394
}}
@@ -106,7 +107,8 @@ const HTMLItem : React.FC<{
106107
createModal({
107108
closeModal,
108109
children,
109-
message: 'Deleting this element will delete all instances of this element within the application.\nDo you still wish to proceed?',
110+
message:
111+
'Deleting this element will delete all instances of this element within the application.\nDo you still wish to proceed?',
110112
primBtnLabel: null,
111113
primBtnAction: null,
112114
secBtnAction: null,
@@ -116,24 +118,49 @@ const HTMLItem : React.FC<{
116118
);
117119
};
118120
// updated the id's to reflect the new element types input and label
119-
return ( // HTML Elements
121+
return (
122+
// HTML Elements
120123
<Grid item xs={5} key={`html-g${name}`}>
121-
{ id <= 20 &&
122-
<div ref={drag} style={ { borderColor: !isDarkMode ? '#000' : '#fff' } } className={!isDarkMode ? `${classes.HTMLPanelItem} ${classes.lightThemeFontColor}` : `${classes.HTMLPanelItem} ${classes.darkThemeFontColor}`} id="HTMLItem">
124+
{id <= 20 && (
125+
<div
126+
ref={drag}
127+
style={{ borderColor: !isDarkMode ? '#C6C6C6' : '#fff' }}
128+
className={
129+
!isDarkMode
130+
? `${classes.HTMLPanelItem} ${classes.lightThemeFontColor}`
131+
: `${classes.HTMLPanelItem} ${classes.darkThemeFontColor}`
132+
}
133+
id="HTMLItem"
134+
>
123135
<h3>{name}</h3>
124136
</div>
125-
}
126-
{ id > 20 &&
137+
)}
138+
{id > 20 && (
127139
<span id="customHTMLElement">
128-
<div ref={drag} style={ { borderColor: !isDarkMode ? '#000' : '#fff' } } className={!isDarkMode ? `${classes.HTMLPanelItem} ${classes.lightThemeFontColor}` : `${classes.HTMLPanelItem} ${classes.darkThemeFontColor}`} id="HTMLItem">
140+
<div
141+
ref={drag}
142+
style={{ borderColor: !isDarkMode ? '#C6C6C6' : '#fff' }}
143+
className={
144+
!isDarkMode
145+
? `${classes.HTMLPanelItem} ${classes.lightThemeFontColor}`
146+
: `${classes.HTMLPanelItem} ${classes.darkThemeFontColor}`
147+
}
148+
id="HTMLItem"
149+
>
129150
<h3>{name}</h3>
130151
</div>
131-
<button id="newElement" style={{color: !isDarkMode ? '#186BB4' : 'white' }} onClick={() => deleteAllInstances(id)} >X</button>
152+
<button
153+
id="newElement"
154+
style={{ color: !isDarkMode ? '#C6C6C6' : 'white' }}
155+
onClick={() => deleteAllInstances(id)}
156+
>
157+
X
158+
</button>
132159
</span>
133-
}
160+
)}
134161
{modal}
135162
</Grid>
136163
);
137-
}
164+
};
138165

139-
export default HTMLItem;
166+
export default HTMLItem;

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import React from 'react';
2+
3+
const RoomsContainer = () => {
4+
return <div>RoomsContainer</div>;
5+
};
6+
7+
export default RoomsContainer;

0 commit comments

Comments
 (0)