Skip to content

Commit d23de23

Browse files
author
Ivan Xu
authored
Merge pull request #42 from coursegraph/feture-SSR-fetch
Sprint 3 Tuesday Release
2 parents 4f16779 + 0c35cae commit d23de23

98 files changed

Lines changed: 206185 additions & 41012 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎components/Header.jsx‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
11
import React from 'react';
22
import NextHead from 'next/head';
3-
// import NProgress from 'nprogress';
4-
// import Router from 'next/router';
3+
import NProgress from 'nprogress';
4+
import Router from 'next/router';
55

6-
// Router.onRouteChangeStart = (url) => {
7-
// console.log(`Loading: ${url}`);
8-
// NProgress.start();
9-
// };
10-
//
11-
// Router.onRouteChangeComplete = () => NProgress.done();
12-
// Router.onRouteChangeError = () => NProgress.done();
6+
Router.onRouteChangeStart = (url) => {
7+
NProgress.start();
8+
};
9+
10+
Router.onRouteChangeComplete = () => NProgress.done();
11+
Router.onRouteChangeError = () => NProgress.done();
1312

1413
/**
1514
* A header Component that provide Progress bar

‎components/Login.jsx‎

Lines changed: 0 additions & 58 deletions
This file was deleted.

‎components/PopMenu.jsx‎

Lines changed: 27 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,26 @@ const inStyle = {
3030
fontSize: '14px',
3131
};
3232

33+
class CourseDetailsWindow extends React.Component {
34+
render() {
35+
const course = this.props.course;
36+
return (
37+
<div className="modal">
38+
<a className="close" onClick={this.props.onClose}>&times;</a>
39+
<div className="header">
40+
{`${course.name} ${course.title}`}
41+
</div>
42+
<div className={'content'}>
43+
<p>{`Instructor: ${course.instructor}`}</p>
44+
<p>{`Terms: ${course.terms}`}</p>
45+
<p>{`GE: ${course.geCategories}`}</p>
46+
<p>{`Division: ${course.division}`}</p>
47+
<p>{`Description: ${course.description}`}</p>
48+
</div>
49+
</div>
50+
);
51+
}
52+
}
3353

3454
class PopMenu extends React.Component {
3555
constructor(props) {
@@ -109,35 +129,23 @@ class PopMenu extends React.Component {
109129
<div ref={node => {
110130
this.node = node;
111131
}} style={lStyle} id="listDiv" onScroll={this.onListScroll}>
112-
<List>{data.map(({name, title, instructor, terms, description, geCategories, division}) => (
132+
<List>{data.map((course) => (
113133
<div ref={this.setWrapperRef}>
114134
<Popup trigger={
115135
<ListItem
116136
style={pStyle}
117-
key={name + `${n++}`}
137+
key={course.name + `${n++}`}
118138
dense
119139
divider
120140
button
121141
>
122-
<ListItemText primary={name + ' ' + title}
123-
secondary={`Instr: ${instructor}`}/>
142+
<ListItemText primary={name + ' ' + this.props.title}
143+
secondary={`Instr: ${this.props.instructor}`}/>
124144
</ListItem>
125145
} modal>
126-
{close => (
127-
<div className="modal">
128-
<a className="close" onClick={close}>&times;</a>
129-
<div className="header">
130-
{`${name} ${title}`}
131-
</div>
132-
<div className={'content'}>
133-
<p>{`Instructor: ${instructor}`}</p>
134-
<p>{`Terms: ${terms}`}</p>
135-
<p>{`GE: ${geCategories}`}</p>
136-
<p>{`Division: ${division}`}</p>
137-
<p>{`Description: ${description}`}</p>
138-
</div>
139-
</div>
140-
)}
146+
{close =>
147+
<CourseDetailsWindow course={course} onClose={close} />
148+
}
141149
</Popup>
142150
</div>
143151
))}

‎components/Popups.jsx‎

Lines changed: 52 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,42 @@
11
import React from 'react';
22
import Popup from 'reactjs-popup';
33

4+
class CourseDetailsPanel extends React.Component {
5+
render() {
6+
const course = this.props.course;
7+
return (
8+
<div className={'content'}>
9+
<p>{'Instructor: '}{course.instructor}</p>
10+
<p>{'Time: '}{course.time}</p>
11+
<p>{'Location: '}{course.location}</p>
12+
</div>
13+
);
14+
}
15+
}
16+
17+
class CourseDetailsWindow extends React.Component {
18+
render() {
19+
const course = this.props.course;
20+
return (
21+
<div className="modal">
22+
<a className="close" onClick={this.props.onClose}>&times;</a>
23+
<button onClick={this.props.onSelectDefTag('N/A')}>N/A</button>
24+
<button onClick={this.props.onSelectDefTag('In Progress')}>In Progress</button>
25+
<button onClick={this.props.onSelectDefTag('Finished')}>Finished</button>
26+
<div className="header">{course.course_number}</div>
27+
<CourseDetailsPanel course={course} />
28+
</div>
29+
);
30+
}
31+
}
432

533
class Popups extends React.Component {
634
constructor(props) {
735
super(props);
8-
this.handleClick = this.handleClick.bind(this);
36+
this.removeDefTags = this.removeDefTags.bind(this);
37+
this.selectDefTag = this.selectDefTag.bind(this);
938
this.state = {
10-
tags: [] || props.tags,
39+
deftags: [] || props.tags,
1140
};
1241
}
1342

@@ -21,36 +50,37 @@ class Popups extends React.Component {
2150
}),
2251
};
2352

24-
handleClick(e) {
53+
removeDefTags() {
54+
if (this.state.deftags === 'N/A'
55+
|| this.state.deftags === 'In Progress'
56+
|| this.state.deftags === 'Finished') {
57+
this.state.deftags = '';
58+
}
59+
}
60+
61+
selectDefTag(e) {
62+
this.removeDefTags();
2563
if (e === 'N/A') {
26-
this.state.tags = 'N/A';
64+
this.state.deftags = 'N/A';
2765
}
2866
if (e === 'In Progress') {
29-
this.state.tags = 'In Progress';
67+
this.state.deftags = 'In Progress';
3068
}
3169
if (e === 'Finished') {
32-
this.state.tags = 'Finished';
70+
this.state.deftags = 'Finished';
3371
}
34-
console.log(`get tags: ${this.state.tags}`);
3572
}
3673

3774
render() {
3875
return <div>
39-
<Popup trigger={<a className="button">{this.props.myLists.course_title}</a>} modal>
40-
{close => (
41-
<div className="modal">
42-
<a className="close" onClick={close}>&times;</a>
43-
<button onClick={() => this.handleClick('N/A')}>N/A</button>
44-
<button onClick={() => this.handleClick('In Progress')}>In Progress</button>
45-
<button onClick={() => this.handleClick('Finished')}>Finished</button>
46-
<div className="header">{this.props.myLists.course_number}</div>
47-
<div className={'content'}>
48-
<p>{'Instructor: '}{this.props.myLists.instructor}</p>
49-
<p>{'Time: '}{this.props.myLists.time}</p>
50-
<p>{'Location: '}{this.props.myLists.location}</p>
51-
</div>
52-
</div>
53-
)}
76+
<Popup
77+
trigger={<a className="button">{this.props.myLists.course_title}</a>} modal>
78+
{close =>
79+
<CourseDetailsWindow
80+
course={this.props.myLists}
81+
onClose={close}
82+
onSelectDefTag={(tag) => this.selectDefTag(tag)} />
83+
}
5484
</Popup>
5585
</div>;
5686
}

‎components/Search.jsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
33
import { Configure, Highlight, Hits, SearchBox } from 'react-instantsearch/dom';
4+
45
import { InstantSearch } from './Instantsearch';
56

67
/**

‎components/SearchBar.jsx‎

Lines changed: 0 additions & 23 deletions
This file was deleted.

‎components/Tooltip.jsx‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
4+
// The modal "window"
5+
const modalStyle = {
6+
backgroundColor: '#fff',
7+
borderRadius: 5,
8+
maxWidth: 500,
9+
minHeight: 300,
10+
margin: '0 auto',
11+
padding: 30,
12+
};
13+
14+
class Tooltip extends React.Component {
15+
static propTypes = {
16+
content: PropTypes.object,
17+
trigger: PropTypes.object,
18+
};
19+
20+
static defaultProps = {
21+
content: '',
22+
trigger: '',
23+
};
24+
25+
constructor(props) {
26+
super(props);
27+
this.handleMouseOver = this.handleMouseOver.bind(this);
28+
this.handleMouseOut = this.handleMouseOut.bind(this);
29+
this.handleClick = this.handleClick.bind(this);
30+
this.handleOutsideClick = this.handleOutsideClick.bind(this);
31+
this.state = {
32+
isOpen: false,
33+
};
34+
}
35+
36+
handleMouseOver = () => {
37+
this.setState({isOpen: true});
38+
};
39+
40+
handleMouseOut = () => {
41+
this.setState({isOpen: false});
42+
};
43+
44+
handleClick = () => {
45+
if (!this.state.isOpen) {
46+
document.addEventListener('click', this.handleOutsideClick, false);
47+
} else {
48+
document.removeEventListener('click', this.handleOutsideClick, false);
49+
}
50+
this.setState({
51+
isOpen: this.state.isOpen,
52+
});
53+
};
54+
55+
handleOutsideClick = (e) => {
56+
if (this.node.contains(e.target)) {
57+
return;
58+
}
59+
this.handleClick();
60+
};
61+
62+
63+
render() {
64+
return (
65+
<div>
66+
<div
67+
onMouseOver={this.handleMouseOver}
68+
onMouseOut={this.handleMouseOut}
69+
onClick={this.handleClick}
70+
onClose={this.handleOutsideClick}
71+
>
72+
{this.props.trigger}
73+
</div>
74+
<div>
75+
{this.state.isOpen &&
76+
<div style={modalStyle}>
77+
{this.props.content}
78+
</div>
79+
}
80+
</div>
81+
</div>
82+
);
83+
}
84+
}
85+
86+
export default Tooltip;

0 commit comments

Comments
 (0)