in progress navbar

Author: slhoehn

app/src/Dashboard/NavbarDash.tsx

@@ -47,8 +47,8 @@ const useStyles = makeStyles((theme: Theme) => createStyles({
 
 // --------------------------Sorting Buttons------------------------------------//
 const sortByRating = (props) => {
-  console.log('rating');
-  console.log("props", props);
+  // console.log('rating');
+  // console.log("props", props);
 
   // should change state to true: then in the return for project container, a conditional rendering will occur
 
@@ -67,22 +67,17 @@ const sortByUser = (props) => {
 const sortMethods = ['rating', 'date', 'user'];
 
 export default function NavBar(props) {
+  console.log(props)
 
   const classes = useStyles();
   const { style, setStyle } = useContext(styleContext);
 
 
   // toggle dropdown sorting menu
   const [isOpen, setIsOpen] = useState(false);
-  const [selectedOption, setSelectedOption] = useState('rating');
 
   const toggling = () => setIsOpen(!isOpen);
-// function not working properly, you have to go through the process and click twice
-  const optionClicked = value => () => {
-    setSelectedOption(value);
-    setIsOpen(false);
-    console.log('selectedOption', selectedOption);
-  };
+
 
   return (
     <div className={classes.root} style={style}>
@@ -110,7 +105,10 @@ export default function NavBar(props) {
               isOpen && (
                 <div className="sortDoc">
                   {sortMethods.map((option, index) => (
-                    <Button onClick={optionClicked(option)}
+                    <Button onClick={() => {
+                      props.optionClicked(option);
+                      toggling();
+                    }}
                     variant="contained"
                     color="primary"
                     style={{ minWidth: '137.69px' }}

app/src/Dashboard/ProjectContainer.tsx

@@ -1,6 +1,7 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import { useQuery } from '@apollo/client';
+
 import { GET_PROJECTS } from './gqlStrings';
 import Project from './Project.tsx';
 import NavBar from './NavbarDash';
@@ -10,24 +11,56 @@ import NavBar from './NavbarDash';
 // 2) useQuery hook will update the data stored in Apollo Client's cache and automatically trigger child components rendering
 
 const ProjectContainer = () => {
-  let myVar = {};
+  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';
   // if (userSSID !== 'guest') {
   //   myVar = { userId: userSSID };
   // }
 
+  // --------------------------Sorting Buttons------------------------------------//
+  // hook for sorting menu
+  const [selectedOption, setSelectedOption] = useState(null);
+
+  const sortByRating = (projects) => {
+    // console.log('sort by rating :', projects);
+    // generate a sorted array of public projects based on likes
+    const sortedRatings = projects.sort((a, b) =>  b.likes - a.likes );
+    // console.log('sort by rating result >>>', sortedRatings);
+
+    // setRenderedOption(sortedRatings);
+    return sortedRatings;
+  };
+
+  const sortByDate = (projects) => {
+    console.log('sort by date', projects);
+    // not sure how to sort by dates
+  };
+
+  const sortByUser = (projects) => {
+    console.log('sort by user', projects);
+    const sortedRatings = projects.sort((a, b) => b.user - a.user);
+    console.log('sort by rating result >>>', sortedRatings);
+
+    return sortedRatings;
+  };
+
+
+  // ===================================================================================== //
+
   // useQuery hook abstracts fetch request
-  const { loading, error, data } = useQuery(GET_PROJECTS, { pollInterval: 2000, variables: myVar }); // Need to find where the userId is stored for the logged in user.
+  // Need to find where the userId is stored for the logged in user.
+  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;
-  console.log('Projects >>> ', projects);
+  let sortedProjects = [];
+  // console.log('Projects >>> ', projects);
   // generate an array of Project components based on data
-  const publicProjects = [];
-  const userProjects = [];
+  let publicDisplay = [];
+  const userDisplay = [];
   projects.forEach((proj, index) => {
     const component = <Project
                   key= { index }
@@ -37,25 +70,65 @@ const ProjectContainer = () => {
                   userId = {proj.userId}
                   username = {proj.username}
                   id = {proj.id}
-                />;
-    if (username === proj.username) userProjects.push(component);
-    if (proj.published) publicProjects.push(component);
+                  />;
+    if (username === proj.username) userDisplay.push(component);
+    if (proj.published) {
+      // publicDisplay.push(component);
+      sortedProjects.push(proj);
+    }
   });
 
- 
-
 
+  // function for sorting menu in nav bar
+  
+  const optionClicked = (value) => {
+    console.log('value', value);
+    setSelectedOption(value);
+  };
+  
+ 
+    
+  console.log('SortedProject >>> ', sortedProjects);
+  
+  // if selectedOption === null, displaySorted = publicProjects
+  // else displaySorted = convert to components from return value of a sortBy function)
+  if (selectedOption === 'date') sortedProjects = sortByDate(sortedProjects);
+  else if (selectedOption === 'user') sortedProjects = sortByUser(sortedProjects);
+  else if (selectedOption === 'rating') sortedProjects = sortByRating(sortedProjects);
+  
+  const sortedDisplay = [];
+  sortedProjects.forEach((proj, index) => {
+    console.log('Pushing to displayProjects >>> ', proj);
+    sortedDisplay.push(<Project
+      key= { index }
+      name = {proj.name}
+      likes = {proj.likes}
+      published = { proj.published }
+      userId = {proj.userId}
+      username = {proj.username}
+      id = {proj.id}
+    />);
+  });
+  console.log('displaySorted >>> ', sortedDisplay);
+  
+  
+  // if (selectedOption === 'date') sortByDate(publicProjects);
+  // if (selectedOption === 'user') sortByUser(publicProjects); 
+  // console.log('selectedOption', selectedOption);
+  
+  
+  
   return (
-      <div>
-        <NavBar/>
+    <div>
+        <NavBar optionClicked = {optionClicked}/>
         <h1> Public Dashboard </h1>
         <div className = "projectContainer">
-            {publicProjects}
+            {sortedDisplay}
         </div>
         <hr></hr>
         <h1> User Dashboard </h1>
         <div className = "projectContainer">
-            {userProjects}
+            {userDisplay}
         </div>
 
         </div>

server/controllers/projectController.js

@@ -7,10 +7,12 @@ const projectController = {};
 projectController.saveProject = (req, res, next) => {
   // pull project name and project itself from body
   const { name, project, userId, username } = req.body;
+  // create createdBy field for the document
+  const createdAt = Date.now();
   // pull ssid from cookies for user id
   Projects.findOneAndUpdate(
     // looks in projects collection for project by user and name
-    { name, userId, username },
+    { name, userId, username, createdAt },
     // update or insert the project
     { project },
     // Options:

server/server.js

@@ -137,4 +137,4 @@ app.listen(PORT, () => {
   console.log(`Server listening on port: ${PORT}`);
 });
 
-module.export = PORT;
+module.exports = PORT;