Sprint 3 Tuesday Release

components/Header.jsx

@@ -1,15 +1,14 @@
 import React from 'react';
 import NextHead from 'next/head';
-// import NProgress from 'nprogress';
-// import Router from 'next/router';
+import NProgress from 'nprogress';
+import Router from 'next/router';
 
-// Router.onRouteChangeStart = (url) => {
-//   console.log(`Loading: ${url}`);
-//   NProgress.start();
-// };
-//
-// Router.onRouteChangeComplete = () => NProgress.done();
-// Router.onRouteChangeError = () => NProgress.done();
+Router.onRouteChangeStart = (url) => {
+  NProgress.start();
+};
+
+Router.onRouteChangeComplete = () => NProgress.done();
+Router.onRouteChangeError = () => NProgress.done();
 
 /**
  * A header Component that provide Progress bar

components/PopMenu.jsx

@@ -30,6 +30,26 @@ const inStyle = {
   fontSize: '14px',
 };
 
+class CourseDetailsWindow extends React.Component {
+  render() {
+    const course = this.props.course;
+    return (
+      <div className="modal">
+        <a className="close" onClick={this.props.onClose}>&times;</a>
+        <div className="header">
+          {`${course.name} ${course.title}`}
+        </div>
+        <div className={'content'}>
+          <p>{`Instructor: ${course.instructor}`}</p>
+          <p>{`Terms: ${course.terms}`}</p>
+          <p>{`GE: ${course.geCategories}`}</p>
+          <p>{`Division: ${course.division}`}</p>
+          <p>{`Description: ${course.description}`}</p>
+        </div>
+      </div>
+    );
+  }
+}
 
 class PopMenu extends React.Component {
   constructor(props) {
@@ -109,35 +129,23 @@ class PopMenu extends React.Component {
               <div ref={node => {
                 this.node = node;
               }} style={lStyle} id="listDiv" onScroll={this.onListScroll}>
-                <List>{data.map(({name, title, instructor, terms, description, geCategories, division}) => (
+                <List>{data.map((course) => (
                   <div ref={this.setWrapperRef}>
                     <Popup trigger={
                       <ListItem
                         style={pStyle}
-                        key={name + `${n++}`}
+                        key={course.name + `${n++}`}
                         dense
                         divider
                         button
                       >
-                        <ListItemText primary={name + ' ' + title}
-                                      secondary={`Instr: ${instructor}`}/>
+                        <ListItemText primary={name + ' ' + this.props.title}
+                                      secondary={`Instr: ${this.props.instructor}`}/>
                       </ListItem>
                     } modal>
-                      {close => (
-                        <div className="modal">
-                          <a className="close" onClick={close}>&times;</a>
-                          <div className="header">
-                            {`${name} ${title}`}
-                          </div>
-                          <div className={'content'}>
-                            <p>{`Instructor: ${instructor}`}</p>
-                            <p>{`Terms: ${terms}`}</p>
-                            <p>{`GE: ${geCategories}`}</p>
-                            <p>{`Division: ${division}`}</p>
-                            <p>{`Description: ${description}`}</p>
-                          </div>
-                        </div>
-                      )}
+                      {close =>
+                        <CourseDetailsWindow course={course} onClose={close} />
+                      }
                     </Popup>
                   </div>
                 ))}

components/Popups.jsx

@@ -1,13 +1,42 @@
 import React from 'react';
 import Popup from 'reactjs-popup';
 
+class CourseDetailsPanel extends React.Component {
+  render() {
+    const course = this.props.course;
+    return (
+      <div className={'content'}>
+        <p>{'Instructor: '}{course.instructor}</p>
+        <p>{'Time: '}{course.time}</p>
+        <p>{'Location: '}{course.location}</p>
+      </div>
+    );
+  }
+}
+
+class CourseDetailsWindow extends React.Component {
+  render() {
+    const course = this.props.course;
+    return (
+      <div className="modal">
+        <a className="close" onClick={this.props.onClose}>&times;</a>
+        <button onClick={this.props.onSelectDefTag('N/A')}>N/A</button>
+        <button onClick={this.props.onSelectDefTag('In Progress')}>In Progress</button>
+        <button onClick={this.props.onSelectDefTag('Finished')}>Finished</button>
+        <div className="header">{course.course_number}</div>
+        <CourseDetailsPanel course={course} />
+      </div>
+    );
+  }
+}
 
 class Popups extends React.Component {
   constructor(props) {
     super(props);
-    this.handleClick = this.handleClick.bind(this);
+    this.removeDefTags = this.removeDefTags.bind(this);
+    this.selectDefTag = this.selectDefTag.bind(this);
     this.state = {
-      tags: [] || props.tags,
+      deftags: [] || props.tags,
     };
   }
 
@@ -21,36 +50,37 @@ class Popups extends React.Component {
     }),
   };
 
-  handleClick(e) {
+  removeDefTags() {
+    if (this.state.deftags === 'N/A'
+      || this.state.deftags === 'In Progress'
+      || this.state.deftags === 'Finished') {
+      this.state.deftags = '';
+    }
+  }
+
+  selectDefTag(e) {
+    this.removeDefTags();
     if (e === 'N/A') {
-      this.state.tags = 'N/A';
+      this.state.deftags = 'N/A';
     }
     if (e === 'In Progress') {
-      this.state.tags = 'In Progress';
+      this.state.deftags = 'In Progress';
     }
     if (e === 'Finished') {
-      this.state.tags = 'Finished';
+      this.state.deftags = 'Finished';
     }
-    console.log(`get tags: ${this.state.tags}`);
   }
 
   render() {
     return <div>
-      <Popup trigger={<a className="button">{this.props.myLists.course_title}</a>} modal>
-        {close => (
-          <div className="modal">
-            <a className="close" onClick={close}>&times;</a>
-            <button onClick={() => this.handleClick('N/A')}>N/A</button>
-            <button onClick={() => this.handleClick('In Progress')}>In Progress</button>
-            <button onClick={() => this.handleClick('Finished')}>Finished</button>
-            <div className="header">{this.props.myLists.course_number}</div>
-            <div className={'content'}>
-              <p>{'Instructor: '}{this.props.myLists.instructor}</p>
-              <p>{'Time: '}{this.props.myLists.time}</p>
-              <p>{'Location: '}{this.props.myLists.location}</p>
-            </div>
-          </div>
-        )}
+      <Popup
+        trigger={<a className="button">{this.props.myLists.course_title}</a>} modal>
+        {close =>
+          <CourseDetailsWindow
+            course={this.props.myLists}
+            onClose={close}
+            onSelectDefTag={(tag) => this.selectDefTag(tag)} />
+        }
       </Popup>
     </div>;
   }

components/Search.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Configure, Highlight, Hits, SearchBox } from 'react-instantsearch/dom';
+
 import { InstantSearch } from './Instantsearch';
 
 /**

components/Tooltip.jsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+// The modal "window"
+const modalStyle = {
+  backgroundColor: '#fff',
+  borderRadius: 5,
+  maxWidth: 500,
+  minHeight: 300,
+  margin: '0 auto',
+  padding: 30,
+};
+
+class Tooltip extends React.Component {
+  static propTypes = {
+    content: PropTypes.object,
+    trigger: PropTypes.object,
+  };
+
+  static defaultProps = {
+    content: '',
+    trigger: '',
+  };
+
+  constructor(props) {
+    super(props);
+    this.handleMouseOver = this.handleMouseOver.bind(this);
+    this.handleMouseOut = this.handleMouseOut.bind(this);
+    this.handleClick = this.handleClick.bind(this);
+    this.handleOutsideClick = this.handleOutsideClick.bind(this);
+    this.state = {
+      isOpen: false,
+    };
+  }
+
+  handleMouseOver = () => {
+    this.setState({isOpen: true});
+  };
+
+  handleMouseOut = () => {
+    this.setState({isOpen: false});
+  };
+
+  handleClick = () => {
+    if (!this.state.isOpen) {
+      document.addEventListener('click', this.handleOutsideClick, false);
+    } else {
+      document.removeEventListener('click', this.handleOutsideClick, false);
+    }
+    this.setState({
+      isOpen: this.state.isOpen,
+    });
+  };
+
+  handleOutsideClick = (e) => {
+    if (this.node.contains(e.target)) {
+      return;
+    }
+    this.handleClick();
+  };
+
+
+  render() {
+    return (
+      <div>
+        <div
+          onMouseOver={this.handleMouseOver}
+          onMouseOut={this.handleMouseOut}
+          onClick={this.handleClick}
+          onClose={this.handleOutsideClick}
+        >
+          {this.props.trigger}
+        </div>
+        <div>
+          {this.state.isOpen &&
+            <div style={modalStyle}>
+              {this.props.content}
+            </div>
+          }
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Tooltip;