add navbar for dashboard

Author: slhoehn

app/src/Dashboard/FormsContainer.jsx

@@ -2,6 +2,8 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 
 import { gql, useQuery } from '@apollo/client';
+
+
 import Form from './Form.jsx';
 
 // Implement Apollo Client useQuery hook to retrieve data from the server through graphQL. This includes 2 steps:

app/src/Dashboard/NavbarDd.tsx

@@ -0,0 +1,73 @@
+import React, { useState, useContext } from 'react';
+import {
+  withStyles,
+  createStyles,
+  makeStyles,
+  Theme,
+} from '@material-ui/core/styles';
+import AppBar from '@material-ui/core/AppBar';
+import Avatar from '@material-ui/core/Avatar';
+import Toolbar from '@material-ui/core/Toolbar';
+import Typography from '@material-ui/core/Typography';
+import IconButton from '@material-ui/core/IconButton';
+import MenuIcon from '@material-ui/icons/Menu';
+import Menu from '@material-ui/core/Menu';
+import MenuItem from '@material-ui/core/MenuItem';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemText from '@material-ui/core/ListItemText';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+// ROUTING TO DASHBOARD
+import { Link } from 'react-router-dom';
+import { styleContext } from '../containers/AppContainer';
+import StateContext from '../../context/context';
+import logo from '../../../resources/icon.png';
+
+import SortMenu from './SortMenu';
+
+
+
+
+// NavBar text and button styling
+const useStyles = makeStyles((theme: Theme) => createStyles({
+  root: {
+    flexGrow: 1,
+    width: '100%',
+  },
+  menuButton: {
+    marginRight: theme.spacing(2),
+    color: 'white',
+  },
+  title: {
+    flexGrow: 1,
+    color: 'white',
+  },
+  manageProject: {
+    display: 'flex',
+    justifyContent: 'center',
+  },
+}));
+
+export default function NavBar(props) {
+  const classes = useStyles();
+
+  const { style, setStyle } = useContext(styleContext);
+  // added className="navbarButton" to test for buttons in enzyme.test.tsx
+  return (
+    <div className={classes.root} style={style}>
+      <AppBar position="static">
+        <Toolbar>
+          <Avatar src={logo}></Avatar>
+          <Typography variant="h6" style={{ marginLeft: '1rem' }} className={classes.title}>
+            ReacType
+          </Typography>
+
+          {/* ==================================Sort by Button================================================== */}
+         
+         {/* //drop down menu logic goes here */}
+          <SortMenu/>
+        </Toolbar>
+      </AppBar>
+    </div>
+  );
+}

app/src/Dashboard/ProjectContainer.jsx

@@ -2,6 +2,8 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 
 import { gql, useQuery } from '@apollo/client';
+import SortBy from './SortMenu.jsx';
+import Navbar from './NavbarDd.tsx';
 
 import Project from './Project.jsx';
 // Implement Apollo Client useQuery hook to retrieve data from the server through graphQL. This includes 2 steps:
@@ -47,6 +49,7 @@ const ProjectContainer = () => {
 
   return (
       <div>
+        <Navbar/>
         <h1> Public Dashboard </h1>
         <Link to="/">
           <button type="button">Go Back</button>

app/src/Dashboard/SortMenu.jsx

@@ -0,0 +1,66 @@
+// import { supportsResultCaching } from '@apollo/client/cache/inmemory/entityStore';
+import React, { useState } from 'react';
+import Button from '@material-ui/core/Button';
+
+const sortByRating = () => {
+  console.log("rating")
+};
+
+const sortByDate = () => {
+  console.log("date")
+};
+
+const sortByUser = () => {
+  console.log("user")
+};
+
+export default function SortMenu() {
+  
+  const [isOpen, setIsOpen] = useState(false);
+  const toggling = () => setIsOpen(!isOpen);
+
+  return (
+    <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">
+            <Button
+              variant="contained"
+              color="primary"
+              style={{ minWidth: '137.69px' }}
+              className="navbarButton"
+              id="ratingButton"
+              onClick={sortByRating}
+            > rating </Button>
+            <Button
+              variant="contained"
+              color="primary"
+              style={{ minWidth: '137.69px' }}
+              className="navbarButton"
+              id="dateButton"
+              onClick={sortByDate}
+            > date </Button>
+            <Button
+              variant="contained"
+              color="primary"
+              style={{ minWidth: '137.69px' }}
+              className="navbarButton"
+              id="userButton"
+              onClick={sortByUser}
+            > user </Button>
+          </div>
+        )
+      }
+    </div>
+  )
+}