1+
2+ <!DOCTYPE html>
3+ < html >
4+ < head >
5+ < title > NavbarDash.tsx</ title >
6+ < link href ="
https://cdn.jsdelivr.net/npm/[email protected] /dist/semantic.min.css "
type ="
text/css "
rel ="
stylesheet "
> 7+ < script src ="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.2/codemirror.min.js " type ="text/javascript " charset ="utf-8 "> </ script >
8+ < script src ="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.2/mode/javascript/javascript.min.js " type ="text/javascript " charset ="utf-8 "> </ script >
9+ < link href ="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.2/codemirror.min.css " type ="text/css " rel ="stylesheet ">
10+ < script src ="../../../../assets/source-file.js " type ="text/javascript " charset ="utf-8 "> </ script >
11+ < link href ="../../../../assets/source-file.css " type ="text/css " rel ="stylesheet ">
12+ </ head >
13+ < body >
14+ < div style ="margin-top:3em " class ="ui container "> < h1 class ="ui header "> < a href ="../../../../index.html "> TypeScript coverage report</ a > </ h1 > < table style ="margin-top:2em " class ="ui celled table "> < thead class =""> < tr class =""> < th class =""> Filename</ th > < th class =""> Percent</ th > < th class =""> Threshold</ th > < th class =""> Total</ th > < th class =""> Covered</ th > < th class =""> Uncovered</ th > </ tr > </ thead > < tbody class =""> < tr class ="positive "> < td class =""> app/src/Dashboard/NavbarDash.tsx</ td > < td class =""> 88.44%</ td > < td class =""> 80%</ td > < td class =""> 225</ td > < td class =""> 199</ td > < td class =""> 26</ td > </ tr > </ tbody > </ table > < textarea id ="editor " readonly ="" style ="margin-top:3em "> import React, { useState, useContext } from 'react';
15+ import { Theme } from '@mui/material/styles';
16+ import withStyles from '@mui/styles/withStyles';
17+ import createStyles from '@mui/styles/createStyles';
18+ import makeStyles from '@mui/styles/makeStyles';
19+ import AppBar from '@mui/material/AppBar';
20+ import Avatar from '@mui/material/Avatar';
21+ import Brightness3Icon from '@mui/icons-material/Brightness3';
22+ import Brightness5Icon from '@mui/icons-material/Brightness5';
23+ import Button from '@mui/material/Button';
24+ import EventNoteIcon from '@mui/icons-material/EventNote';
25+ import HomeIcon from '@mui/icons-material/Home';
26+ import Toolbar from '@mui/material/Toolbar';
27+ import Typography from '@mui/material/Typography';
28+ import { Link } from 'react-router-dom';
29+ import Menu from '@mui/material/Menu';
30+ import MenuItem from '@mui/material/MenuItem';
31+ import SortIcon from '@mui/icons-material/Sort';
32+ import StarBorderIcon from '@mui/icons-material/StarBorder';
33+ import PersonIcon from '@mui/icons-material/Person';
34+ import greenLogo from '../public/icons/png/512x512.png';
35+ import {setStyle} from '../redux/reducers/slice/styleSlice'
36+ import { useSelector,useDispatch } from 'react-redux';
37+
38+ // NavBar text and button styling
39+ const useStyles = makeStyles((theme: Theme) => createStyles({
40+ root: {
41+ flexGrow: 1,
42+ width: '100%',
43+ },
44+ menuButton: {
45+ marginRight: theme.spacing(2),
46+ color: 'white',
47+ },
48+ title: {
49+ flexGrow: 1,
50+ color: 'white',
51+ },
52+ manageProject: {
53+ display: 'flex',
54+ justifyContent: 'center',
55+ },
56+ }));
57+ // sorting options
58+ const sortMethods = ['RATING', 'DATE', 'USER'];
59+ // Drop down menu button for SORT PROJECTS
60+ const StyledMenu = withStyles({
61+ paper: {
62+ border: '1px solid #d3d4d5',
63+ }
64+ })(props => (
65+ <Menu
66+ elevation={0}
67+ // getContentAnchorEl={null}
68+ anchorOrigin={{
69+ vertical: 'bottom',
70+ horizontal: 'center'
71+ }}
72+ transformOrigin={{
73+ vertical: 'top',
74+ horizontal: 'center'
75+ }}
76+ {...props}
77+ />
78+ ));
79+ const StyledMenuItem = withStyles(theme => ({
80+ root: {
81+ '&:focus': {
82+ '& .MuiListItemIcon-root, & .MuiListItemText-primary': {
83+ color: theme.palette.common.white
84+ }
85+ }
86+ }
87+ }))(MenuItem);
88+ // TO DO: set types of props validation
89+ export default function NavBar(props) {
90+ // TO DO: import setStyle
91+ const classes = useStyles();
92+ const style = useSelector(store => store.styleSlice);
93+ const dispatch = useDispatch();
94+ const toggling = () => setIsOpen(!isOpen);
95+ // toggle to open and close dropdown sorting menu
96+ const [isOpen, setIsOpen] = useState(false);
97+ // State for sort projects button
98+ const [anchorEl, setAnchorEl] = React.useState(null);
99+ const handleClick = event => {
100+ setAnchorEl(event.currentTarget);
101+ };
102+ const handleClose = () => {
103+ setAnchorEl(null);
104+ };
105+ return (
106+ <div className={classes.root} style={style}>
107+ <AppBar position='static'>
108+ <Toolbar>
109+ <Avatar src={greenLogo}></Avatar>
110+ <Typography variant="h6" style={{ marginLeft: '1rem' }} className={classes.title}>
111+ ReacType
112+ </Typography>
113+ <div style ={ { textDecoration: 'none' } }>
114+ <Button
115+ variant='contained'
116+ color='primary'
117+ onClick={handleClick}
118+ className='navbarButton'
119+ id='navbarButton'
120+ endIcon={<SortIcon/>}
121+ >
122+ SORT PROJECT
123+ </Button>
124+ <StyledMenu // Dropdown menu connected to Manage Project Button
125+ id='customized-menus'
126+ anchorEl={anchorEl}
127+ keepMounted
128+ open={Boolean(anchorEl)}
129+ onClose={handleClose}
130+ >
131+ {sortMethods.map((option, index) => (
132+ <StyledMenuItem onClick={() => {
133+ props.optionClicked(option);
134+ toggling();
135+ handleClose();
136+ }}
137+ variant='contained'
138+ color='primary'
139+ style={{ minWidth: '137.69px' }}
140+ className={classes.manageProject}
141+ key={index}
142+ >
143+ <Button
144+ color='primary'
145+ endIcon={(option === 'RATING') ? <StarBorderIcon/> : (option === 'DATE') ? <EventNoteIcon/> : (option === 'USER') ? <PersonIcon/> : ''}
146+ >
147+ {option}
148+ </Button>
149+ </StyledMenuItem>
150+ ))}
151+ </StyledMenu>
152+ </div>
153+ <Button
154+ className='navbarButton'
155+ id='navbarDashButton'
156+ color='primary'
157+ variant='contained'
158+ style={{minWidth: '113.97px'}}
159+ endIcon={props.isThemeLight ? <Brightness3Icon/> : <Brightness5Icon/>}
160+ onClick={() => {
161+ !style.backgroundColor
162+ ? dispatch(setStyle({ backgroundColor: '#21262D' })) //dark mode color
163+ : dispatch(setStyle( null ))
164+ props.isThemeLight ? props.setTheme(false) : props.setTheme(true);
165+ }}
166+ >
167+ {props.isThemeLight ? 'Dark Mode' : 'Light Mode'}
168+ </Button>
169+ <div>
170+ <Link to='/' style={{textDecoration: 'none'}}>
171+ <Button
172+ variant='contained'
173+ color='primary'
174+ style={{ minWidth: '137.69px'}}
175+ className="navbarButton"
176+ id="ratingButton"
177+ endIcon={<HomeIcon/>}
178+ >
179+ HOME
180+ </Button>
181+ </Link>
182+ </div>
183+ </Toolbar>
184+ </AppBar>
185+ </div>
186+ );
187+ }
188+ </ textarea > < pre id ="annotations " style ="display:none "> [{"file":"app/src/Dashboard/NavbarDash.tsx","line":65,"character":34,"text":"theme","kind":1},{"file":"app/src/Dashboard/NavbarDash.tsx","line":69,"character":8,"text":"color","kind":1},{"file":"app/src/Dashboard/NavbarDash.tsx","line":69,"character":15,"text":"theme","kind":1},{"file":"app/src/Dashboard/NavbarDash.tsx","line":69,"character":21,"text":"palette","kind":1},{"file":"app/src/Dashboard/NavbarDash.tsx","line":69,"character":29,"text":"common","kind":1},{"file":"app/src/Dashboard/NavbarDash.tsx","line":69,"character":36,"text":"white","kind":1},{"file":"app/src/Dashboard/NavbarDash.tsx","line":75,"character":31,"text":"props","kind":1},{"file":"app/src/Dashboard/NavbarDash.tsx","line":84,"character":9,"text":"anchorEl","kind":1},{"file":"app/src/Dashboard/NavbarDash.tsx","line":85,"character":22,"text":"event","kind":1},{"file":"app/src/Dashboard/NavbarDash.tsx","line":86,"character":16,"text":"event","kind":1},{"file":"app/src/Dashboard/NavbarDash.tsx","line":86,"character":22,"text":"currentTarget","kind":1},{"file":"app/src/Dashboard/NavbarDash.tsx","line":112,"character":12,"text":"anchorEl","kind":1},{"file":"app/src/Dashboard/NavbarDash.tsx","line":112,"character":22,"text":"anchorEl","kind":1},{"file":"app/src/Dashboard/NavbarDash.tsx","line":114,"character":26,"text":"anchorEl","kind":1},{"file":"app/src/Dashboard/NavbarDash.tsx","line":119,"character":22,"text":"props","kind":1},{"file":"app/src/Dashboard/NavbarDash.tsx","line":119,"character":28,"text":"optionClicked","kind":1},{"file":"app/src/Dashboard/NavbarDash.tsx","line":145,"character":21,"text":"props","kind":1},{"file":"app/src/Dashboard/NavbarDash.tsx","line":145,"character":27,"text":"isThemeLight","kind":1},{"file":"app/src/Dashboard/NavbarDash.tsx","line":150,"character":14,"text":"props","kind":1},{"file":"app/src/Dashboard/NavbarDash.tsx","line":150,"character":20,"text":"isThemeLight","kind":1},{"file":"app/src/Dashboard/NavbarDash.tsx","line":150,"character":35,"text":"props","kind":1},{"file":"app/src/Dashboard/NavbarDash.tsx","line":150,"character":41,"text":"setTheme","kind":1},{"file":"app/src/Dashboard/NavbarDash.tsx","line":150,"character":59,"text":"props","kind":1},{"file":"app/src/Dashboard/NavbarDash.tsx","line":150,"character":65,"text":"setTheme","kind":1},{"file":"app/src/Dashboard/NavbarDash.tsx","line":153,"character":13,"text":"props","kind":1},{"file":"app/src/Dashboard/NavbarDash.tsx","line":153,"character":19,"text":"isThemeLight","kind":1}]</ pre > </ div >
189+ < p class ="footer-text "> TypeScript Coverage Report generated by < a href ="https://github.com/plantain-00/type-coverage "> type-coverage</ a > and < a href ="https://github.com/alexcanessa/typescript-coverage-report "> typescript-coverage-report</ a > at Fri, 05 May 2023 01:51:04 GMT</ p >
190+ </ body >
191+ </ html >
192+
0 commit comments