Merge pull request #8 from eddypjr/comments

KeyBindings, Refactored Sort Documents,  added instructions to Tutorial

Author: khuongdn16

app/src/Dashboard/FormsContainer.jsx renamed to app/src/Dashboard/FormsContainer.tsx

@@ -19,6 +19,7 @@ const FormsContainer = () => {
   if (error) return <p>Error :{error}</p>;
   // based on resolver(readAllTests) for this query, the data is stored in the data object with the key 'readAllTests'
   const myTests = data.readAllTests;
+  console.log('myTests', myTests);
   // generate an array of Form components based on data
   const forms = myTests.map((test, index) => <Form key={index} id={test.id} description={test.description} likes={test.likes}/>);
 

app/src/Dashboard/NavbarDash.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useContext } from 'react';
 import {
+  withStyles, //added
   createStyles,
   makeStyles,
   Theme,
@@ -11,7 +12,12 @@ import Toolbar from '@material-ui/core/Toolbar';
 import Typography from '@material-ui/core/Typography';
 import { Link } from 'react-router-dom';
 import { styleContext } from '../containers/AppContainer';
-import logo from '../../../resources/icon.png';
+
+import Menu from '@material-ui/core/Menu';
+import MenuItem from '@material-ui/core/MenuItem';
+
+// import logo from '../../../resources/icon.png';
+import greenLogo from '../public/icons/png/512x512.png';
 
 
 // NavBar text and button styling
@@ -35,7 +41,38 @@ const useStyles = makeStyles((theme: Theme) => createStyles({
 }));
 
 // sorting options
-const sortMethods = ['rating', 'date', 'user'];
+const sortMethods = ['Rating', 'Date', 'User'];
+
+// Drop down menu button for SORT PROJECTS
+const StyledMenu = withStyles({
+  paper: {
+    border: '1px solid #d3d4d5'
+  }
+})(props => (
+  <Menu
+    elevation={0}
+    getContentAnchorEl={null}
+    anchorOrigin={{
+      vertical: 'bottom',
+      horizontal: 'center'
+    }}
+    transformOrigin={{
+      vertical: 'top',
+      horizontal: 'center'
+    }}
+    {...props}
+  />
+));
+
+const StyledMenuItem = withStyles(theme => ({
+  root: {
+    '&:focus': {
+      '& .MuiListItemIcon-root, & .MuiListItemText-primary': {
+        color: theme.palette.common.white
+      }
+    }
+  }
+}))(MenuItem);
 
 // TO DO: set types of props validation
 
@@ -44,55 +81,83 @@ export default function NavBar(props) {
   const classes = useStyles();
   const { style, setStyle } = useContext(styleContext);
 
-
+  const toggling = () => setIsOpen(!isOpen);
+  
   // toggle to open and close dropdown sorting menu
   const [isOpen, setIsOpen] = useState(false);
 
-  const toggling = () => setIsOpen(!isOpen);
+  // State for sort projects button
+  const [anchorEl, setAnchorEl] = React.useState(null);
+
+
+  const handleClick = event => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
 
   return (
     <div className={classes.root} style={style}>
       <AppBar position="static">
         <Toolbar>
-          <Avatar src={logo}></Avatar>
+          <Avatar src={greenLogo}></Avatar>
           <Typography variant="h6" style={{ marginLeft: '1rem' }} className={classes.title}>
             ReacType
           </Typography>
 
           {/* ==========================================Sort by Button================================================== */}
 
           <div style ={ { textDecoration: 'none' } }>
-            <Button onClick={toggling}
-              variant="contained"
-              color="primary"
-              style={{ minWidth: '137.69px' }}
-              className="navbarButton"
-              id="navbarButtonDash"
-            >
-              Sort documents
-            </Button>
-
-            {
-              isOpen && (
-                <div className="sortDoc">
-                  {sortMethods.map((option, index) => (
-                    <Button onClick={() => {
+            <Button
+            variant="contained"
+            color="primary"
+            onClick={handleClick}
+            className="navbarButton"
+            id="navbarButton"
+          >
+            SORT PROJECT
+          </Button>
+          <StyledMenu  // Dropdown menu connected to Manage Project Button
+            id="customized-menus"
+            anchorEl={anchorEl}
+            keepMounted
+            open={Boolean(anchorEl)}
+            onClose={handleClose}
+          >
+            {sortMethods.map((option, index) => (
+                    <StyledMenuItem onClick={() => {
                       props.optionClicked(option);
                       toggling();
+                      handleClose();
                     }}
                       variant="contained"
                       color="primary"
                       style={{ minWidth: '137.69px' }}
                       className="navbarButton"
                       key={index}
-                      > {option}
-                    </Button>
-                  ))};
-                </div>
-              )
-            }
-          </div>
-
+                      > 
+                      {option}
+                    </StyledMenuItem>
+                  ))}
+          </StyledMenu>
+        </div>
+        <Button
+            className="navbarButton"
+            id="navbarDashButton"
+            color="primary"
+            variant="contained"
+            style={{minWidth: '113.97px'}}
+            onClick={() => {
+              !props.styles[0].backgroundColor
+                ? props.styles[1]({ backgroundColor: '#21262D' }) //dark mode color
+                : props.styles[1]({ backgroundColor: null })
+              props.isThemeLight ? props.setTheme(false) : props.setTheme(true);
+            }}
+          >
+            {props.isThemeLight ? 'Dark Mode' : 'Light Mode'}
+          </Button>
           {/* ====================================Home Button============================================== */}
 
           <div style ={ { textDecoration: 'none' } }>

app/src/Dashboard/ProjectContainer.tsx

@@ -1,13 +1,24 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useContext, useEffect, createContext } from 'react';
+import { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';
 import { useQuery } from '@apollo/client';
 import { GET_PROJECTS } from './gqlStrings';
-import Project from './Project.tsx';
-import NavBar from './NavbarDash';
-
+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
+});
+
+// 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 ProjectContainer = () => {
   const myVar = {};
   // Need this for the individual user dasboard, for now, dashboard shows all projects from all users
@@ -17,6 +28,11 @@ const ProjectContainer = () => {
   //   myVar = { userId: userSSID };
   // }
 
+  const [isThemeLight, setTheme] = useState(true);
+
+  const initialStyle = useContext(styleContext);
+  const [style, setStyle] = useState(initialStyle);
+
   // --------------------------Sorting Buttons------------------------------------//
 
   // hook for sorting menu
@@ -73,15 +89,14 @@ const ProjectContainer = () => {
     }
   });
 
-
   // function for selecting drop down sorting menu
   const optionClicked = (value) => {
     setSelectedOption(value);
   };
   // 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);
+  if (selectedOption === 'Date') sortedProjects = sortByDate(sortedProjects);
+  else if (selectedOption === 'User') sortedProjects = sortByUser(sortedProjects);
+  else if (selectedOption === 'Rating') sortedProjects = sortByRating(sortedProjects);
 
   // create an array of components Project that will be conditionally rendered
   const sortedDisplay = [];
@@ -99,8 +114,9 @@ const ProjectContainer = () => {
   });
 
   return (
-    <div>
-      <NavBar optionClicked = {optionClicked}/>
+    <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}
@@ -111,6 +127,8 @@ const ProjectContainer = () => {
           {userDisplay}
         </div>
     </div>
+    </MuiThemeProvider>
   );
 };
+
 export default ProjectContainer;

app/src/Dashboard/styles.css

@@ -23,8 +23,28 @@ $button-blue: #24BCFF; */
   width: 250px;
 }
 
+/* .dashboardContainer {
+  display: grid;
+  grid-template: auto / repeat(2, 1fr);
+} */
+
 .formContainer , .projectContainer{
   display: flex;
   flex-flow: row wrap;
 }
 
+
+/* .formContainer {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  height: 100%;
+}
+
+.projectContainer {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+} */

app/src/components/left/HTMLPanel.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useContext } from 'react';
+import React, { useState, useCallback, useContext, useEffect } from 'react';
 import Grid from '@material-ui/core/Grid';
 import StateContext from '../../context/context';
 import HTMLItem from './HTMLItem';
@@ -140,6 +140,22 @@ const HTMLPanel = (props): JSX.Element => {
       payload: id
     });
   };
+
+  const handleCreateElement = useCallback((e) => {
+    if(e.key === 'Enter') {
+      e.preventDefault();
+      document.getElementById('submitButton').click();
+    }
+  }, []);
+  
+  useEffect(() => {
+    document.addEventListener('keydown', handleCreateElement);
+    return () => {
+      document.removeEventListener('keydown', handleCreateElement)
+    }
+  }, []);
+
+
   // filter out separator so that it will not appear on the html panel
   const htmlTypesToRender = state.HTMLTypes.filter(type => type.name !== 'separator')
   return (

app/src/components/login/SignIn.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useCallback, useEffect } from 'react';
 import { LoginInt } from '../../interfaces/Interfaces';
 import {
   Link as RouteLink,
@@ -90,6 +90,7 @@ const SignIn: React.FC<LoginInt & RouteComponentProps> = props => {
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     let inputVal = e.target.value;
+  
     switch (e.target.name) {
       case 'username':
         setUsername(inputVal);
@@ -132,6 +133,20 @@ const SignIn: React.FC<LoginInt & RouteComponentProps> = props => {
     });
   };
 
+  const keyBindSignIn = useCallback((e) => {
+    if(e.key === 'Enter') {
+      e.preventDefault();
+      document.getElementById('SignIn').click();
+    }
+  }, []);
+  
+  useEffect(() => {
+    document.addEventListener('keydown', keyBindSignIn);
+    return () => {
+      document.removeEventListener('keydown', keyBindSignIn)
+    }
+  }, []);
+
   // for users not wanting to make an account and use as guest
   const handleLoginGuest = (
     e: React.MouseEvent<HTMLButtonElement, MouseEvent>
@@ -210,6 +225,7 @@ const SignIn: React.FC<LoginInt & RouteComponentProps> = props => {
 
         <Button
           fullWidth
+          id="SignIn"
           variant="contained"
           color="default"
           className={classes.submit}