Merge pull request #1 from bharatari/dev

v0.2.0

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "utd-grades-client",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "scripts": {
     "build": "nwb build-react-app",
     "clean": "nwb clean-app",
@@ -14,10 +14,12 @@
     "chart.js": "^2.7.2",
     "isomorphic-fetch": "^2.2.1",
     "lodash": "^4.17.10",
+    "query-string": "^6.2.0",
     "react": "^16.4.1",
     "react-dom": "^16.4.1",
     "react-redux": "^5.0.7",
     "react-router-dom": "^4.3.1",
+    "react-scroll": "^1.7.10",
     "react-transition-group": "^2.5.0",
     "redux": "^4.0.0",
     "redux-actions": "^2.6.1",

client/src/components/Core/styles.scss

@@ -5,7 +5,9 @@
   width: 100%;
   display: block;
   height: 60px;
-  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif
+  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
+  padding-left: 10px;
+  padding-right: 10px;
 }
 
 .body {

client/src/routes/Home/components/Form/index.js → client/src/components/Form/index.js

@@ -1,23 +1,25 @@
 import React from 'react';
 import classes from './styles.scss';
 import { Field, reduxForm } from 'redux-form';
-import { Form, Popover } from 'antd';
+import { Form, Popover, Input } from 'antd';
 import { AutoComplete } from 'components/';
 
+const Search = Input.Search;
+
 const renderField = ({ input, ...props }) => (
-  <AutoComplete {...input} {...props} />
+  <Search {...input} {...props} />
 );
 
 class HomeForm extends React.Component {
   render() {
-    const { handleSubmit, sections, onSearch, pristine, reset, submitting, onSelect } = this.props;
+    const { handleSubmit, onSearch, pristine, reset, submitting } = this.props;
     const content = (
       <div>
         <p>You can search for:</p>
         <ul>
           <li>A specific section: CS 1337.501</li>
           <li>A whole course: CS 1337</li>
-          <li>A professor's name (first or last or both): Jason Smith</li>
+          <li>A professor's name (last name or full): Jason Smith</li>
           <li>A specific semester: CS 1337 fall 2017</li>
           <li>Everything together: CS 1337.1 fall 2017 jason smith</li>
         </ul>
@@ -26,8 +28,8 @@ class HomeForm extends React.Component {
 
     return (
       <Form onSubmit={handleSubmit}>
-        <Field name="id" classes={classes.input} data={sections} placeholder="ex. CS 1337 Fall 2017 Smith"
-          component={renderField} onSearch={onSearch} uniqueKey="id" labelKey="name" onSelect={onSelect} />
+        <Field name="search" size="large" className={classes.input} placeholder="ex. CS 1337 Fall 2017 Smith" component={renderField}
+          onSearch={onSearch} />
         <Popover content={content} className={classes.hint} placement="bottom">
           <span style={{ textAlign: 'center' }}>
             Need to know what you can enter? <span style={{ textDecoration: 'underline' }}>Pretty much anything.</span>
@@ -40,4 +42,5 @@ class HomeForm extends React.Component {
 
 export default reduxForm({
   form: 'homeForm',
+  destroyOnUnmount: false,
 })(HomeForm);

client/src/components/Form/styles.scss

@@ -0,0 +1,15 @@
+.input input {
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
+  border-radius: 20px !important;
+  outline: none;
+  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
+}
+
+.hint {
+  margin-top: 25px;
+  margin-left: auto;
+  margin-right: auto;
+  display: block;
+  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
+  color: #95989A;
+}

client/src/components/index.js

@@ -1,9 +1,11 @@
 import AutoComplete from './AutoComplete';
 import Core from './Core';
 import Graph from './Graph';
+import Form from './Form';
 
 export {
   AutoComplete,
   Core,
   Graph,
+  Form,
 };

client/src/index.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta http-equiv="x-ua-compatible" content="ie=edge">
     <title>UTD Grades</title>
-    <meta name="description" content="">
+    <meta name="description" content="See how students did in any given class at UT Dallas. And it's free, forever.">
     <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i" rel="stylesheet">
     <!-- Global site tag (gtag.js) - Google Analytics -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=UA-128111650-1"></script>

client/src/modules/section/sagas.js

@@ -11,8 +11,6 @@ export function* fetchSections(action) {
   };
 
   try {
-    yield call(delay, 2000);
-
     const response = yield call(data.request.bind(data), 'section', 'get', null, params);
 
     yield put(actions.receiveSections(response));

client/src/routes/Home/View.js

@@ -1,8 +1,10 @@
 import React from 'react';
 import classes from './styles.scss';
-import { Form, LinkCard } from './components';
-import { Core } from 'components/';
+import { LinkCard } from './components';
+import { Core, Form } from 'components/';
 import { Row, Col, Card, Icon, Popover, Spin } from 'antd';
+import queryUtils from 'utils/query';
+import query from '../../utils/query';
 
 export default class HomeView extends React.Component {
   state = {
@@ -13,28 +15,24 @@ export default class HomeView extends React.Component {
       { name: 'Coursebook', backgroundColor: '#69BE28', link: 'https://coursebook.utdallas.edu' },
     ],
   };
-  handleSelect = (value, option) => {
-    //this.props.actions.submit('homeForm');
-    this.props.history.push(`/app/section/${value}`);
-  };
-  handleSearch = (search) => {
-    this.props.actions.fetchSections(search);
+  handleSearch = () => {
+    this.props.actions.submit('homeForm');
   };
   handleSubmit = (values) => {
-    this.props.history.push(`/app/section/${values.id}`);
+    queryUtils.pushQueryParamsToURL(this.props.location, this.props.history, {
+      search: values.search
+    }, '/app/results');
   };
   render() {
-    const antIcon = <Icon type="loading" style={{ fontSize: 24 }} spin />;
-
     return (
       <Core> 
         <div className={classes.content}>
           <Row>
             <Col lg={{ span: 8, offset: 8 }} sm={{ span: 18, offset: 3 }} xs={{ span: 20, offset: 2 }}>
-              <h2 className={classes.header}><span className={classes.headerBold}>UTD</span> Grades <Spin indicator={antIcon} spinning={this.props.loading} /></h2>
+              <h2 className={classes.header}><span className={classes.headerBold}>UTD</span> Grades</h2>
 
               <p className={classes.description}>See how students did in any given class. And it's <strong>free, forever.</strong></p>
-              <Form onSearch={this.handleSearch} sections={this.props.sections} onSubmit={this.handleSubmit} onSelect={this.handleSelect} />
+              <Form onSubmit={this.handleSubmit} onSearch={this.handleSearch} />
             </Col>
           </Row>
           <Row className={classes.quickLinksContainer}>

client/src/routes/Home/components/index.js

@@ -1,7 +1,5 @@
-import Form from './Form';
 import LinkCard from './LinkCard';
 
 export {
-  Form,
   LinkCard,
 };

client/src/routes/Home/index.js

@@ -12,8 +12,6 @@ import { normalizedSectionsSelector } from 'modules/section/selectors';
 const mapStateToProps = (state, ownProps) => ({
   location: ownProps.location,
   history: ownProps.history,
-  sections: normalizedSectionsSelector(state),
-  loading: state.section.fetchSections.requesting,
 });
 
 const actionCreators = {