Merge pull request #18 from MadinventorZero/dash

Dash

Author: jonocr

app/src/Dashboard/ProjectContainer.tsx

@@ -1,27 +1,36 @@
-import React, { useState, useContext, useEffect, createContext } from 'react';
-import { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';
+import React, {
+  useState, useContext, useEffect, createContext,
+} from 'react';
+import {
+  createMuiTheme, MuiThemeProvider, makeStyles, Theme, useTheme,
+} from '@material-ui/core/styles';
 import { useQuery } from '@apollo/client';
+
+import AppBar from '@material-ui/core/AppBar';
+import Tabs from '@material-ui/core/Tabs';
+import Tab from '@material-ui/core/Tab';
+
+import Box from '@material-ui/core/Box';
 import { GET_PROJECTS } from './gqlStrings';
 import Project from './Project';
 import NavBarDash from './NavbarDash';
-import AppContainer from '../containers/AppContainer';
+
 import { theme1, theme2 } from '../public/styles/theme';
 // Implement Apollo Client useQuery hook to retrieve data from the server through graphQL. This includes 2 steps:
 // 1) Impliment Apollo Provider in the top component in ./src/index.js, this allows children components access to the queried data
 // 2) useQuery hook will update the data stored in Apollo Client's cache and automatically trigger child components rendering
 
 export const styleContext = createContext({
   style: null,
-  setStyle: null
+  setStyle: null,
 });
 
 // setting light and dark themes (navbar and background); linked to theme.ts
 const lightTheme = theme1;
 const darkTheme = theme2; // dark mode color in theme.ts not reached
 
 
-const arrToComponent = (arr) => {
-  return arr.map((proj, index) => <Project
+const arrToComponent = arr => arr.map((proj, index) => <Project
                                         key= {index}
                                         name = {proj.name}
                                         likes = {proj.likes}
@@ -32,22 +41,81 @@ const arrToComponent = (arr) => {
                                         id = {proj.id}
                                         comments = {proj.comments}
                                       />);
+
+// Caret Start Pulled from materialUI to create a tab panel                                      
+const a11yProps = (index: any) => ({
+  id: `vertical-tab-${index}`,
+  'aria-controls': `vertical-tabpanel-${index}`,
+});
+
+interface LinkTabProps {
+  label?: string;
+  href?: string;
+}
+
+const LinkTab = (props: LinkTabProps) => (
+    <Tab
+      onClick={(event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
+        event.preventDefault();
+      }}
+      {...props}
+    />
+);
+
+const TabPanelItem = (props: TabPanelProps): JSX.Element => {
+  const theme = useTheme();
+  const {
+    children, index, value, ...other
+  } = props;
+  return (
+    <div
+    role="tabpanel"
+    hidden={value !== index}
+    id={`vertical-tabpanel-${index}`}
+    aria-labelledby={`vertical-tab-${index}`}
+    {...other}
+  >
+    {value === index && (
+      <Box p={3}>
+        {children}
+      </Box>
+    )}
+  </div>
+  );
 };
 
+const useStyles = makeStyles((theme) => ({
+  root: {
+    flexGrow: 1,
+    backgroundColor: theme.palette.background.paper,
+    display: 'flex',
+    // height: 224,
+  },
+  tabs: {
+    borderRight: `1px solid ${theme.palette.divider}`,
+  },
+}));
+// Caret End of prefab code to generate a tab panel
+
+const ProjectContainer = (): JSX.Element => {
+  const classes = useStyles();
+  const [value, setValue] = useState(0);
+
+  const handleChange = (event: React.ChangeEvent<{}>, newValue: number) => {
+    setValue(newValue);
+  };
 
-const ProjectContainer = () => {
+  // Start Caret of old code from project container
   const myVar = {};
   // Need this for the individual user dasboard, for now, dashboard shows all projects from all users
   const userSSID = window.localStorage.getItem('ssid') || 'unavailable';
   const username = window.localStorage.getItem('username') || 'unavailable';
- 
+
   const [isThemeLight, setTheme] = useState(true);
 
   const initialStyle = useContext(styleContext);
   const [style, setStyle] = useState(initialStyle);
 
-  // --------------------------Sorting Buttons------------------------------------//
-  
   // hook for sorting menu
   const [selectedOption, setSelectedOption] = useState('RATING');
 
@@ -68,55 +136,72 @@ const ProjectContainer = () => {
     const sortedRatings = projects.sort((a, b) => b.username - a.username);
     return sortedRatings;
   };
-  // ===================================================================================== //
-
   // function for selecting drop down sorting menu
   const optionClicked = (value) => {
     setSelectedOption(value);
   };
-  // ===================================================================================== //
-
-
   // useQuery hook abstracts fetch request
   const { loading, error, data } = useQuery(GET_PROJECTS, { pollInterval: 2000, variables: myVar });
   if (loading) return <p>Loading...</p>;
   if (error) return <p>Error :{error}</p>;
-
   // based on resolver(getAllProject) for this query, the data is stored in the data object with the key 'getAllProjects'
   const projects = data.getAllProjects;
-  
   // create array to hold the data recieved in the public dashboard the will be conditionally rendered
-  let sortedProjects = projects.filter(proj => proj.published);
-  const userProjects = projects.filter(proj => proj.username === username);
+  let sortedProjects = projects.filter(proj => {
+    return proj.published;
+  });
+  const userProjects = projects.filter((proj) => {
+    return proj.username === username;
+  });
 
   // checking which sorting method was selected from drop down menu and invoking correct sorting function
   if (selectedOption === 'DATE') sortedProjects = sortByDate(sortedProjects);
   else if (selectedOption === 'USER') sortedProjects = sortByUser(sortedProjects);
   else if (selectedOption === 'RATING') sortedProjects = sortByRating(sortedProjects);
-  
+
 
   // create array to hold the components Project of loggin-in users
   // generate an array of Project components based on queried data
   const userDisplay = arrToComponent(userProjects);
-
   // create an array of components Project that will be conditionally rendered
   const sortedDisplay = arrToComponent(sortedProjects);
+  // Caret End of old code from Project Container
 
   return (
-    <MuiThemeProvider theme={isThemeLight ? lightTheme : darkTheme}>
-    <div className = "dashboardContainer">
-      <NavBarDash setTheme={setTheme} styles={[style, setStyle]} isThemeLight={isThemeLight} optionClicked={optionClicked}/>
-      <h1> Public Dashboard </h1>
-        <div className = "projectContainer">
-            {sortedDisplay}
-        </div>
-      <hr></hr>
-        <h1> User Dashboard </h1>
-        <div className = "projectContainer">
-          {userDisplay}
+    <div className={classes.root}>
+      <MuiThemeProvider theme={isThemeLight ? lightTheme : darkTheme}>
+      <div className= {'dashboardContainer'}>
+        <NavBarDash setTheme={setTheme} styles={[style, setStyle]} isThemeLight={isThemeLight} optionClicked={optionClicked}/>
+        <div className={'userDashboard'}>
+        {/* <AppBar position="static"> */}
+          <Tabs
+            variant="scrollable"
+            orientation="vertical"
+            value={value}
+            onChange={handleChange}
+            aria-label="Vertical tabs example"
+            className={classes.tabs}
+          >
+            <LinkTab label="Shared Dashboard" {...a11yProps(0)} />
+            <LinkTab label="Private Dashboard" {...a11yProps(1)} />
+          </Tabs>
+        {/* </AppBar> */}
+        <TabPanelItem className= {'projectPanel'} value={value} index={0}>
+        <h1> Shared Dashboard </h1>
+          <div className="projectContainer">
+              {sortedDisplay}
+          </div>
+        </TabPanelItem>
+        <TabPanelItem className= {'projectPanel'} value={value} index={1}>
+        <h1> Private Dashboard </h1>
+          <div className="projectContainer">
+            {userDisplay}
+          </div>
+        </TabPanelItem>
         </div>
+      </div>
+      </MuiThemeProvider>
     </div>
-    </MuiThemeProvider>
   );
 };
 

app/src/Dashboard/styles.css

@@ -14,13 +14,23 @@
 
 .dashboardContainer {
   height: 100%;
+  width: 100%
+}
+
+.userDashboard {
+  display: flex;
+  flex-direction: row;
+}
+
+.projectPanel {
+  width: 100%;
 }
 
  .projectContainer{
   display: flex;
   flex-direction: column-reverse;
   flex-flow: row wrap;
-  height: 600px;
+  flex-grow: 1;
   overflow-y: scroll;
 }
 

app/src/components/right/TabPanel.tsx

@@ -19,7 +19,7 @@ interface TabPanelProps {
   value: any;
 }
 
-const TabPanelItem = (props: TabPanelProps) => {
+const TabPanelItem = (props: TabPanelProps): JSX.Element => {
   const theme = useTheme();
   const { children, index, value, ...other } = props;
   return (
@@ -31,8 +31,8 @@ const TabPanelItem = (props: TabPanelProps) => {
       {...other}
     >
       {value === index && (
-        <Box component='div'>
-          <Typography>{children}</Typography>
+        <Box component={'div'}>
+          {children}
         </Box>
       )}
     </div>
@@ -70,7 +70,7 @@ const useStyles = makeStyles((theme: Theme) => ({
   }
 }));
 
-const TabPanel = () => {
+const TabPanel = (): JSX.Element => {
   const classes = useStyles();
   const [value, setValue] = useState(0);
 

app/src/public/styles/style.css

@@ -542,9 +542,9 @@ a.nav_link:hover {
   background-color: #4e76c7;
 }
 
-.MuiTypography-body1 {
+/* .MuiTypography-body1 {
   background-color: oldlace;
-}
+} */