Skip to content

Commit bd0dbfa

Browse files
khuongdn16khuongdn16
committed
fixed saveProject duplicate
2 parents 30efd8f + 6c73cf1 commit bd0dbfa

File tree

9 files changed

+333
-19
lines changed

9 files changed

+333
-19
lines changed

‎app/src/Dashboard/FormsContainer.jsx

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import React from 'react';
2+
import { Link } from 'react-router-dom';
3+
4+
import { gql, useQuery } from '@apollo/client';
5+
6+
7+
import Form from './Form.jsx';
8+
9+
// Implement Apollo Client useQuery hook to retrieve data from the server through graphQL. This includes 2 steps:
10+
// 1) Impliment Apollo Provider in the top component in ./src/index.js, this allows children components access to the queried data
11+
// 2) useQuery hook will update the data stored in Apollo Client's cache and automatically trigger child components rendering
12+
13+
const FormsContainer = () => {
14+
// define the graphQL query string
15+
const GET_TESTS = gql`query {readAllTests { description id likes }}`;
16+
// useQuery hook abstracts fetch request
17+
const { loading, error, data } = useQuery(GET_TESTS, { pollInterval: 1000 } );
18+
if (loading) return <p>Loading...</p>;
19+
if (error) return <p>Error :{error}</p>;
20+
// based on resolver(readAllTests) for this query, the data is stored in the data object with the key 'readAllTests'
21+
const myTests = data.readAllTests;
22+
// generate an array of Form components based on data
23+
const forms = myTests.map((test, index) => <Form key={index} id={test.id} description={test.description} likes={test.likes}/>);
24+
25+
return (
26+
<div>
27+
<Link to="/">
28+
<button type="button">Go Back</button>
29+
</Link>
30+
<div className = "formContainer">
31+
{forms}
32+
</div>
33+
</div>
34+
);
35+
};
36+
37+
export default FormsContainer;

‎app/src/Dashboard/NavbarDash.tsx

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
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+
78+
const toggling = () => setIsOpen(!isOpen);
79+
80+
81+
return (
82+
<div className={classes.root} style={style}>
83+
<AppBar position="static">
84+
<Toolbar>
85+
<Avatar src={logo}></Avatar>
86+
<Typography variant="h6" style={{ marginLeft: '1rem' }} className={classes.title}>
87+
ReacType
88+
</Typography>
89+
90+
{/* ==================================Sort by Button================================================== */}
91+
92+
<div style ={ { textDecoration: 'none' } }>
93+
<Button onClick={toggling}
94+
variant="contained"
95+
color="primary"
96+
style={{ minWidth: '137.69px' }}
97+
className="navbarButton"
98+
id="navbarButtonDash"
99+
>
100+
Sort documents
101+
</Button>
102+
103+
{
104+
isOpen && (
105+
<div className="sortDoc">
106+
{sortMethods.map((option, index) => (
107+
<Button onClick={() => {
108+
props.optionClicked(option);
109+
toggling();
110+
}}
111+
variant="contained"
112+
color="primary"
113+
style={{ minWidth: '137.69px' }}
114+
className="navbarButton"
115+
key={index}
116+
> {option}
117+
</Button>
118+
))};
119+
</div>
120+
)
121+
}
122+
</div>
123+
124+
{/* ====================================Home Button============================================== */}
125+
<div style ={ { textDecoration: 'none' } }>
126+
<Link to="/">
127+
<Button
128+
variant="contained"
129+
color="primary"
130+
style={{ minWidth: '137.69px' }}
131+
className="navbarButton"
132+
id="ratingButton"
133+
> Home
134+
</Button>
135+
</Link>
136+
</div>
137+
</Toolbar>
138+
</AppBar>
139+
</div>
140+
);
141+
}

‎app/src/Dashboard/ProjectContainer.tsx

Lines changed: 90 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,66 @@
1-
import React from 'react';
1+
import React, { useState, useEffect } from 'react';
22
import { Link } from 'react-router-dom';
33
import { useQuery } from '@apollo/client';
4+
45
import { GET_PROJECTS } from './gqlStrings';
56
import Project from './Project.tsx';
7+
import NavBar from './NavbarDash';
68

79
// Implement Apollo Client useQuery hook to retrieve data from the server through graphQL. This includes 2 steps:
810
// 1) Impliment Apollo Provider in the top component in ./src/index.js, this allows children components access to the queried data
911
// 2) useQuery hook will update the data stored in Apollo Client's cache and automatically trigger child components rendering
1012

1113
const ProjectContainer = () => {
12-
let myVar = {};
14+
const myVar = {};
1315
// Need this for the individual user dasboard, for now, dashboard shows all projects from all users
1416
const userSSID = window.localStorage.getItem('ssid') || 'unavailable';
1517
const username = window.localStorage.getItem('username') || 'unavailable';
1618
// if (userSSID !== 'guest') {
1719
// myVar = { userId: userSSID };
1820
// }
1921

22+
// --------------------------Sorting Buttons------------------------------------//
23+
// hook for sorting menu
24+
const [selectedOption, setSelectedOption] = useState(null);
25+
26+
const sortByRating = (projects) => {
27+
// console.log('sort by rating :', projects);
28+
// generate a sorted array of public projects based on likes
29+
const sortedRatings = projects.sort((a, b) => b.likes - a.likes );
30+
// console.log('sort by rating result >>>', sortedRatings);
31+
32+
// setRenderedOption(sortedRatings);
33+
return sortedRatings;
34+
};
35+
36+
const sortByDate = (projects) => {
37+
console.log('sort by date', projects);
38+
// not sure how to sort by dates
39+
};
40+
41+
const sortByUser = (projects) => {
42+
console.log('sort by user', projects);
43+
const sortedRatings = projects.sort((a, b) => b.user - a.user);
44+
console.log('sort by rating result >>>', sortedRatings);
45+
46+
return sortedRatings;
47+
};
48+
49+
50+
// ===================================================================================== //
51+
2052
// useQuery hook abstracts fetch request
21-
const { loading, error, data } = useQuery(GET_PROJECTS, { pollInterval: 2000, variables: myVar }); // Need to find where the userId is stored for the logged in user.
53+
// Need to find where the userId is stored for the logged in user.
54+
const { loading, error, data } = useQuery(GET_PROJECTS, { pollInterval: 2000, variables: myVar });
2255
if (loading) return <p>Loading...</p>;
2356
if (error) return <p>Error :{error}</p>;
2457
// based on resolver(getAllProject) for this query, the data is stored in the data object with the key 'getAllProjects'
2558
const projects = data.getAllProjects;
26-
console.log('Projects >>> ', projects);
59+
let sortedProjects = [];
60+
// console.log('Projects >>> ', projects);
2761
// generate an array of Project components based on data
28-
const publicProjects = [];
29-
const userProjects = [];
62+
let publicDisplay = [];
63+
const userDisplay = [];
3064
projects.forEach((proj, index) => {
3165
const component = <Project
3266
key= { index }
@@ -36,24 +70,65 @@ const ProjectContainer = () => {
3670
userId = {proj.userId}
3771
username = {proj.username}
3872
id = {proj.id}
39-
/>;
40-
if (username === proj.username) userProjects.push(component);
41-
if (proj.published) publicProjects.push(component);
73+
/>;
74+
if (username === proj.username) userDisplay.push(component);
75+
if (proj.published) {
76+
// publicDisplay.push(component);
77+
sortedProjects.push(proj);
78+
}
4279
});
4380

81+
82+
// function for sorting menu in nav bar
83+
84+
const optionClicked = (value) => {
85+
console.log('value', value);
86+
setSelectedOption(value);
87+
};
88+
89+
90+
91+
console.log('SortedProject >>> ', sortedProjects);
92+
93+
// if selectedOption === null, displaySorted = publicProjects
94+
// else displaySorted = convert to components from return value of a sortBy function)
95+
if (selectedOption === 'date') sortedProjects = sortByDate(sortedProjects);
96+
else if (selectedOption === 'user') sortedProjects = sortByUser(sortedProjects);
97+
else if (selectedOption === 'rating') sortedProjects = sortByRating(sortedProjects);
98+
99+
const sortedDisplay = [];
100+
sortedProjects.forEach((proj, index) => {
101+
console.log('Pushing to displayProjects >>> ', proj);
102+
sortedDisplay.push(<Project
103+
key= { index }
104+
name = {proj.name}
105+
likes = {proj.likes}
106+
published = { proj.published }
107+
userId = {proj.userId}
108+
username = {proj.username}
109+
id = {proj.id}
110+
/>);
111+
});
112+
console.log('displaySorted >>> ', sortedDisplay);
113+
114+
115+
// if (selectedOption === 'date') sortByDate(publicProjects);
116+
// if (selectedOption === 'user') sortByUser(publicProjects);
117+
// console.log('selectedOption', selectedOption);
118+
119+
120+
44121
return (
45-
<div>
46-
<Link to="/">
47-
<button type="button">Go Back</button>
48-
</Link>
122+
<div>
123+
<NavBar optionClicked = {optionClicked}/>
49124
<h1> Public Dashboard </h1>
50125
<div className = "projectContainer">
51-
{publicProjects}
126+
{sortedDisplay}
52127
</div>
53128
<hr></hr>
54129
<h1> User Dashboard </h1>
55130
<div className = "projectContainer">
56-
{userProjects}
131+
{userDisplay}
57132
</div>
58133

59134
</div>

‎app/src/Dashboard/SortMenu.jsx

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
// import { supportsResultCaching } from '@apollo/client/cache/inmemory/entityStore';
2+
import React, { useState } from 'react';
3+
import Button from '@material-ui/core/Button';
4+
import { useQuery } from '@apollo/client';
5+
import { GET_PROJECTS } from './gqlStrings';
6+
import Project from './Project.tsx';
7+
8+
9+
10+
11+
export default function SortMenu() {
12+
const [isOpen, setIsOpen] = useState(false);
13+
const toggling = () => setIsOpen(!isOpen);
14+
15+
return (
16+
<div style ={ { textDecoration: 'none' } }>
17+
<Button onClick={toggling}
18+
variant="contained"
19+
color="primary"
20+
style={{ minWidth: '137.69px' }}
21+
className="navbarButton"
22+
id="navbarButtonDash"
23+
>
24+
Sort documents
25+
</Button>
26+
27+
{
28+
isOpen && (
29+
<div className="sortDoc">
30+
<Button
31+
variant="contained"
32+
color="primary"
33+
style={{ minWidth: '137.69px' }}
34+
className="navbarButton"
35+
id="ratingButton"
36+
onClick={sortByRating}
37+
> rating </Button>
38+
<Button
39+
variant="contained"
40+
color="primary"
41+
style={{ minWidth: '137.69px' }}
42+
className="navbarButton"
43+
id="dateButton"
44+
onClick={sortByDate}
45+
> date </Button>
46+
<Button
47+
variant="contained"
48+
color="primary"
49+
style={{ minWidth: '137.69px' }}
50+
className="navbarButton"
51+
id="userButton"
52+
onClick={sortByUser}
53+
> user </Button>
54+
</div>
55+
)
56+
}
57+
</div>
58+
);
59+
}

‎app/src/Dashboard/navbar.jsx

Whitespace-only changes.

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -132,6 +132,7 @@
132132
"electron-window-manager": "^1.0.6",
133133
"enzyme": "^3.4.1",
134134
"enzyme-adapter-react-16": "^1.2.0",
135+
"eslint-plugin-react-hooks": "^4.2.0",
135136
"express-graphql": "^0.12.0",
136137
"graphql": "^15.5.0",
137138
"immutable": "^4.0.0-rc.12",

0 commit comments

Comments
 (0)