Skip to content

Commit 9e5d274

Browse files
MadinventorZerojonocrbuddhajjigaexkevinparkwilliamdyoon
committed
Refactoring Dash
Co-authored-by: jonocr <[email protected]> Co-authored-by: buddhajjigae <[email protected]> Co-authored-by: xkevinpark <[email protected]> Co-authored-by: williamdyoon <[email protected]>
1 parent a94de91 commit 9e5d274

File tree

4 files changed

+201
-34
lines changed

4 files changed

+201
-34
lines changed

‎app/src/Dashboard/ProjectContainer.tsx

Lines changed: 188 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,23 @@
1-
import React, { useState, useContext, useEffect, createContext } from 'react';
2-
import { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';
1+
import React, {
2+
useState, useContext, useEffect, createContext,
3+
} from 'react';
4+
import {
5+
createMuiTheme, MuiThemeProvider, makeStyles, Theme, useTheme,
6+
} from '@material-ui/core/styles';
37
import { useQuery } from '@apollo/client';
8+
9+
import AppBar from '@material-ui/core/AppBar';
10+
import Tabs from '@material-ui/core/Tabs';
11+
import Tab from '@material-ui/core/Tab';
12+
13+
// import {Tab, Tabs} from '@material-ui/core'
14+
15+
import Box from '@material-ui/core/Box';
416
import { GET_PROJECTS } from './gqlStrings';
517
import Project from './Project';
618
import NavBarDash from './NavbarDash';
19+
20+
721
import AppContainer from '../containers/AppContainer';
822
import { theme1, theme2 } from '../public/styles/theme';
923
// Implement Apollo Client useQuery hook to retrieve data from the server through graphQL. This includes 2 steps:
@@ -12,16 +26,15 @@ import { theme1, theme2 } from '../public/styles/theme';
1226

1327
export const styleContext = createContext({
1428
style: null,
15-
setStyle: null
29+
setStyle: null,
1630
});
1731

1832
// setting light and dark themes (navbar and background); linked to theme.ts
1933
const lightTheme = theme1;
2034
const darkTheme = theme2; // dark mode color in theme.ts not reached
2135

2236

23-
const arrToComponent = (arr) => {
24-
return arr.map((proj, index) => <Project
37+
const arrToComponent = arr => arr.map((proj, index) => <Project
2538
key= {index}
2639
name = {proj.name}
2740
likes = {proj.likes}
@@ -32,22 +45,147 @@ const arrToComponent = (arr) => {
3245
id = {proj.id}
3346
comments = {proj.comments}
3447
/>);
48+
49+
50+
// const ProjectContainerDetails = () => {
51+
// const myVar = {};
52+
// // Need this for the individual user dasboard, for now, dashboard shows all projects from all users
53+
// const userSSID = window.localStorage.getItem('ssid') || 'unavailable';
54+
// const username = window.localStorage.getItem('username') || 'unavailable';
55+
56+
// const [isThemeLight, setTheme] = useState(true);
57+
58+
// const initialStyle = useContext(styleContext);
59+
// const [style, setStyle] = useState(initialStyle);
60+
61+
// // --------------------------Sorting Buttons------------------------------------//
62+
63+
// // hook for sorting menu
64+
// const [selectedOption, setSelectedOption] = useState('RATING');
65+
66+
// const sortByRating = (projects) => {
67+
// // generate a sorted array of public projects based on likes
68+
// const sortedRatings = projects.sort((a, b) => b.likes - a.likes);
69+
// return sortedRatings;
70+
// };
71+
72+
// const sortByDate = (projects) => {
73+
// // generate a sorted array of public projects based on date
74+
// const sortedRatings = projects.sort((a, b) => b.createdAt - a.createdAt);
75+
// return sortedRatings;
76+
// };
77+
78+
// const sortByUser = (projects) => {
79+
// // generate a sorted array of public projects based on username
80+
// const sortedRatings = projects.sort((a, b) => b.username - a.username);
81+
// return sortedRatings;
82+
// };
83+
// // ===================================================================================== //
84+
85+
// // function for selecting drop down sorting menu
86+
// const optionClicked = (value) => {
87+
// setSelectedOption(value);
88+
// };
89+
// // ===================================================================================== //
90+
91+
92+
// // useQuery hook abstracts fetch request
93+
// const { loading, error, data } = useQuery(GET_PROJECTS, { pollInterval: 2000, variables: myVar });
94+
// if (loading) return <p>Loading...</p>;
95+
// if (error) return <p>Error :{error}</p>;
96+
97+
// // based on resolver(getAllProject) for this query, the data is stored in the data object with the key 'getAllProjects'
98+
// const projects = data.getAllProjects;
99+
100+
// // create array to hold the data recieved in the public dashboard the will be conditionally rendered
101+
// let sortedProjects = projects.filter(proj => proj.published);
102+
// const userProjects = projects.filter(proj => proj.username === username);
103+
104+
// // checking which sorting method was selected from drop down menu and invoking correct sorting function
105+
// if (selectedOption === 'DATE') sortedProjects = sortByDate(sortedProjects);
106+
// else if (selectedOption === 'USER') sortedProjects = sortByUser(sortedProjects);
107+
// else if (selectedOption === 'RATING') sortedProjects = sortByRating(sortedProjects);
108+
109+
110+
// // create array to hold the components Project of loggin-in users
111+
// // generate an array of Project components based on queried data
112+
// const userDisplay = arrToComponent(userProjects);
113+
114+
// // create an array of components Project that will be conditionally rendered
115+
// const sortedDisplay = arrToComponent(sortedProjects);
116+
// }
117+
const a11yProps = (index: any) => ({
118+
id: `vertical-tab-${index}`,
119+
'aria-controls': `vertical-tabpanel-${index}`,
120+
});
121+
122+
interface LinkTabProps {
123+
label?: string;
124+
href?: string;
125+
}
126+
127+
const LinkTab = (props: LinkTabProps) => (
128+
<Tab
129+
onClick={(event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
130+
event.preventDefault();
131+
}}
132+
{...props}
133+
/>
134+
);
135+
136+
const TabPanelItem = (props: TabPanelProps): JSX.Element => {
137+
const theme = useTheme();
138+
const {
139+
children, index, value, ...other
140+
} = props;
141+
return (
142+
<div
143+
role="tabpanel"
144+
hidden={value !== index}
145+
id={`vertical-tabpanel-${index}`}
146+
aria-labelledby={`vertical-tab-${index}`}
147+
{...other}
148+
>
149+
{value === index && (
150+
<Box p={3}>
151+
{children}
152+
</Box>
153+
)}
154+
</div>
155+
);
35156
};
36157

158+
const useStyles = makeStyles((theme) => ({
159+
root: {
160+
flexGrow: 1,
161+
backgroundColor: theme.palette.background.paper,
162+
display: 'flex',
163+
},
164+
tabs: {
165+
borderRight: `1px solid ${theme.palette.divider}`,
166+
},
167+
}));
168+
169+
const ProjectContainer = (): JSX.Element => {
170+
const classes = useStyles();
171+
const [value, setValue] = useState(0);
172+
173+
const handleChange = (event: React.ChangeEvent<{}>, newValue: number) => {
174+
setValue(newValue);
175+
};
37176

38-
const ProjectContainer = () => {
39177
const myVar = {};
40178
// Need this for the individual user dasboard, for now, dashboard shows all projects from all users
41179
const userSSID = window.localStorage.getItem('ssid') || 'unavailable';
42180
const username = window.localStorage.getItem('username') || 'unavailable';
43-
181+
44182
const [isThemeLight, setTheme] = useState(true);
45183

46184
const initialStyle = useContext(styleContext);
47185
const [style, setStyle] = useState(initialStyle);
48186

49187
// --------------------------Sorting Buttons------------------------------------//
50-
188+
51189
// hook for sorting menu
52190
const [selectedOption, setSelectedOption] = useState('RATING');
53191

@@ -84,39 +222,63 @@ const ProjectContainer = () => {
84222

85223
// based on resolver(getAllProject) for this query, the data is stored in the data object with the key 'getAllProjects'
86224
const projects = data.getAllProjects;
87-
225+
console.log('projects data', projects);
88226
// create array to hold the data recieved in the public dashboard the will be conditionally rendered
89-
let sortedProjects = projects.filter(proj => proj.published);
90-
const userProjects = projects.filter(proj => proj.username === username);
227+
let sortedProjects = projects.filter(proj => {
228+
return proj.published
229+
});
230+
const userProjects = projects.filter((proj) => {
231+
return proj.username === username;
232+
});
91233

92234
// checking which sorting method was selected from drop down menu and invoking correct sorting function
93235
if (selectedOption === 'DATE') sortedProjects = sortByDate(sortedProjects);
94236
else if (selectedOption === 'USER') sortedProjects = sortByUser(sortedProjects);
95237
else if (selectedOption === 'RATING') sortedProjects = sortByRating(sortedProjects);
96-
238+
97239

98240
// create array to hold the components Project of loggin-in users
99241
// generate an array of Project components based on queried data
100242
const userDisplay = arrToComponent(userProjects);
101-
243+
console.log('This is the userDisplay', userDisplay);
102244
// create an array of components Project that will be conditionally rendered
103245
const sortedDisplay = arrToComponent(sortedProjects);
104-
246+
console.log('This is the sortedDisplay', sortedDisplay);
105247
return (
106-
<MuiThemeProvider theme={isThemeLight ? lightTheme : darkTheme}>
107-
<div className = "dashboardContainer">
108-
<NavBarDash setTheme={setTheme} styles={[style, setStyle]} isThemeLight={isThemeLight} optionClicked={optionClicked}/>
109-
<h1> Public Dashboard </h1>
110-
<div className = "projectContainer">
111-
{sortedDisplay}
112-
</div>
113-
<hr></hr>
114-
<h1> User Dashboard </h1>
115-
<div className = "projectContainer">
116-
{userDisplay}
248+
<div className={classes.root}>
249+
<MuiThemeProvider theme={isThemeLight ? lightTheme : darkTheme}>
250+
<div >
251+
<NavBarDash setTheme={setTheme} styles={[style, setStyle]} isThemeLight={isThemeLight} optionClicked={optionClicked}/>
252+
<div >
253+
<AppBar position="static">
254+
<Tabs
255+
variant="scrollable"
256+
orientation="vertical"
257+
value={value}
258+
onChange={handleChange}
259+
aria-label="Vertical tabs example"
260+
className={classes.tabs}
261+
>
262+
<LinkTab label="Shared Dashboard" {...a11yProps(0)} />
263+
<LinkTab label="Private Dashboard" {...a11yProps(1)} />
264+
</Tabs>
265+
</AppBar>
266+
<TabPanelItem value={value} index={0}>
267+
<h1> Shared Dashboard </h1>
268+
<div >
269+
{sortedDisplay}
270+
</div>
271+
</TabPanelItem>
272+
<TabPanelItem value={value} index={1}>
273+
<h1> Private Dashboard </h1>
274+
<div className="projectContainer">
275+
{userDisplay}
276+
</div>
277+
</TabPanelItem>
117278
</div>
279+
</div>
280+
</MuiThemeProvider>
118281
</div>
119-
</MuiThemeProvider>
120282
);
121283
};
122284

‎app/src/Dashboard/styles.css

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,19 @@
1414

1515
.dashboardContainer {
1616
height: 100%;
17+
width: 100%
18+
}
19+
20+
.userDashboard {
21+
display: flex;
22+
flex-direction: column;
1723
}
1824

1925
.projectContainer{
2026
display: flex;
2127
flex-direction: column-reverse;
2228
flex-flow: row wrap;
23-
height: 600px;
29+
flex-grow: 1;
2430
overflow-y: scroll;
2531
}
2632

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

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ interface TabPanelProps {
1919
value: any;
2020
}
2121

22-
const TabPanelItem = (props: TabPanelProps) => {
22+
const TabPanelItem = (props: TabPanelProps): JSX.Element => {
2323
const theme = useTheme();
2424
const { children, index, value, ...other } = props;
2525
return (
@@ -31,8 +31,8 @@ const TabPanelItem = (props: TabPanelProps) => {
3131
{...other}
3232
>
3333
{value === index && (
34-
<Box p={0}>
35-
<Typography>{children}</Typography>
34+
<Box component={'div'}>
35+
{children}
3636
</Box>
3737
)}
3838
</div>
@@ -54,7 +54,6 @@ interface LinkTabProps {
5454
const LinkTab = (props: LinkTabProps) => {
5555
return (
5656
<Tab
57-
component="a"
5857
onClick={(event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
5958
event.preventDefault();
6059
}}
@@ -70,7 +69,7 @@ const useStyles = makeStyles((theme: Theme) => ({
7069
}
7170
}));
7271

73-
const TabPanel = () => {
72+
const TabPanel = (): JSX.Element => {
7473
const classes = useStyles();
7574
const [value, setValue] = useState(0);
7675

‎app/src/public/styles/style.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -542,9 +542,9 @@ a.nav_link:hover {
542542
background-color: #4e76c7;
543543
}
544544

545-
.MuiTypography-body1 {
545+
/* .MuiTypography-body1 {
546546
background-color: oldlace;
547-
}
547+
} */
548548

549549

550550

0 commit comments

Comments
 (0)