Skip to content

Commit 042caf9

Browse files
mdunnmonmdunnmon
authored
Merge pull request #24 from oslabs-beta/Yoheze/websockets
Yoheze/websockets
2 parents 7cc7d19 + a94c0a6 commit 042caf9

File tree

9 files changed

+322
-316
lines changed

9 files changed

+322
-316
lines changed

‎app/src/components/login/SignIn.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -327,7 +327,7 @@ const SignIn: React.FC<LoginInt & RouteComponentProps> = props => {
327327
Continue as Guest
328328
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-circle" viewBox="0 0 16 16" style={{marginLeft: '5px'}}>
329329
<path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
330-
<path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/>
330+
<path fillRule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/>
331331
</svg>
332332
</Button>
333333
<Grid container>

‎app/src/components/right/ExportButton.tsx

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -104,15 +104,12 @@ export default function ExportButton() {
104104
}, []);
105105
return (
106106
<div>
107-
<Button
108-
variant="contained"
109-
color="secondary"
110-
onClick={showGenerateAppModal}
111-
id="navbarButton"
112-
endIcon={<GetAppIcon />}
113-
>
114-
EXPORT
115-
</Button>
107+
<button onClick={showGenerateAppModal}>Export Project
108+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-download" viewBox="0 0 16 16">
109+
<path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
110+
<path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
111+
</svg>
112+
</button>
116113
{modal}
117114
</div>
118115
);

‎app/src/components/right/LoginButton.tsx

Lines changed: 12 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -23,29 +23,20 @@ export default function LoginButton() {
2323
}
2424
if (state.isLoggedIn) {
2525
return (
26-
<Button
27-
id="navbarButton"
28-
variant="contained"
29-
color="secondary"
30-
className="navbarButton"
31-
style={{ minWidth: '102.11px' }}
32-
onClick={handleLogout}
33-
endIcon={<ExitToAppIcon />}
34-
>
35-
Log Out
36-
</Button>
26+
<button onClick={handleLogout}>Log out
27+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-box-arrow-right" viewBox="0 0 16 16">
28+
<path fillRule="evenodd" d="M10 12.5a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v2a.5.5 0 0 0 1 0v-2A1.5 1.5 0 0 0 9.5 2h-8A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-2a.5.5 0 0 0-1 0v2z"/>
29+
<path fillRule="evenodd" d="M15.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L14.293 7.5H5.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3z"/>
30+
</svg>
31+
</button>
3732
);
3833
}
3934
return (
40-
<Button
41-
variant="contained"
42-
color="secondary"
43-
className="navbarButton"
44-
style={{ minWidth: '102.11px' }}
45-
onClick={handleLogout}
46-
endIcon={<ExitToAppIcon />}
47-
>
48-
Log In
49-
</Button>
35+
<button onClick={handleLogout}>Log in
36+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-box-arrow-right" viewBox="0 0 16 16">
37+
<path fillRule="evenodd" d="M10 12.5a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v2a.5.5 0 0 0 1 0v-2A1.5 1.5 0 0 0 9.5 2h-8A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-2a.5.5 0 0 0-1 0v2z"/>
38+
<path fillRule="evenodd" d="M15.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L14.293 7.5H5.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3z"/>
39+
</svg>
40+
</button>
5041
);
5142
}

‎app/src/components/top/NavBar.tsx

Lines changed: 20 additions & 269 deletions
Original file line numberDiff line numberDiff line change
@@ -1,279 +1,30 @@
1-
import React, { useState } from 'react';
2-
import { Theme } from '@mui/material/styles';
3-
import withStyles from '@mui/styles/withStyles';
4-
import createStyles from '@mui/styles/createStyles';
5-
import makeStyles from '@mui/styles/makeStyles';
6-
import AppBar from '@mui/material/AppBar';
1+
import React from 'react';
72
import Avatar from '@mui/material/Avatar';
8-
import Brightness3Icon from '@mui/icons-material/Brightness3';
9-
import Brightness5Icon from '@mui/icons-material/Brightness5';
10-
import DashboardIcon from '@mui/icons-material/Dashboard';
11-
import Toolbar from '@mui/material/Toolbar';
12-
import Typography from '@mui/material/Typography';
13-
import Button from '@mui/material/Button';
14-
import DeleteIcon from '@mui/icons-material/Delete';
15-
import FilterListIcon from '@mui/icons-material/FilterList';
16-
import Menu from '@mui/material/Menu';
17-
import MenuItem from '@mui/material/MenuItem';
18-
import List from '@mui/material/List';
19-
import ListItem from '@mui/material/ListItem';
20-
import ListItemText from '@mui/material/ListItemText';
21-
import { Link } from 'react-router-dom';
22-
import LoginButton from '../right/LoginButton';
23-
import ExportButton from '../right/ExportButton';
24-
import SaveProjectButton from '../right/SaveProjectButton';
25-
import DeleteProjects from '../right/DeleteProjects';
26-
import ProjectsFolder from '../right/OpenProjects';
27-
import createModal from '../right/createModal';
283
import logo from '../../public/icons/win/logo.png';
29-
// Imports for redux toolkit usage
30-
import { toggleDarkMode } from '../../redux/reducers/slice/darkModeSlice';
31-
import { resetAllState } from '../../redux/reducers/slice/appStateSlice';
32-
import { useSelector, useDispatch } from 'react-redux';
33-
import { setStyle } from '../../redux/reducers/slice/styleSlice'
34-
// NavBar text and button styling
35-
const useStyles = makeStyles((theme: Theme) =>
36-
createStyles({
37-
root: {
38-
flexGrow: 1,
39-
width: '100%'
40-
},
41-
menuButton: {
42-
marginRight: theme.spacing(1),
43-
color: 'white'
44-
},
45-
title: {
46-
flexGrow: 1,
47-
color: 'white'
48-
},
49-
manageProject: {
50-
display: 'flex',
51-
justifyContent: 'center'
52-
}
53-
})
54-
);
4+
import NavbarDropDown from './NavBarButtons';
5+
import { useSelector } from 'react-redux'
556

56-
// Drop down menu button for export
57-
const StyledMenu = withStyles({
58-
paper: {
59-
border: '1px solid #d3d4d5'
60-
}
61-
})(props => (
62-
<Menu
63-
elevation={0}
64-
// getContentAnchorEl={null}
65-
anchorOrigin={{
66-
vertical: 'bottom',
67-
horizontal: 'center'
68-
}}
69-
transformOrigin={{
70-
vertical: 'top',
71-
horizontal: 'center'
72-
}}
73-
{...props}
74-
/>
75-
));
76-
77-
const StyledMenuItem = withStyles(theme => ({
78-
root: {
79-
'&:focus': {
80-
'& .MuiListItemIcon-root, & .MuiListItemText-primary': {
81-
color: theme.palette.common.white
82-
}
83-
}
84-
}
85-
}))(MenuItem);
86-
87-
//export default function NavBar(props)
887
const NavBar = (props) => {
89-
const classes = useStyles();
90-
// State for export menu button
91-
const [anchorEl, setAnchorEl] = React.useState(null);
92-
// State for clear canvas button
93-
const [modal, setModal] = useState(null);
94-
const dispatch = useDispatch();
95-
const { state, style, isDarkMode } = useSelector(store => ({
96-
state: store.appState,
97-
style: store.style,
98-
isDarkMode: store.darkMode.isDarkMode
99-
100-
}));
8+
9+
// for dropdown navbar
10+
const [dropMenu, setDropMenu] = React.useState(false);
11+
const isDarkMode = useSelector(state=>state.darkMode.isDarkMode)
10112

102-
//NEW DARK MODE
103-
const handleDarkModeToggle = () => {
104-
dispatch(toggleDarkMode());
105-
// Add your logic to update the style and theme based on darkMode
106-
isDarkMode ? dispatch(setStyle(null)) : dispatch(setStyle({ backgroundColor: '#21262c' }));
107-
props.setTheme(isDarkMode);
108-
};
109-
110-
const handleClick = event => {
111-
setAnchorEl(event.currentTarget);
112-
};
113-
const handleClose = () => {
114-
setAnchorEl(null);
115-
};
116-
// ---Clear canvas functionality---
117-
// Closes out the open modal
118-
const closeModal = () => setModal('');
119-
// Creates modal that asks if user wants to clear workspace
120-
// If user clears their workspace, then their components are removed from state and the modal is closed
121-
const clearWorkspace = () => {
122-
// Reset state for project to initial state
123-
const resetState = () => {
124-
dispatch(resetAllState());
125-
};
126-
// Set modal options
127-
const children = (
128-
<List className="export-preference">
129-
<ListItem
130-
key={'clear'}
131-
button
132-
onClick={resetState}
133-
style={{
134-
border: '1px solid #3f51b5',
135-
marginBottom: '2%',
136-
marginTop: '5%'
137-
}}
138-
>
139-
<ListItemText
140-
primary={'Yes, delete all project data'}
141-
style={{ textAlign: 'center' }}
142-
onClick={closeModal}
143-
/>
144-
</ListItem>
145-
</List>
146-
);
147-
// Create modal
148-
setModal(
149-
createModal({
150-
closeModal,
151-
children,
152-
message: 'Are you sure want to delete all data?',
153-
primBtnLabel: null,
154-
primBtnAction: null,
155-
secBtnAction: null,
156-
secBtnLabel: null,
157-
open: true
158-
})
159-
);
160-
};
16113
return (
162-
<div className={classes.root} style={style}>
163-
<AppBar position="static">
164-
<Toolbar>
165-
<Avatar src={logo}></Avatar>
166-
<Typography
167-
variant="h6"
168-
style={{
169-
marginLeft: '1rem',
170-
color: isDarkMode ? '#fff' : '#0d47a1'
171-
}}
172-
className={classes.title}
173-
>
174-
ReacType
175-
</Typography>
176-
<Link to="/tutorial" style={{ textDecoration: 'none' }} target='_blank'>
177-
<Button
178-
variant="contained"
179-
color="secondary"
180-
style={{ minWidth: '137.69px' }}
181-
className="navbarButton"
182-
id="navbarButton"
183-
>
184-
Tutorial
185-
</Button>
186-
</Link>
187-
{/* ==================================Dashboard Button================================================== */}
188-
{state.isLoggedIn ? (
189-
<Link to="/dashboard" style={{ textDecoration: 'none' }}>
190-
<Button
191-
variant="contained"
192-
color="secondary"
193-
style={{ minWidth: '137.69px' }}
194-
className="navbarButton"
195-
endIcon={<DashboardIcon />}
196-
id="navbarButton"
197-
>
198-
Dashboard
199-
</Button>
200-
</Link>
201-
) : (
202-
<span></span>
203-
)}
204-
{/* ==================================Clear Canvas Button================================================== */}
205-
<Button
206-
variant="contained"
207-
color="secondary"
208-
style={{ minWidth: '137.69px' }}
209-
onClick={clearWorkspace}
210-
className="navbarButton"
211-
id="navbarButton"
212-
endIcon={<DeleteIcon />}
213-
>
214-
Clear Canvas
215-
</Button>
216-
<ExportButton />
217-
<Button
218-
className="navbarButton"
219-
id="navbarButton"
220-
color="secondary"
221-
variant="contained"
222-
style={{ minWidth: '113.97px' }}
223-
endIcon={
224-
props.isThemeLight ? <Brightness3Icon /> : <Brightness5Icon />
225-
}
226-
onClick={handleDarkModeToggle}
227-
>
228-
{isDarkMode ? 'Light Mode' : 'Dark Mode'}
229-
</Button>
230-
{state.isLoggedIn ? ( // render Manage Project button/dropdown only if user is logged in
231-
<Button
232-
variant="contained"
233-
color="secondary"
234-
onClick={handleClick}
235-
className="navbarButton"
236-
id="navbarButton"
237-
endIcon={<FilterListIcon />}
238-
>
239-
MANAGE PROJECT
240-
</Button>
241-
) : (
242-
<span></span>
243-
)}
244-
<LoginButton />
245-
<StyledMenu // Dropdown menu connected to Manage Project Button
246-
id="customized-menu"
247-
anchorEl={anchorEl}
248-
keepMounted
249-
open={Boolean(anchorEl)}
250-
onClose={handleClose}
251-
>
252-
<StyledMenuItem
253-
id="navbarButton"
254-
className={classes.manageProject}
255-
onClick={handleClose}
256-
>
257-
<SaveProjectButton />
258-
</StyledMenuItem>
259-
<StyledMenuItem
260-
className={classes.manageProject}
261-
onClick={handleClose}
262-
>
263-
<ProjectsFolder />
264-
</StyledMenuItem>
265-
<StyledMenuItem
266-
className={classes.manageProject}
267-
onClick={handleClose}
268-
>
269-
<DeleteProjects />
270-
</StyledMenuItem>
271-
</StyledMenu>
272-
</Toolbar>
273-
</AppBar>
274-
{modal}
14+
<nav className="main-navbar" style={isDarkMode ? {backgroundColor: '#013365'} : {backgroundColor: 'white'}}>
15+
<div className="main-logo">
16+
<Avatar src={logo}></Avatar>
17+
<h1 style={isDarkMode ? {color: 'white'} : {color: '#013365'}}>ReacType</h1>
18+
</div>
19+
<div onMouseLeave={()=>setDropMenu(false)}>
20+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-gear-wide-connected navbar-icon" viewBox="0 0 16 16"
21+
onMouseOver={()=>setDropMenu(true)}>
22+
<path d="M7.068.727c.243-.97 1.62-.97 1.864 0l.071.286a.96.96 0 0 0 1.622.434l.205-.211c.695-.719 1.888-.03 1.613.931l-.08.284a.96.96 0 0 0 1.187 1.187l.283-.081c.96-.275 1.65.918.931 1.613l-.211.205a.96.96 0 0 0 .434 1.622l.286.071c.97.243.97 1.62 0 1.864l-.286.071a.96.96 0 0 0-.434 1.622l.211.205c.719.695.03 1.888-.931 1.613l-.284-.08a.96.96 0 0 0-1.187 1.187l.081.283c.275.96-.918 1.65-1.613.931l-.205-.211a.96.96 0 0 0-1.622.434l-.071.286c-.243.97-1.62.97-1.864 0l-.071-.286a.96.96 0 0 0-1.622-.434l-.205.211c-.695.719-1.888.03-1.613-.931l.08-.284a.96.96 0 0 0-1.186-1.187l-.284.081c-.96.275-1.65-.918-.931-1.613l.211-.205a.96.96 0 0 0-.434-1.622l-.286-.071c-.97-.243-.97-1.62 0-1.864l.286-.071a.96.96 0 0 0 .434-1.622l-.211-.205c-.719-.695-.03-1.888.931-1.613l.284.08a.96.96 0 0 0 1.187-1.186l-.081-.284c-.275-.96.918-1.65 1.613-.931l.205.211a.96.96 0 0 0 1.622-.434l.071-.286zM12.973 8.5H8.25l-2.834 3.779A4.998 4.998 0 0 0 12.973 8.5zm0-1a4.998 4.998 0 0 0-7.557-3.779l2.834 3.78h4.723zM5.048 3.967c-.03.021-.058.043-.087.065l.087-.065zm-.431.355A4.984 4.984 0 0 0 3.002 8c0 1.455.622 2.765 1.615 3.678L7.375 8 4.617 4.322zm.344 7.646.087.065-.087-.065z"/>
23+
</svg>
24+
{dropMenu && <NavbarDropDown></NavbarDropDown>}
27525
</div>
276-
);
26+
</nav>
27+
)
27728
}
27829

27930
export default NavBar;

0 commit comments

Comments
 (0)