added navigation to visualize page for courses

frontend/src/pages/AccountForm.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { connect } from 'react-redux';
-// import axios from 'axios';
+import { useHistory } from 'react-router-dom';
 
 // import { makeStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
@@ -11,21 +11,24 @@ import EditIcon from '@material-ui/icons/Edit';
 import TextField from '@material-ui/core/TextField';
 
 import { User } from '../type-interfaces/User';
-import { getUsers, updateUser } from '../redux/actions/User';
+import { updateUser } from '../redux/actions/User';
+import { getVisualizedCourses } from '../redux/actions/courses';
 import {loadUser} from "../redux/actions/auth";
 
 interface Props {
   currentUser: User,
   loadUser: Function,
   updateUser: Function,
+  getVisualizedCourses: Function,
 }
 
 function AccountForm(props: any) {
-  const { currentUser, loadUser, updateUser } : Props = props;
+  const { currentUser, loadUser, updateUser, getVisualizedCourses } : Props = props;
   const [name, setName] = useState(currentUser.name);
   const [email, setEmail] = useState(currentUser.email);
   const [major, setMajor] = useState(currentUser.major);
   const [courses, setCourses] = useState(currentUser.courses);
+  const [starredCourses, setStarredCourses] = useState(currentUser.starredCourses);
   const [editingName, toggleEditingName] = useState(false);
   const [editingEmail, toggleEditingEmail] = useState(false);
   const [editingMajor, toggleEditingMajor] = useState(false);
@@ -34,6 +37,12 @@ function AccountForm(props: any) {
     loadUser();
   }, []);
 
+  let history = useHistory();
+  function handleViewCourse(course: any) {
+    getVisualizedCourses(course);
+    history.push("/VisualCourse");
+  }
+
   const handleEditName = () => {
     toggleEditingName(true);
   };
@@ -132,7 +141,15 @@ function AccountForm(props: any) {
           <Typography variant="subtitle1">Courses:</Typography>
           <List>
             {courses.map((course) => (
-              <ListItem button key={course}>{course}</ListItem>
+              <ListItem button key={course} onClick={() => handleViewCourse(course)}>{course}</ListItem>
+            ))}
+          </List>
+        </ListItem>
+        <ListItem>
+          <Typography variant="subtitle1">Starred Courses:</Typography>
+          <List>
+            {starredCourses.map((course) => (
+              <ListItem button key={course} >{course}</ListItem>
             ))}
           </List>
         </ListItem>
@@ -143,4 +160,4 @@ function AccountForm(props: any) {
 
 const mapStateToProps = (state: any) => ({ currentUser: state.auth.user });
 
-export default connect(mapStateToProps, { loadUser, updateUser })(AccountForm);
+export default connect(mapStateToProps, { loadUser, updateUser, getVisualizedCourses })(AccountForm);

frontend/src/type-interfaces/User.tsx

@@ -3,5 +3,6 @@ export interface User {
     email: string,
     major: string,
     courses: Array<string>,
-    _id: string
+    _id: string,
+    starredCourses: Array<string>,
 }

server/models/user.js

@@ -22,6 +22,9 @@ const userSchema = new Schema({
   courses: {
     type: [String],
   },
+  starredCourses: {
+    type: [String]
+  },
   password: {
     type: String,
     required: true,

server/routes/users.js

@@ -57,29 +57,6 @@ router.post('/', async (req, res, next) => {
   }
 });
 
-// update user
-router.route('/update').post((req, res) => {
-  const { name } = req.body;
-  const { email } = req.body;
-  const { major } = req.body;
-  const { courses } = req.body;
-  const { id } = req.body;
-
-  // const newUser = new User({name, email, major, courses, id });
-  const updates = {
-    name, email, major, courses,
-  };
-
-  User.where().findOneAndUpdate({}, updates, { new: true },
-    (err, doc) => {
-      if (err) {
-        res.send(`Error: ${err}`);
-      } else {
-        res.send(`Update successful: ${doc}`);
-      }
-    });
-});
-
 router.route('/update/:id').post((req, res) => {
   const { id } = req.params;
   const { name } = req.body;
@@ -88,8 +65,28 @@ router.route('/update/:id').post((req, res) => {
   // const courses = req.body.courses;
   const updates = { name, email, major };
   User.findByIdAndUpdate(id, updates, { new: true })
-    .then((user) => res.json(user))
-    .catch((err) => res.status(400).json(`Error: ${err}`));
+    .then(user => res.json(user))
+    .catch(err => res.status(400).json('Error: ' + err));
+});
+
+// Update the starred courses. Adds if doesn't already exist, removes if it does.
+router.route('/update/starredCourses/:id').post((req, res) => {
+  const id = req.params.id;
+  const courseToModify = req.body.starredCourse;
+  User.findById(req.params.id)
+    .then(user => {
+      let starredCourses = user.starredCourses;
+      const exists = starredCourses.includes(courseToModify);
+      console.log(courseToModify, starredCourses, exists);
+      if (exists) {
+        starredCourses = starredCourses.filter(course => course !== courseToModify);
+      } else {
+        starredCourses.push(courseToModify);
+      }
+      return User.findByIdAndUpdate(id, { starredCourses }, { new: true });
+    })
+    .then(user => res.json(user))
+    .catch(err => res.status(400).json('Error: ' + err));
 });
 
 module.exports = router;