Skip to content

Commit 88cc3e5

Browse files
eddypjreddypjr
committed
icons added for every button and added modal on delete in dashboard
1 parent 26b2cb7 commit 88cc3e5

File tree

7 files changed

+138
-58
lines changed

7 files changed

+138
-58
lines changed

‎app/src/Dashboard/NavbarDash.tsx

Lines changed: 38 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,22 @@ import {
55
makeStyles,
66
Theme,
77
} from '@material-ui/core/styles';
8-
import Button from '@material-ui/core/Button';
98
import AppBar from '@material-ui/core/AppBar';
109
import Avatar from '@material-ui/core/Avatar';
10+
import Brightness3Icon from '@material-ui/icons/Brightness3';
11+
import Brightness5Icon from '@material-ui/icons/Brightness5';
12+
import Button from '@material-ui/core/Button';
13+
import EventNoteIcon from '@material-ui/icons/EventNote';
14+
import HomeIcon from '@material-ui/icons/Home';
1115
import Toolbar from '@material-ui/core/Toolbar';
1216
import Typography from '@material-ui/core/Typography';
1317
import { Link } from 'react-router-dom';
1418
import { styleContext } from '../containers/AppContainer';
1519
import Menu from '@material-ui/core/Menu';
1620
import MenuItem from '@material-ui/core/MenuItem';
21+
import SortIcon from '@material-ui/icons/Sort';
22+
import StarBorderIcon from '@material-ui/icons/StarBorder';
23+
import PersonIcon from '@material-ui/icons/Person';
1724
import greenLogo from '../public/icons/png/512x512.png';
1825

1926
// NavBar text and button styling
@@ -37,7 +44,7 @@ const useStyles = makeStyles((theme: Theme) => createStyles({
3744
}));
3845

3946
// sorting options
40-
const sortMethods = ['Rating', 'Date', 'User'];
47+
const sortMethods = ['RATING', 'DATE', 'USER'];
4148

4249
// Drop down menu button for SORT PROJECTS
4350
const StyledMenu = withStyles({
@@ -95,7 +102,7 @@ export default function NavBar(props) {
95102

96103
return (
97104
<div className={classes.root} style={style}>
98-
<AppBar position="static">
105+
<AppBar position='static'>
99106
<Toolbar>
100107
<Avatar src={greenLogo}></Avatar>
101108
<Typography variant="h6" style={{ marginLeft: '1rem' }} className={classes.title}>
@@ -106,16 +113,17 @@ export default function NavBar(props) {
106113

107114
<div style ={ { textDecoration: 'none' } }>
108115
<Button
109-
variant="contained"
110-
color="primary"
116+
variant='contained'
117+
color='primary'
111118
onClick={handleClick}
112-
className="navbarButton"
113-
id="navbarButton"
119+
className='navbarButton'
120+
id='navbarButton'
121+
endIcon={<SortIcon/>}
114122
>
115123
SORT PROJECT
116124
</Button>
117125
<StyledMenu // Dropdown menu connected to Manage Project Button
118-
id="customized-menus"
126+
id='customized-menus'
119127
anchorEl={anchorEl}
120128
keepMounted
121129
open={Boolean(anchorEl)}
@@ -127,23 +135,29 @@ export default function NavBar(props) {
127135
toggling();
128136
handleClose();
129137
}}
130-
variant="contained"
131-
color="primary"
138+
variant='contained'
139+
color='primary'
132140
style={{ minWidth: '137.69px' }}
133-
className="navbarButton"
141+
className={classes.manageProject}
134142
key={index}
135143
>
136-
{option}
144+
<Button
145+
color='primary'
146+
endIcon={(option === 'RATING') ? <StarBorderIcon/> : (option === 'DATE') ? <EventNoteIcon/> : (option === 'USER') ? <PersonIcon/> : ''}
147+
>
148+
{option}
149+
</Button>
137150
</StyledMenuItem>
138151
))}
139152
</StyledMenu>
140153
</div>
141154
<Button
142-
className="navbarButton"
143-
id="navbarDashButton"
144-
color="primary"
145-
variant="contained"
155+
className='navbarButton'
156+
id='navbarDashButton'
157+
color='primary'
158+
variant='contained'
146159
style={{minWidth: '113.97px'}}
160+
endIcon={props.isThemeLight ? <Brightness3Icon/> : <Brightness5Icon/>}
147161
onClick={() => {
148162
!props.styles[0].backgroundColor
149163
? props.styles[1]({ backgroundColor: '#21262D' }) //dark mode color
@@ -155,15 +169,17 @@ export default function NavBar(props) {
155169
</Button>
156170
{/* ====================================Home Button============================================== */}
157171

158-
<div style ={ { textDecoration: 'none' } }>
159-
<Link to="/">
172+
<div>
173+
<Link to='/' style={{textDecoration: 'none'}}>
160174
<Button
161-
variant="contained"
162-
color="primary"
163-
style={{ minWidth: '137.69px' }}
175+
variant='contained'
176+
color='primary'
177+
style={{ minWidth: '137.69px'}}
164178
className="navbarButton"
165179
id="ratingButton"
166-
> Home
180+
endIcon={<HomeIcon/>}
181+
>
182+
HOME
167183
</Button>
168184
</Link>
169185
</div>

‎app/src/Dashboard/Project.tsx

Lines changed: 82 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -7,17 +7,17 @@ import {
77
PUBLISH_PROJECT,
88
ADD_COMMENT,
99
} from './gqlStrings';
10-
import {
11-
withStyles,
12-
createStyles,
13-
makeStyles,
14-
Theme
15-
} from '@material-ui/core/styles';
10+
import { withStyles, createStyles, makeStyles, Theme } from '@material-ui/core/styles';
1611
import CloseIcon from '@material-ui/icons/Close';
1712
import FavoriteBorderIcon from '@material-ui/icons/FavoriteBorder';
13+
import FavoriteIcon from '@material-ui/icons/Favorite';
1814
import GetAppIcon from '@material-ui/icons/GetApp';
1915
import IconButton from '@material-ui/core/IconButton';
2016
import PublishIcon from '@material-ui/icons/Publish';
17+
import List from '@material-ui/core/List';
18+
import ListItem from '@material-ui/core/ListItem';
19+
import ListItemText from '@material-ui/core/ListItemText';
20+
import createModal from '../components/right/createModal';
2121
// Variable validation using typescript
2222
type props = {
2323
name: string,
@@ -41,19 +41,28 @@ const Project = ({
4141
// 2) always request the 'id' in a mutation request
4242
const [commentVal, setCommentVal] = useState('');
4343
const [clicked, setClicked] = useState(false);
44+
const [modal, setModal] = useState(null);
4445

4546
const [addLike] = useMutation(ADD_LIKE);
4647
const [makeCopy] = useMutation(MAKE_COPY);
4748
const [deleteProject] = useMutation(DELETE_PROJECT);
4849
const [publishProject] = useMutation(PUBLISH_PROJECT);
4950
const [addComment] = useMutation(ADD_COMMENT);
5051

51-
const handleIconClick = (id) => {
52-
setClicked(true);
53-
}
52+
const noPointer = {cursor: 'default'};
5453

54+
// const handleIconClick = () => {
55+
// if(clicked === false) {
56+
// setClicked(true);
57+
// } else if (clicked === true) {
58+
// setClicked(false);
59+
// }
60+
// }
61+
62+
//Likes the project when the heart icon is clicked
5563
function handleLike(e) {
5664
e.preventDefault();
65+
(clicked === false) ? setClicked(true) : (clicked === true) ? setClicked(false) : '';
5766
const myVar = {
5867
variables:
5968
{
@@ -65,7 +74,7 @@ const Project = ({
6574
addLike(myVar);
6675
}
6776

68-
77+
//Makes a copy of the public project and saves as a user project
6978
function handleDownload(e) {
7079
e.preventDefault();
7180
const myVar = {
@@ -79,17 +88,7 @@ const Project = ({
7988
makeCopy(myVar);
8089
}
8190

82-
function handleDelete(e) {
83-
e.preventDefault();
84-
const myVar = {
85-
variables:
86-
{
87-
projId: id,
88-
},
89-
};
90-
deleteProject(myVar);
91-
}
92-
91+
//Publishes project from user dashboard to public dashboard
9392
function handlePublish(e) {
9493
e.preventDefault();
9594
const myVar = {
@@ -102,6 +101,7 @@ const Project = ({
102101
publishProject(myVar);
103102
}
104103

104+
//Adds the comment to the project
105105
function handleComment(e) {
106106
e.preventDefault();
107107
const myVar = {
@@ -115,11 +115,13 @@ const Project = ({
115115
addComment(myVar)
116116
}
117117

118+
//sets state of commentVal to what the user types in to comment
118119
function handleChange(e) {
119120
const inputVal = e.target.value;
120121
setCommentVal(inputVal);
121122
}
122123

124+
//renders the last 5 comments into the comment area
123125
const recentComments = [];
124126
if (comments.length > 0) {
125127
const reversedCommentArray = comments.slice(0).reverse();
@@ -132,12 +134,66 @@ const Project = ({
132134
)}
133135
}
134136

135-
const noPointer = {cursor: 'default'};
137+
// ---Clear canvas functionality---
138+
// Closes out the open modal
139+
const closeModal = () => setModal('');
140+
141+
// Creates modal that asks if user wants to clear workspace
142+
// If user clears their workspace, then their components are removed from state and the modal is closed
143+
const clearWorkspace = () => {
144+
//Deletes project from the database
145+
const handleDelete = (e) => {
146+
e.preventDefault();
147+
const myVar = {
148+
variables:
149+
{
150+
projId: id,
151+
},
152+
};
153+
deleteProject(myVar);
154+
}
155+
156+
// Set modal options
157+
const children = (
158+
<List className="export-preference">
159+
<ListItem
160+
key={'clear'}
161+
button
162+
onClick={handleDelete}
163+
style={{
164+
border: '1px solid #3f51b5',
165+
marginBottom: '2%',
166+
marginTop: '5%'
167+
}}
168+
>
169+
<ListItemText
170+
primary={'Yes, delete this project'}
171+
style={{ textAlign: 'center' }}
172+
onClick={closeModal}
173+
/>
174+
</ListItem>
175+
</List>
176+
);
177+
178+
// Create modal
179+
setModal(
180+
createModal({
181+
closeModal,
182+
children,
183+
message: 'Are you sure want to delete this project?',
184+
primBtnLabel: null,
185+
primBtnAction: null,
186+
secBtnAction: null,
187+
secBtnLabel: null,
188+
open: true
189+
})
190+
);
191+
};
136192

137193
return (
138194
<div className = 'project'>
139195
{ currUsername === username ?
140-
<IconButton tooltip = "Delete Project" onClick={ handleDelete } style={{position: 'absolute', right: '0', padding: '0'}}>
196+
<IconButton tooltip = "Delete Project" onClick={ clearWorkspace } style={{position: 'absolute', right: '0', padding: '0'}}>
141197
<CloseIcon/>
142198
</IconButton>
143199
: '' }
@@ -147,18 +203,16 @@ const Project = ({
147203
<h3>Likes: { likes }</h3>
148204
</div>
149205
<div className = "icons">
150-
{ currUsername !== username ?
151206
<IconButton tooltip="Like Template" style={noPointer} onClick = { handleLike }>
152-
<FavoriteBorderIcon fontSize="large" className = "heart" style={noPointer}/>
207+
{clicked ? <FavoriteIcon fontSize='Large' color='secondary'/> : <FavoriteBorderIcon fontSize='Large'/>}
153208
</IconButton>
154-
: '' }
155209
{ currUsername !== username ?
156210
<IconButton tooltip ="Download Template" style={noPointer} onClick={ handleDownload }>
157211
<GetAppIcon fontSize="large" className="download"/>
158212
</IconButton>
159213
: '' }
160214
{ currUsername === username ?
161-
<IconButton tooltip ="Download Template" style={noPointer} onClick={ handlePublish }>
215+
<IconButton tooltip ="Publish Template" style={noPointer} onClick={ handlePublish }>
162216
<PublishIcon fontSize="large"/>
163217
</IconButton>
164218
: '' }
@@ -176,6 +230,7 @@ const Project = ({
176230
</div>
177231
</div>
178232
: '' }
233+
{modal}
179234
</div>
180235
);
181236
};

‎app/src/Dashboard/ProjectContainer.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -95,9 +95,9 @@ const ProjectContainer = () => {
9595
setSelectedOption(value);
9696
};
9797
// checking which sorting method was selected from drop down menu and invoking correct sorting function
98-
if (selectedOption === 'Date') sortedProjects = sortByDate(sortedProjects);
99-
else if (selectedOption === 'User') sortedProjects = sortByUser(sortedProjects);
100-
else if (selectedOption === 'Rating') sortedProjects = sortByRating(sortedProjects);
98+
if (selectedOption === 'DATE') sortedProjects = sortByDate(sortedProjects);
99+
else if (selectedOption === 'USER') sortedProjects = sortByUser(sortedProjects);
100+
else if (selectedOption === 'RATING') sortedProjects = sortByRating(sortedProjects);
101101

102102
// create an array of components Project that will be conditionally rendered
103103
const sortedDisplay = [];

‎app/src/components/main/Canvas.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,6 @@ function Canvas() {
3434
//pushes the last user action on the canvas into the past array of Component
3535
state.components[focusIndex].past.push(deepCopiedState.components[focusIndex].children);
3636
};
37-
console.log('state', state)
3837

3938
// This hook will allow the user to drag items from the left panel on to the canvas
4039
const [{ isOver }, drop] = useDrop({

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { makeStyles } from '@material-ui/core/styles';
55
import List from '@material-ui/core/List';
66
import ListItem from '@material-ui/core/ListItem';
77
import ListItemText from '@material-ui/core/ListItemText';
8+
import GetAppIcon from '@material-ui/icons/GetApp';
89
import WarningIcon from '@material-ui/icons/Warning';
910
import PublishIcon from '@material-ui/icons/Publish';
1011
import Button from '@material-ui/core/Button';
@@ -125,6 +126,7 @@ export default function ExportButton() {
125126
color="primary"
126127
onClick={showGenerateAppModal}
127128
id="navbarButton"
129+
endIcon={<GetAppIcon/>}
128130
>
129131
EXPORT
130132
</Button>

0 commit comments

Comments
 (0)