Skip to content

Commit d32ce0d

Browse files
slhoehnslhoehn
committed
add sortmenu to navbar
2 parents 8a76f14 + 04e6c14 commit d32ce0d

22 files changed

+287
-250
lines changed

‎app/src/Dashboard/Form.jsx

Lines changed: 0 additions & 54 deletions
This file was deleted.

‎app/src/Dashboard/NavbarDash.tsx

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
import React, { useState, useContext } from 'react';
2+
import {
3+
withStyles,
4+
createStyles,
5+
makeStyles,
6+
Theme,
7+
} from '@material-ui/core/styles';
8+
import Button from '@material-ui/core/Button';
9+
import AppBar from '@material-ui/core/AppBar';
10+
import Avatar from '@material-ui/core/Avatar';
11+
import Toolbar from '@material-ui/core/Toolbar';
12+
import Typography from '@material-ui/core/Typography';
13+
import IconButton from '@material-ui/core/IconButton';
14+
import MenuIcon from '@material-ui/icons/Menu';
15+
import Menu from '@material-ui/core/Menu';
16+
import MenuItem from '@material-ui/core/MenuItem';
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 ListItemIcon from '@material-ui/core/ListItemIcon';
21+
// ROUTING TO DASHBOARD
22+
import { Link } from 'react-router-dom';
23+
import { styleContext } from '../containers/AppContainer';
24+
import StateContext from '../../context/context';
25+
import logo from '../../../resources/icon.png';
26+
27+
28+
// NavBar text and button styling
29+
const useStyles = makeStyles((theme: Theme) => createStyles({
30+
root: {
31+
flexGrow: 1,
32+
width: '100%',
33+
},
34+
menuButton: {
35+
marginRight: theme.spacing(2),
36+
color: 'white',
37+
},
38+
title: {
39+
flexGrow: 1,
40+
color: 'white',
41+
},
42+
manageProject: {
43+
display: 'flex',
44+
justifyContent: 'center',
45+
},
46+
}));
47+
48+
// --------------------------Sorting Buttons------------------------------------//
49+
const sortByRating = (props) => {
50+
console.log('rating');
51+
console.log("props", props);
52+
53+
// should change state to true: then in the return for project container, a conditional rendering will occur
54+
55+
// generate a sorted array of public projects based on likes
56+
// const sortedProjects = projects.sort((a, b) => ((a.likes > b.likes) ? 1 : -1));
57+
};
58+
59+
const sortByDate = (props) => {
60+
console.log('date');
61+
};
62+
63+
const sortByUser = (props) => {
64+
console.log('user');
65+
};
66+
67+
const sortMethods = ['rating', 'date', 'user'];
68+
69+
export default function NavBar(props) {
70+
71+
const classes = useStyles();
72+
const { style, setStyle } = useContext(styleContext);
73+
74+
75+
// toggle dropdown sorting menu
76+
const [isOpen, setIsOpen] = useState(false);
77+
const [selectedOption, setSelectedOption] = useState('rating');
78+
79+
const toggling = () => setIsOpen(!isOpen);
80+
// function not working properly, you have to go through the process and click twice
81+
const optionClicked = value => () => {
82+
setSelectedOption(value);
83+
setIsOpen(false);
84+
console.log('selectedOption', selectedOption);
85+
};
86+
87+
return (
88+
<div className={classes.root} style={style}>
89+
<AppBar position="static">
90+
<Toolbar>
91+
<Avatar src={logo}></Avatar>
92+
<Typography variant="h6" style={{ marginLeft: '1rem' }} className={classes.title}>
93+
ReacType
94+
</Typography>
95+
96+
{/* ==================================Sort by Button================================================== */}
97+
98+
<div style ={ { textDecoration: 'none' } }>
99+
<Button onClick={toggling}
100+
variant="contained"
101+
color="primary"
102+
style={{ minWidth: '137.69px' }}
103+
className="navbarButton"
104+
id="navbarButtonDash"
105+
>
106+
Sort documents
107+
</Button>
108+
109+
{
110+
isOpen && (
111+
<div className="sortDoc">
112+
{sortMethods.map((option, index) => (
113+
<Button onClick={optionClicked(option)}
114+
variant="contained"
115+
color="primary"
116+
style={{ minWidth: '137.69px' }}
117+
className="navbarButton"
118+
key={index}
119+
> {option}
120+
</Button>
121+
))};
122+
</div>
123+
)
124+
}
125+
</div>
126+
127+
{/* ====================================Home Button============================================== */}
128+
<div style ={ { textDecoration: 'none' } }>
129+
<Link to="/">
130+
<Button
131+
variant="contained"
132+
color="primary"
133+
style={{ minWidth: '137.69px' }}
134+
className="navbarButton"
135+
id="ratingButton"
136+
> Home
137+
</Button>
138+
</Link>
139+
</div>
140+
</Toolbar>
141+
</AppBar>
142+
</div>
143+
);
144+
}

‎app/src/Dashboard/NavbarDd.tsx

Lines changed: 0 additions & 73 deletions
This file was deleted.

‎app/src/Dashboard/Project.jsx renamed to ‎app/src/Dashboard/Project.tsx

Lines changed: 15 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,25 @@
11
import React from 'react';
2-
import { gql, useMutation } from '@apollo/client';
3-
import PropTypes from 'prop-types';
4-
2+
import { useMutation } from '@apollo/client';
3+
import { ADD_LIKE, MAKE_COPY, DELETE_PROJECT } from './gqlStrings';
4+
5+
// Variable validation using typescript
6+
type props = {
7+
name: string,
8+
id: string,
9+
userId: string,
10+
username: string,
11+
likes: number,
12+
};
513

614
const Project = ({
7-
name, likes, id, userId, username,
8-
}) => {
15+
name, likes, id, username,
16+
}: props) : JSX.Element => {
917
// IMPORTANT:
1018
// 1) schema change projId => id to allows Apollo Client cache auto-update. Only works with 'id'
1119
// 2) always request the 'id' in a mutation request
1220

13-
const ADD_LIKE = gql`
14-
mutation AddLike($projId: ID!, $likes: Int!) {
15-
addLike(projId: $projId, likes: $likes)
16-
{
17-
id
18-
likes
19-
}
20-
}`;
21-
2221
const [addLike] = useMutation(ADD_LIKE);
23-
24-
25-
const MAKE_COPY = gql`
26-
mutation MakeCopy ($userId: ID!, $projId: ID!, $username: String!) {
27-
makeCopy(userId: $userId, projId: $projId, username: $username)
28-
{
29-
id
30-
}
31-
}`;
32-
3322
const [makeCopy] = useMutation(MAKE_COPY);
34-
35-
const DELETE_PROJECT = gql`
36-
mutation DeleteProject($projId: ID!) {
37-
deleteProject(projId: $projId)
38-
{
39-
id
40-
}
41-
}`;
42-
4323
const [deleteProject] = useMutation(DELETE_PROJECT);
4424

4525
function handleLike(e) {
@@ -59,9 +39,7 @@ const Project = ({
5939
// Use current user info to make a make copy of another user's project
6040
const currUserSSID = window.localStorage.getItem('ssid') || 'unavailable';
6141
const currUsername = window.localStorage.getItem('username') || 'unavailable';
62-
// if (userSSID !== 'guest') {
63-
// myVar = { userId: userSSID };
64-
// }
42+
6543

6644
function handleDownload(e) {
6745
e.preventDefault();
@@ -91,26 +69,16 @@ const Project = ({
9169
return (
9270
<div className = 'project'>
9371
<h2>Project: { name }</h2>
94-
{/* <h3>Project ID: {projId} </h3> */}
9572
<h3>Author: { username }</h3>
9673
<h3>Likes: { likes }</h3>
9774
<div>
9875
<button onClick={ handleLike }>like me!</button>
99-
<button onClick={ handleDownload }>download me!</button>
76+
{currUsername !== username ? <button onClick={ handleDownload }>download me!</button> : <span></span>}
10077
<button onClick={ handleDelete }>delete</button>
10178
</div>
10279
</div>
10380
);
10481
};
10582

106-
// Variable validation using propTypes
107-
Project.propTypes = {
108-
name: PropTypes.string.isRequired,
109-
id: PropTypes.string.isRequired,
110-
userId: PropTypes.string.isRequired,
111-
username: PropTypes.string.isRequired,
112-
likes: PropTypes.number.isRequired,
113-
};
114-
11583

11684
export default Project;

0 commit comments

Comments
 (0)