Add Dev Branch to Master

README.md

@@ -1,2 +1,11 @@
 # register
 A web app for simplifying the entire registration process. Done as a final project for Olin.js Spring 2017.
+
+## To Run:
+1) Clone this repository and navigate into it.
+1) Run `npm install` to install packages.
+1) Run `npm run build` to build the frontend bundled code from webpack.
+1) Run `npm start` in a separate terminal window to run the backend server locally.
+1) In your browser, go to localhost:3000/ to see the web app.
+
+The backend is run using nodemon, which should restart the server automatically when code changes as long as npm start is running. Similarly, the frontend is bundled using webpack, which should restart the server automatically as long as npm run build is running. Manually restart any of these commands if problems don't update correctly.

public/stylesheets/semester.css

@@ -0,0 +1,4 @@
+.semesterheading {
+	font-weight: bold;
+	font-size: 12pt;
+}

routes/index.js

@@ -42,11 +42,18 @@ router.get('/logout',
 // register new user with local strategy
 router.post('/register', (req, res) => {
   Student.register(new Student({ username: req.body.username }),
-    req.body.password, (regErr, account) => {
+    req.body.password, (regErr, newAccount) => {
       if (regErr) {
         console.error(regErr);
         res.status(401).send(regErr.message);
       } else {
+        // hotfix. Redux demands these fields be filled,
+        // but they have no default values
+        const account = Object.assign(newAccount, {
+          name: 'Test User',
+          entryYear: '2001',
+          major: 'Mechanical Engineering',
+        });
         account.save((saveErr) => {
           if (saveErr) {
             console.error(saveErr);
@@ -82,6 +89,19 @@ router.post('/register', (req, res) => {
     });
 });
 
+// update student's plan of study
+router.post('/updateplan', (req, res) => {
+  Student.update(
+    { _id: req.user._id },
+    { plannedCourses: req.body.plannedCourses },
+    (err) => {
+      if (err) {
+        console.error(err);
+      }
+      res.json({ success: true });
+    });
+});
+
 // get student completed courses
 router.get('/completedcourses', (req, res) => {
   res.json({

src/actions/actions.jsx

@@ -88,6 +88,13 @@ export const updateSuggestions = suggestions => ({
   suggestions,
 });
 
+// Update plan button
+export const updatePlanSuccess = data => ({
+  type: 'UPDATE_PLAN_SUCCESS',
+  isSuccess: data.success,
+});
+
+// Login backend interaction
 // login or register action successful
 export const receiveUser = json => ({
   type: 'RECEIVE_USER',
@@ -160,6 +167,18 @@ export const register = (username, password) => (
   }
 );
 
+// Save plan of study backend
+export const updatePlan = plannedCourses => (
+  (dispatch) => {
+    const data = {
+      plannedCourses,
+    };
+    $.post('/updateplan', data)
+      .done(response => (dispatch(updatePlanSuccess(response))))
+      .fail((err, status) => console.error(err, status));
+  }
+);
+
 // update login form username
 export const updateUsername = username => ({
   type: 'UPDATE_USERNAME',

src/components/CoursePlanner.jsx

@@ -4,6 +4,7 @@ import { Row, Col } from 'react-bootstrap';
 import AddCourseDropdown from './AddCourseDropdown';
 import SelectedCourse from './SelectedCourse';
 import SearchFieldContainer from '../containers/SearchFieldContainer';
+import UpdatePlanContainer from '../containers/UpdatePlanContainer';
 import NavPanel from './NavPanel';
 import styles from '../../public/stylesheets/pages.css';
 
@@ -40,6 +41,7 @@ const CoursePlanner = ({ categories, otherCourses, onCourseSelect, onCourseRemov
         </ul>
         <h4>Search All Courses</h4>
         <SearchFieldContainer />
+        <UpdatePlanContainer />
       </div>
     </Col>
   </Row>

src/components/NavPanel.jsx

@@ -13,8 +13,8 @@ const NavPanel = ({ active }) => (
       <LinkContainer to="/plan">
         <NavItem eventKey={2} className={styles.item}>Create/Edit Plan of Study</NavItem>
       </LinkContainer>
-      <LinkContainer to="#">
-        <NavItem eventKey={3} className={styles.item} disabled>Other Stuff</NavItem>
+      <LinkContainer to="/semesterplan">
+        <NavItem eventKey={3} className={styles.item}>Plan by Semester</NavItem>
       </LinkContainer>
     </Nav>
   </div>

src/components/Semester.jsx

@@ -1,12 +1,13 @@
 // A single semester rendered as an <li>. SemesterList contains these.
 import React, { PropTypes } from 'react';
 import CourseBlockContainer from '../containers/CourseBlockContainer';
+import styles from './../../public/stylesheets/semester.css';
 
 const Semester = ({ semester, courseList, connectDropTarget }) => (
   // Indicate node should react to drop target events
   connectDropTarget(
     <li>
-      { semester }:
+      <span className={styles.semesterheading}>{ semester }:</span>
       <ul>
         {courseList.map(course =>
           <CourseBlockContainer

src/components/SemesterList.jsx

@@ -1,26 +1,45 @@
 // A list containing Semester components.
 import React, { PropTypes } from 'react';
+import { Row, Col } from 'react-bootstrap';
 import SemesterContainer from '../containers/SemesterContainer';
 import SemesterReserveContainer from '../containers/SemesterReserveContainer';
 
-const SemesterList = ({ semesters }) => (
+const SemesterList = ({ fallSemesters, springSemesters }) => (
   <div>
     <h1>Plan by Semester</h1>
     <ul>
-      <hr />
-      {semesters.map(semester =>
+      <Row>
+        {/* col attributes resize/reorder for different size screens */}
+          <Col sm={4} lg={6}>
+          {fallSemesters.map(semester =>
+          <SemesterContainer
+            key={semester}
+            semester={semester} // ownProps will grab this
+          />,
+        )}
+      </Col>
+
+      <Col sm={4} lg={6}>
+        <hr />
+        {springSemesters.map(semester =>
         <SemesterContainer
           key={semester}
           semester={semester} // ownProps will grab this
         />,
       )}
+     </Col>
+  </Row>
+
       <SemesterReserveContainer />
+
     </ul>
   </div>
 );
 
 SemesterList.propTypes = {
   semesters: PropTypes.arrayOf(PropTypes.string).isRequired,
+  fallSemesters: PropTypes.arrayOf(PropTypes.string).isRequired,
+  springSemesters: PropTypes.arrayOf(PropTypes.string).isRequired,
 };
 
 export default SemesterList;

src/components/SemesterPlanPage.jsx

@@ -1,11 +1,24 @@
 // The page that holds the semester list.
 import React from 'react';
+import { Row, Col } from 'react-bootstrap';
 import SemesterListContainer from '../containers/SemesterListContainer';
+import UpdatePlanContainer from '../containers/UpdatePlanContainer';
+import NavPanel from './NavPanel';
+import styles from '../../public/stylesheets/pages.css';
 
 const SemesterPlanPage = () => (
-  <div>
-    <SemesterListContainer />
-  </div>
+  <Row>
+    {/* col attributes resize/reorder for different size screens */}
+    <Col sm={3} lg={2}>
+      <NavPanel />
+    </Col>
+    <Col sm={9} lg={10}>
+      <ul className={styles.mainbody}>
+        <SemesterListContainer />
+        <UpdatePlanContainer />
+      </ul>
+    </Col>
+  </Row>
 );
 
 export default SemesterPlanPage;

src/components/SemesterReserve.jsx

@@ -1,11 +1,12 @@
 import React, { PropTypes } from 'react';
 import CourseBlockContainer from '../containers/CourseBlockContainer';
+import styles from './../../public/stylesheets/semester.css';
 
 const SemesterReserve = ({ courseList, connectDropTarget }) => (
   // Indicate node should react to drop target events
   connectDropTarget(
     <li>
-      Unassigned Courses:
+      <span className={styles.semesterheading}>Unassigned Courses:</span>
       <ul>
         {courseList.map(course =>
           <CourseBlockContainer

src/components/UpdatePlan.jsx

@@ -0,0 +1,16 @@
+import React, { PropTypes } from 'react';
+
+const UpdatePlan = ({ onClick }) => (
+  <button
+    type="button"
+    onClick={onClick}
+  >
+    Save
+  </button>
+);
+
+UpdatePlan.propTypes = {
+  onClick: PropTypes.func.isRequired,
+};
+
+export default UpdatePlan;

src/containers/SemesterContainer.jsx

@@ -3,19 +3,27 @@ import { DropTarget } from 'react-dnd';
 import Semester from '../components/Semester';
 
 const filterCourse = (semester, completedCourses, plannedCourses) => {
-  const compare = (a, b) => {
-    // sort alphabetically by registrarId
+    const compareByCourseId = (a, b) => {
+    // sort alphabetically by courseId (where the course code is stored in plannedCourses)
+    if (a.courseId.toUpperCase() < b.courseId.toUpperCase()) {
+      return -1;
+    }
+    return 1;
+  };
+  const compareByRegistrarId = (a, b) => {
+    // sort alphabetically by registrarId (where the course code is stored in completedCourses)
     if (a.registrarId.toUpperCase() < b.registrarId.toUpperCase()) {
       return -1;
     }
     return 1;
   };
   const filteredCompleted = completedCourses.filter(course =>
     course.semester === semester,
-  ).sort(compare);
+  ).sort(compareByRegistrarId);
+  console.log(plannedCourses, 'plannedCourses');
   const filteredPlanned = plannedCourses.filter(course =>
     course.semester === semester,
-  ).sort(compare);
+  ).sort(compareByCourseId);
   return filteredPlanned.concat(filteredCompleted);
 };
 

src/containers/SemesterListContainer.jsx

@@ -15,8 +15,26 @@ const makeSemesterList = (entryYear) => {
   return semesterList;
 };
 
+const makeFallSemesterList = (entryYear) => {
+  const fallSemesterList = [];
+  for (let i = 0; i < 4; i += 1) {
+    fallSemesterList.push('Fall' + shortenYear(entryYear + i));
+  }
+  return fallSemesterList;
+};
+
+const makeSpringSemesterList = (entryYear) => {
+  const springSemesterList = [];
+  for (let i = 0; i < 4; i += 1) {
+    springSemesterList.push('Spring' + shortenYear(entryYear + i + 1));
+  }
+  return springSemesterList;
+};
+
 const mapStateToProps = state => ({
   semesters: makeSemesterList(state.Student.entryYear),
+  fallSemesters: makeFallSemesterList(state.Student.entryYear),
+  springSemesters: makeSpringSemesterList(state.Student.entryYear),
 });
 
 const SemesterListContainer = connect(

src/containers/UpdatePlanContainer.jsx

@@ -0,0 +1,27 @@
+import { connect } from 'react-redux';
+import { updatePlan } from '../actions/actions';
+import UpdatePlan from '../components/UpdatePlan';
+
+const mapStateToProps = state => ({
+  plannedCourses: state.Student.plannedCourses,
+});
+
+const mergeProps = (stateProps, dispatchProps) => {
+  const { plannedCourses } = stateProps;
+  const { dispatch } = dispatchProps;
+
+  return {
+    onClick: (e) => {
+      e.preventDefault();
+      dispatch(updatePlan(plannedCourses));
+    },
+  };
+};
+
+const UpdatePlanContainer = connect(
+  mapStateToProps,
+  null,
+  mergeProps,
+)(UpdatePlan);
+
+export default UpdatePlanContainer;