Merge pull request #7 from slhoehn/navbar

Add sorting functionality to dashboard nav bar

Author: eddypjr

__tests__/projects.test.js

@@ -1,8 +1,10 @@
+const app = require('../server/server');
 const request = require('supertest');
 let server = 'https://reactype.herokuapp.com';
 const isDev = process.env.NODE_ENV === 'development';
 if (isDev) {
-  server = 'http://localhost:5000';
+  // server = 'http://localhost:5000';
+  server = require('..server/server');
 }
 
 // save and get projects endpoint testing
@@ -41,7 +43,7 @@ describe('Project endpoints tests', () => {
           .send(projectToSave)
           .expect('Content-Type', /json/)
           .expect(200)
-          .then((res) => expect(res.body.project.name).toBe('test'));
+          .then(res => expect(res.body.project.name).toBe('test'));
       });
     });
   });
@@ -73,7 +75,7 @@ describe('Project endpoints tests', () => {
           .send({ name, userId })
           .expect(200)
           .expect('Content-Type', /json/)
-          .then((res) => expect(res.body.name).toBe('test'));
+          .then(res => expect(res.body.name).toBe('test'));
       });
     });
   });

app/src/Dashboard/Form.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/FormsContainer.jsx

@@ -0,0 +1,114 @@
+import React, { useState, useContext } from 'react';
+import {
+  createStyles,
+  makeStyles,
+  Theme,
+} from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
+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 { Link } from 'react-router-dom';
+import { styleContext } from '../containers/AppContainer';
+import logo from '../../../resources/icon.png';
+
+
+// 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',
+  },
+}));
+
+// sorting options
+const sortMethods = ['rating', 'date', 'user'];
+
+// TO DO: set types of props validation
+
+export default function NavBar(props) {
+  // TO DO: import setStyle
+  const classes = useStyles();
+  const { style, setStyle } = useContext(styleContext);
+
+
+  // toggle to open and close dropdown sorting menu
+  const [isOpen, setIsOpen] = useState(false);
+
+  const toggling = () => setIsOpen(!isOpen);
+
+  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================================================== */}
+         
+          <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={() => {
+                      props.optionClicked(option);
+                      toggling();
+                    }}
+                      variant="contained"
+                      color="primary"
+                      style={{ minWidth: '137.69px' }}
+                      className="navbarButton"
+                      key={index}
+                      > {option}
+                    </Button>
+                  ))};
+                </div>
+              )
+            }
+          </div>
+
+          {/* ====================================Home Button============================================== */}
+          
+          <div style ={ { textDecoration: 'none' } }>
+            <Link to="/">
+              <Button
+                variant="contained"
+                color="primary"
+                style={{ minWidth: '137.69px' }}
+                className="navbarButton"
+                id="ratingButton"
+                > Home
+              </Button>
+            </Link>
+          </div>
+        </Toolbar>
+      </AppBar>
+    </div>
+  );
+}