From 615503078e85803b8f8e46377b6d35094c56333e Mon Sep 17 00:00:00 2001
From: Kevin Abraham <abraha2d@users.noreply.github.com>
Date: Wed, 8 Aug 2018 12:05:40 -0400
Subject: [PATCH 01/10] Put proxy config back to localhost

---
 package.json | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index d85ad57..7443213 100644
--- a/package.json
+++ b/package.json
@@ -78,5 +78,12 @@
       "git add"
     ]
   },
-  "proxy": "https://web.coursewatch.sueztech.com"
+  "proxy": {
+    "/api": {
+      "target": "http://localhost:9000",
+      "pathRewrite": {
+        "^/api/": "/"
+      }
+    }
+  }
 }

From 219b58da3f708541d75073f3a776a3239c12a896 Mon Sep 17 00:00:00 2001
From: Kevin Abraham <abraha2d@users.noreply.github.com>
Date: Wed, 8 Aug 2018 17:40:54 -0400
Subject: [PATCH 02/10] Add college and term dropdowns to add course dialog

---
 src/components/AddCourseDialog/index.js | 144 +++++++++++++++++++-----
 1 file changed, 115 insertions(+), 29 deletions(-)

diff --git a/src/components/AddCourseDialog/index.js b/src/components/AddCourseDialog/index.js
index b1ff627..dc31011 100644
--- a/src/components/AddCourseDialog/index.js
+++ b/src/components/AddCourseDialog/index.js
@@ -15,8 +15,11 @@ import {
   DialogActions,
   DialogContent,
   DialogTitle,
+  FormControl,
+  InputLabel,
+  MenuItem,
   Paper,
-  TextField,
+  Select as MuiSelect,
   Typography,
   withMobileDialog,
   withStyles
@@ -38,18 +41,24 @@ const styles = theme => ({
 
 class AddCourseDialog extends React.PureComponent {
   state = {
-    term: "201809",
-    crn: "",
+    college: "",
+    term: "",
+    course: "",
     loading: false,
+    responses: {
+      colleges: null,
+      terms: null,
+      courses: null
+    },
     error: null,
     errors: {
+      college: false,
       term: false,
-      crn: false
+      course: false
     }
   };
 
-  handleChange = name => event => {
-    const value = event.target.value;
+  handleChange = name => value => {
     this.setState(prevState => ({
       [name]: value,
       errors: {
@@ -57,6 +66,64 @@ class AddCourseDialog extends React.PureComponent {
         [name]: false
       }
     }));
+    if (name === "college") {
+      this.getTerms(value);
+    } else if (name === "term") {
+      this.getCourses(value);
+    }
+  };
+
+  getColleges = () => {
+    this.setState(prevState => ({
+      error: null,
+      loading: true,
+      responses: { ...prevState.responses, terms: null, courses: null }
+    }));
+    axios
+      .get("/api/colleges", {
+        headers: { Authorization: `Bearer ${this.props.apiAccessToken}` }
+      })
+      .then(response => {
+        this.setState(prevState => ({
+          loading: false,
+          responses: { ...prevState.responses, colleges: response.data }
+        }));
+      })
+      .catch(error => this.setState({ loading: false, error }));
+  };
+
+  getTerms = college => {
+    this.setState(prevState => ({
+      error: null,
+      loading: true,
+      responses: { ...prevState.responses, courses: null }
+    }));
+    axios
+      .get(`/api/terms?college=${college}`, {
+        headers: { Authorization: `Bearer ${this.props.apiAccessToken}` }
+      })
+      .then(response => {
+        this.setState(prevState => ({
+          loading: false,
+          responses: { ...prevState.responses, terms: response.data }
+        }));
+      })
+      .catch(error => this.setState({ loading: false, error }));
+  };
+
+  getCourses = term => {
+    this.setState({ error: null, loading: true });
+    return axios
+      .get(`/api/courses?term=${term}`, {
+        headers: { Authorization: `Bearer ${this.props.apiAccessToken}` }
+      })
+      .then(response => {
+        this.setState(prevState => ({
+          loading: false,
+          responses: { ...prevState.responses, courses: response.data }
+        }));
+      })
+      .catch(error => this.setState({ loading: false, error }));
   };
 
   addCourse = event => {
@@ -65,14 +132,8 @@ class AddCourseDialog extends React.PureComponent {
     axios
       .post(
         "/api/subscriptions",
-        {
-          term: this.state.term,
-          crn: this.state.crn,
-          title: `Sample Course (CRN: ${this.state.crn})`
-        },
-        {
-          headers: { Authorization: `Bearer ${this.props.apiAccessToken}` }
-        }
+        { course: this.state.course },
+        { headers: { Authorization: `Bearer ${this.props.apiAccessToken}` } }
       )
       .then(response => {
         this.setState({ loading: false });
@@ -81,6 +142,10 @@ class AddCourseDialog extends React.PureComponent {
       .catch(error => this.setState({ loading: false, error }));
   };
 
+  componentWillMount() {
+    this.getColleges();
+  }
+
   render() {
     const { classes } = this.props;
     return (
@@ -101,27 +166,48 @@ class AddCourseDialog extends React.PureComponent {
         <form onSubmit={this.addCourse}>
           <DialogTitle id="add-dialog-title">Add course</DialogTitle>
           <DialogContent>
-            <TextField
-              id="term"
-              label="Term"
+            <FormControl
+              disabled={this.state.responses.colleges === null}
               required
               fullWidth
               margin="dense"
-              value={this.state.term}
-              onChange={this.handleChange("term")}
-              error={this.state.errors.term !== false}
-            />
-            <TextField
-              id="crn"
-              label="CRN"
+              error={this.state.errors.college !== false}
+            >
+              <InputLabel htmlFor="college">College</InputLabel>
+              <MuiSelect
+                value={this.state.college}
+                onChange={event =>
+                  this.handleChange("college")(event.target.value)
+                }
+                inputProps={{ name: "college", id: "college" }}
+              >
+                {this.state.responses.colleges &&
+                  this.state.responses.colleges.map(college => (
+                    <MenuItem value={college.id}>{college.name}</MenuItem>
+                  ))}
+              </MuiSelect>
+            </FormControl>
+            <FormControl
+              disabled={this.state.responses.terms === null}
               required
-              autoFocus
               fullWidth
               margin="dense"
-              value={this.state.crn}
-              onChange={this.handleChange("crn")}
-              error={this.state.errors.crn !== false}
-            />
+              error={this.state.errors.term !== false}
+            >
+              <InputLabel htmlFor="term">Term</InputLabel>
+              <MuiSelect
+                value={this.state.term}
+                onChange={event =>
+                  this.handleChange("term")(event.target.value)
+                }
+                inputProps={{ name: "term", id: "term" }}
+              >
+                {this.state.responses.terms &&
+                  this.state.responses.terms.map(term => (
+                    <MenuItem value={term.id}>{term.name}</MenuItem>
+                  ))}
+              </MuiSelect>
+            </FormControl>
           </DialogContent>
           <DialogActions>
             <Button onClick={() => this.props.onClose()} color="primary">

From e673cc06c0610bd6d667e2e849fd5a6d336affe9 Mon Sep 17 00:00:00 2001
From: Kevin Abraham <abraha2d@users.noreply.github.com>
Date: Wed, 8 Aug 2018 18:33:00 -0400
Subject: [PATCH 03/10] Refactor add course dialog to use TextField instead of
 base FormControl

---
 src/components/AddCourseDialog/index.js | 60 +++++++++++--------------
 1 file changed, 25 insertions(+), 35 deletions(-)

diff --git a/src/components/AddCourseDialog/index.js b/src/components/AddCourseDialog/index.js
index dc31011..5f82746 100644
--- a/src/components/AddCourseDialog/index.js
+++ b/src/components/AddCourseDialog/index.js
@@ -15,11 +15,9 @@ import {
   DialogActions,
   DialogContent,
   DialogTitle,
-  FormControl,
-  InputLabel,
   MenuItem,
   Paper,
-  Select as MuiSelect,
+  TextField,
   Typography,
   withMobileDialog,
   withStyles
@@ -166,48 +164,40 @@ class AddCourseDialog extends React.PureComponent {
         <form onSubmit={this.addCourse}>
           <DialogTitle id="add-dialog-title">Add course</DialogTitle>
           <DialogContent>
-            <FormControl
-              disabled={this.state.responses.colleges === null}
+            <TextField
+              select
+              label="College"
               required
               fullWidth
               margin="dense"
+              value={this.state.college}
+              onChange={event =>
+                this.handleChange("college")(event.target.value)
+              }
+              disabled={this.state.responses.colleges === null}
               error={this.state.errors.college !== false}
             >
-              <InputLabel htmlFor="college">College</InputLabel>
-              <MuiSelect
-                value={this.state.college}
-                onChange={event =>
-                  this.handleChange("college")(event.target.value)
-                }
-                inputProps={{ name: "college", id: "college" }}
-              >
-                {this.state.responses.colleges &&
-                  this.state.responses.colleges.map(college => (
-                    <MenuItem value={college.id}>{college.name}</MenuItem>
-                  ))}
-              </MuiSelect>
-            </FormControl>
-            <FormControl
-              disabled={this.state.responses.terms === null}
+              {this.state.responses.colleges &&
+                this.state.responses.colleges.map(college => (
+                  <MenuItem value={college.id}>{college.name}</MenuItem>
+                ))}
+            </TextField>
+            <TextField
+              select
+              label="Term"
               required
               fullWidth
               margin="dense"
+              value={this.state.term}
+              onChange={event => this.handleChange("term")(event.target.value)}
+              disabled={this.state.responses.terms === null}
               error={this.state.errors.term !== false}
             >
-              <InputLabel htmlFor="term">Term</InputLabel>
-              <MuiSelect
-                value={this.state.term}
-                onChange={event =>
-                  this.handleChange("term")(event.target.value)
-                }
-                inputProps={{ name: "term", id: "term" }}
-              >
-                {this.state.responses.terms &&
-                  this.state.responses.terms.map(term => (
-                    <MenuItem value={term.id}>{term.name}</MenuItem>
-                  ))}
-              </MuiSelect>
-            </FormControl>
+              {this.state.responses.terms &&
+                this.state.responses.terms.map(term => (
+                  <MenuItem value={term.id}>{term.name}</MenuItem>
+                ))}
+            </TextField>
           </DialogContent>
           <DialogActions>
             <Button onClick={() => this.props.onClose()} color="primary">

From d7fd738d4bdef8d907646f921c3a93836039bb34 Mon Sep 17 00:00:00 2001
From: Kevin Abraham <abraha2d@users.noreply.github.com>
Date: Wed, 8 Aug 2018 18:33:37 -0400
Subject: [PATCH 04/10] Fix MuiTheme hot reloading

---
 src/index.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/index.js b/src/index.js
index d1c2c88..979a7ad 100644
--- a/src/index.js
+++ b/src/index.js
@@ -51,7 +51,9 @@ if (module.hot) {
       <Provider store={store}>
         <ConnectedRouter history={history}>
           <CssBaseline>
-            <App />
+            <MuiThemeProvider theme={theme}>
+              <App />
+            </MuiThemeProvider>
           </CssBaseline>
         </ConnectedRouter>
       </Provider>,

From f72efbef5274ea24580aecf423e6bd45771bb178 Mon Sep 17 00:00:00 2001
From: Kevin Abraham <abraha2d@users.noreply.github.com>
Date: Wed, 8 Aug 2018 20:19:31 -0400
Subject: [PATCH 05/10] Add autosuggest course field

---
 package.json                            |  1 +
 src/components/AddCourseDialog/index.js | 81 ++++++++++++++++++++++---
 yarn.lock                               | 30 +++++++++
 3 files changed, 104 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index 7443213..126412d 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,7 @@
     "lodash": "^4.17.10",
     "prop-types": "*",
     "react": "^16.4.1",
+    "react-autosuggest": "^9.3.4",
     "react-dom": "^16.4.1",
     "react-helmet": "^5.2.0",
     "react-redux": "^5.0.7",
diff --git a/src/components/AddCourseDialog/index.js b/src/components/AddCourseDialog/index.js
index 5f82746..e75e6a9 100644
--- a/src/components/AddCourseDialog/index.js
+++ b/src/components/AddCourseDialog/index.js
@@ -8,6 +8,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import { compose } from "redux";
 import axios from "axios";
+import Autosuggest from "react-autosuggest";
 
 import {
   Button,
@@ -15,6 +16,7 @@ import {
   DialogActions,
   DialogContent,
   DialogTitle,
+  ListItemText,
   MenuItem,
   Paper,
   TextField,
@@ -48,6 +50,8 @@ class AddCourseDialog extends React.PureComponent {
       terms: null,
       courses: null
     },
+    suggestions: [],
+    courseId: "",
     error: null,
     errors: {
       college: false,
@@ -56,7 +60,8 @@ class AddCourseDialog extends React.PureComponent {
     }
   };
 
-  handleChange = name => value => {
+  handleChange = name => (event, nvm) => {
+    const value = nvm ? nvm.newValue : event.target.value;
     this.setState(prevState => ({
       [name]: value,
       errors: {
@@ -120,17 +125,32 @@ class AddCourseDialog extends React.PureComponent {
           loading: false,
           responses: { ...prevState.responses, courses: response.data }
         }));
+        this.setState({ suggestions: this.getSuggestions("") });
       })
       .catch(error => this.setState({ loading: false, error }));
   };
 
+  // noinspection JSUnresolvedVariable
+  getCourseValue = course =>
+    `${course.crn} - ${course.subject} ${course.number} ${course.section}`;
+
+  getSuggestions = input =>
+    this.state.responses.courses.filter(course => {
+      return this.getCourseValue(course)
+        .toLowerCase()
+        .includes(input.toLowerCase());
+    });
+
   addCourse = event => {
     event.preventDefault();
+    if (this.state.courseId === "") {
+      return;
+    }
     this.setState({ error: null, loading: true });
     axios
       .post(
         "/api/subscriptions",
-        { course: this.state.course },
+        { course: this.state.courseId },
         { headers: { Authorization: `Bearer ${this.props.apiAccessToken}` } }
       )
       .then(response => {
@@ -171,15 +191,15 @@ class AddCourseDialog extends React.PureComponent {
               fullWidth
               margin="dense"
               value={this.state.college}
-              onChange={event =>
-                this.handleChange("college")(event.target.value)
-              }
+              onChange={this.handleChange("college")}
               disabled={this.state.responses.colleges === null}
               error={this.state.errors.college !== false}
             >
               {this.state.responses.colleges &&
                 this.state.responses.colleges.map(college => (
-                  <MenuItem value={college.id}>{college.name}</MenuItem>
+                  <MenuItem key={college.id} value={college.id}>
+                    {college.name}
+                  </MenuItem>
                 ))}
             </TextField>
             <TextField
@@ -189,15 +209,60 @@ class AddCourseDialog extends React.PureComponent {
               fullWidth
               margin="dense"
               value={this.state.term}
-              onChange={event => this.handleChange("term")(event.target.value)}
+              onChange={this.handleChange("term")}
               disabled={this.state.responses.terms === null}
               error={this.state.errors.term !== false}
             >
               {this.state.responses.terms &&
                 this.state.responses.terms.map(term => (
-                  <MenuItem value={term.id}>{term.name}</MenuItem>
+                  <MenuItem key={term.id} value={term.id}>
+                    {term.name}
+                  </MenuItem>
                 ))}
             </TextField>
+            <Autosuggest
+              suggestions={this.state.suggestions}
+              onSuggestionsFetchRequested={({ value }) => {
+                this.setState({
+                  suggestions: this.getSuggestions(value)
+                });
+              }}
+              onSuggestionsClearRequested={() => {}}
+              getSuggestionValue={this.getCourseValue}
+              renderSuggestion={(course, { query, isHighlighted }) => (
+                <MenuItem selected={isHighlighted}>
+                  <ListItemText
+                    primary={this.getCourseValue(course)}
+                    secondary={course.title}
+                  />
+                </MenuItem>
+              )}
+              inputProps={{
+                value: this.state.course,
+                onChange: this.handleChange("course")
+              }}
+              onSuggestionSelected={(event, { suggestion }) => {
+                this.setState({ courseId: suggestion.id });
+              }}
+              alwaysRenderSuggestions
+              highlightFirstSuggestion
+              renderInputComponent={inputProps => {
+                const { value, onChange, ...rest } = inputProps;
+                return (
+                  <TextField
+                    label="Course"
+                    required
+                    fullWidth
+                    margin="dense"
+                    value={value}
+                    onChange={onChange}
+                    disabled={this.state.responses.courses === null}
+                    error={this.state.errors.course !== false}
+                    inputProps={rest}
+                  />
+                );
+              }}
+            />
           </DialogContent>
           <DialogActions>
             <Button onClick={() => this.props.onClose()} color="primary">
diff --git a/yarn.lock b/yarn.lock
index 333809c..fa6ef55 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7722,6 +7722,22 @@ react-addons-create-fragment@^15.5.3:
     loose-envify "^1.3.1"
     object-assign "^4.1.0"
 
+react-autosuggest@^9.3.4:
+  version "9.3.4"
+  resolved "https://registry.yarnpkg.com/react-autosuggest/-/react-autosuggest-9.3.4.tgz#e47ff800081b2f7c678165bfb7cc84b07f462336"
+  dependencies:
+    prop-types "^15.5.10"
+    react-autowhatever "^10.1.0"
+    shallow-equal "^1.0.0"
+
+react-autowhatever@^10.1.0:
+  version "10.1.2"
+  resolved "https://registry.yarnpkg.com/react-autowhatever/-/react-autowhatever-10.1.2.tgz#200ffc41373b2189e3f6140ac7bdb82363a79fd3"
+  dependencies:
+    prop-types "^15.5.8"
+    react-themeable "^1.1.0"
+    section-iterator "^2.0.0"
+
 react-color@^2.14.0:
   version "2.14.1"
   resolved "https://registry.yarnpkg.com/react-color/-/react-color-2.14.1.tgz#db8ad4f45d81e74896fc2e1c99508927c6d084e0"
@@ -7979,6 +7995,12 @@ react-textarea-autosize@^5.2.1:
   dependencies:
     prop-types "^15.6.0"
 
+react-themeable@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/react-themeable/-/react-themeable-1.1.0.tgz#7d4466dd9b2b5fa75058727825e9f152ba379a0e"
+  dependencies:
+    object-assign "^3.0.0"
+
 react-transition-group@^2.0.0, react-transition-group@^2.2.1:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.4.0.tgz#1d9391fabfd82e016f26fabd1eec329dbd922b5a"
@@ -8500,6 +8522,10 @@ scroll@^2.0.3:
   dependencies:
     rafl "~1.2.1"
 
+section-iterator@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/section-iterator/-/section-iterator-2.0.0.tgz#bf444d7afeeb94ad43c39ad2fb26151627ccba2a"
+
 select-hose@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"
@@ -8633,6 +8659,10 @@ sha.js@^2.4.0, sha.js@^2.4.8:
     inherits "^2.0.1"
     safe-buffer "^5.0.1"
 
+shallow-equal@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/shallow-equal/-/shallow-equal-1.0.0.tgz#508d1838b3de590ab8757b011b25e430900945f7"
+
 shallowequal@^0.2.2:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-0.2.2.tgz#1e32fd5bcab6ad688a4812cb0cc04efc75c7014e"

From 7edcf351c30ea6838e1951c3bd25325157960d28 Mon Sep 17 00:00:00 2001
From: Kevin Abraham <abraha2d@users.noreply.github.com>
Date: Wed, 8 Aug 2018 20:20:25 -0400
Subject: [PATCH 06/10] Update .gitignore

---
 .gitignore | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.gitignore b/.gitignore
index a21dfc7..e87b7a8 100644
--- a/.gitignore
+++ b/.gitignore
@@ -21,3 +21,4 @@ yarn-debug.log*
 yarn-error.log*
 
 .idea/workspace.xml
+.idea/dictionaries

From b376fc70578b0bc02d296d3b553376b15fffb27a Mon Sep 17 00:00:00 2001
From: Kevin Abraham <abraha2d@users.noreply.github.com>
Date: Wed, 8 Aug 2018 20:29:14 -0400
Subject: [PATCH 07/10] Update subscriptions page to work with new backend data

---
 src/containers/Subscriptions/index.js | 48 +++++++++++++++------------
 1 file changed, 27 insertions(+), 21 deletions(-)

diff --git a/src/containers/Subscriptions/index.js b/src/containers/Subscriptions/index.js
index 0d44224..0d9a745 100644
--- a/src/containers/Subscriptions/index.js
+++ b/src/containers/Subscriptions/index.js
@@ -59,10 +59,10 @@ class Subscriptions extends React.PureComponent {
   state = {
     loading: true,
     deleteLoading: {},
-    response: null,
+    subscriptions: null,
     error: null,
-    addCourse: false,
-    editCourse: null
+    addSubscription: false,
+    editSubscription: null
   };
 
   componentWillMount() {
@@ -76,12 +76,16 @@ class Subscriptions extends React.PureComponent {
         headers: { Authorization: `Bearer ${this.props.auth.token}` }
       })
       .then(response => {
-        this.setState({ loading: false, deleteLoading: {}, response });
+        this.setState({
+          loading: false,
+          deleteLoading: {},
+          subscriptions: response.data
+        });
       })
       .catch(error => this.setState({ loading: false, error }));
   };
 
-  deleteCourse = id => () => {
+  deleteSubscription = id => () => {
     this.setState(prevState => ({
       error: null,
       deleteLoading: { ...prevState.deleteLoading, [id]: true }
@@ -102,22 +106,22 @@ class Subscriptions extends React.PureComponent {
   };
 
   openAddDialog = () => {
-    this.setState({ addCourse: true });
+    this.setState({ addSubscription: true });
   };
 
   handleAddDialogClose = response => {
-    this.setState({ addCourse: false });
+    this.setState({ addSubscription: false });
     if (response) {
       this.refresh();
     }
   };
 
   openEditDialog = course => () => {
-    this.setState({ editCourse: course });
+    this.setState({ editSubscription: course });
   };
 
   handleEditDialogClose = response => {
-    this.setState({ editCourse: null });
+    this.setState({ editSubscription: null });
     if (response) {
       this.refresh();
     }
@@ -141,22 +145,24 @@ class Subscriptions extends React.PureComponent {
           </Paper>
         )}
         <List>
-          {this.state.response &&
-            this.state.response.data.map(course => (
+          {this.state.subscriptions &&
+            this.state.subscriptions.map(subscription => (
               <ListItem
                 button
-                key={course.id}
-                onClick={this.openEditDialog(course)}
+                key={subscription.id}
+                onClick={this.openEditDialog(subscription)}
               >
                 <ListItemText
-                  primary={course.title}
-                  secondary={`CRN: ${course.crn} (Term: ${course.term})`}
+                  primary={subscription.course.title}
+                  secondary={`CRN: ${subscription.course.crn} (Term: ${
+                    subscription.course.term.name
+                  })`}
                 />
                 <ListItemSecondaryAction>
                   <ProgressButton
                     aria-label="Delete"
-                    onClick={this.deleteCourse(course.id)}
-                    loading={this.state.deleteLoading[course.id]}
+                    onClick={this.deleteSubscription(subscription.id)}
+                    loading={this.state.deleteLoading[subscription.id]}
                   >
                     <DeleteIcon />
                   </ProgressButton>
@@ -167,20 +173,20 @@ class Subscriptions extends React.PureComponent {
             <ListItemIcon>
               <AddIcon />
             </ListItemIcon>
-            <ListItemText primary="Add a course..." />
+            <ListItemText primary="Add a subscription..." />
           </ListItem>
         </List>
-        {this.state.addCourse && (
+        {this.state.addSubscription && (
           <AddCourseDialog
             apiAccessToken={this.props.auth.token}
             onClose={this.handleAddDialogClose}
           />
         )}
-        {this.state.editCourse != null && (
+        {this.state.editSubscription != null && (
           <EditCourseDialog
             apiAccessToken={this.props.auth.token}
             onClose={this.handleEditDialogClose}
-            course={this.state.editCourse}
+            course={this.state.editSubscription}
           />
         )}
       </div>

From c19a03bcbab66df1c2b71a1af99136ca437efb04 Mon Sep 17 00:00:00 2001
From: Kevin Abraham <abraha2d@users.noreply.github.com>
Date: Wed, 8 Aug 2018 21:05:08 -0400
Subject: [PATCH 08/10] Update edit dialog to work with new backend data

---
 src/components/AddCourseDialog/index.js  |  12 +-
 src/components/EditCourseDialog/index.js | 213 ++++++++++++++++++-----
 src/containers/Subscriptions/index.js    |   2 +-
 3 files changed, 183 insertions(+), 44 deletions(-)

diff --git a/src/components/AddCourseDialog/index.js b/src/components/AddCourseDialog/index.js
index e75e6a9..e3f71e5 100644
--- a/src/components/AddCourseDialog/index.js
+++ b/src/components/AddCourseDialog/index.js
@@ -70,8 +70,10 @@ class AddCourseDialog extends React.PureComponent {
       }
     }));
     if (name === "college") {
+      this.setState({ term: "", course: "", courseId: "" });
       this.getTerms(value);
     } else if (name === "term") {
+      this.setState({ course: "", courseId: "" });
       this.getCourses(value);
     }
   };
@@ -80,9 +82,10 @@ class AddCourseDialog extends React.PureComponent {
     this.setState(prevState => ({
       error: null,
       loading: true,
-      responses: { ...prevState.responses, terms: null, courses: null }
+      responses: { ...prevState.responses, terms: null, courses: null },
+      suggestions: []
     }));
-    axios
+    return axios
       .get("/api/colleges", {
         headers: { Authorization: `Bearer ${this.props.apiAccessToken}` }
       })
@@ -99,9 +102,10 @@ class AddCourseDialog extends React.PureComponent {
     this.setState(prevState => ({
       error: null,
       loading: true,
-      responses: { ...prevState.responses, courses: null }
+      responses: { ...prevState.responses, courses: null },
+      suggestions: []
     }));
-    axios
+    return axios
       .get(`/api/terms?college=${college}`, {
         headers: { Authorization: `Bearer ${this.props.apiAccessToken}` }
       })
diff --git a/src/components/EditCourseDialog/index.js b/src/components/EditCourseDialog/index.js
index 8f9af2b..f2bf81c 100644
--- a/src/components/EditCourseDialog/index.js
+++ b/src/components/EditCourseDialog/index.js
@@ -8,6 +8,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import { compose } from "redux";
 import axios from "axios";
+import Autosuggest from "react-autosuggest";
 
 import {
   Button,
@@ -15,6 +16,8 @@ import {
   DialogActions,
   DialogContent,
   DialogTitle,
+  ListItemText,
+  MenuItem,
   Paper,
   TextField,
   Typography,
@@ -40,21 +43,28 @@ class EditCourseDialog extends React.PureComponent {
   constructor(props) {
     super(props);
     this.state = {
-      term: props.course.term,
-      crn: props.course.crn,
-      title: props.course.title,
+      college: props.subscription.course.term.college.id,
+      term: props.subscription.course.term.id,
+      course: this.getCourseValue(props.subscription.course),
       loading: false,
+      responses: {
+        colleges: null,
+        terms: null,
+        courses: null
+      },
+      suggestions: [],
+      courseId: props.subscription.course.id,
       error: null,
       errors: {
+        college: false,
         term: false,
-        crn: false,
-        title: false
+        course: false
       }
     };
   }
 
-  handleChange = name => event => {
-    const value = event.target.value;
+  handleChange = name => (event, nvm) => {
+    const value = nvm ? nvm.newValue : event.target.value;
     this.setState(prevState => ({
       [name]: value,
       errors: {
@@ -62,22 +72,93 @@ class EditCourseDialog extends React.PureComponent {
         [name]: false
       }
     }));
+    if (name === "college") {
+      this.setState({ term: "", course: "", courseId: "" });
+      this.getTerms(value);
+    } else if (name === "term") {
+      this.setState({ course: "", courseId: "" });
+      this.getCourses(value);
+    }
   };
 
+  getColleges = () => {
+    this.setState(prevState => ({
+      error: null,
+      loading: true,
+      responses: { ...prevState.responses, terms: null, courses: null },
+      suggestions: []
+    }));
+    return axios
+      .get("/api/colleges", {
+        headers: { Authorization: `Bearer ${this.props.apiAccessToken}` }
+      })
+      .then(response => {
+        this.setState(prevState => ({
+          loading: false,
+          responses: { ...prevState.responses, colleges: response.data }
+        }));
+      })
+      .catch(error => this.setState({ loading: false, error }));
+  };
+
+  getTerms = college => {
+    this.setState(prevState => ({
+      error: null,
+      loading: true,
+      responses: { ...prevState.responses, courses: null },
+      suggestions: []
+    }));
+    return axios
+      .get(`/api/terms?college=${college}`, {
+        headers: { Authorization: `Bearer ${this.props.apiAccessToken}` }
+      })
+      .then(response => {
+        this.setState(prevState => ({
+          loading: false,
+          responses: { ...prevState.responses, terms: response.data }
+        }));
+      })
+      .catch(error => this.setState({ loading: false, error }));
+  };
+
+  getCourses = term => {
+    this.setState({ error: null, loading: true });
+    return axios
+      .get(`/api/courses?term=${term}`, {
+        headers: { Authorization: `Bearer ${this.props.apiAccessToken}` }
+      })
+      .then(response => {
+        this.setState(prevState => ({
+          loading: false,
+          responses: { ...prevState.responses, courses: response.data }
+        }));
+        this.setState({ suggestions: this.getSuggestions("") });
+      })
+      .catch(error => this.setState({ loading: false, error }));
+  };
+
+  // noinspection JSUnresolvedVariable
+  getCourseValue = course =>
+    `${course.crn} - ${course.subject} ${course.number} ${course.section}`;
+
+  getSuggestions = input =>
+    this.state.responses.courses.filter(course => {
+      return this.getCourseValue(course)
+        .toLowerCase()
+        .includes(input.toLowerCase());
+    });
+
   editCourse = event => {
     event.preventDefault();
+    if (this.state.courseId === "") {
+      return;
+    }
     this.setState({ error: null, loading: true });
     axios
       .put(
-        `/api/subscriptions/${this.props.course.id}`,
-        {
-          term: this.state.term,
-          crn: this.state.crn,
-          title: this.state.title
-        },
-        {
-          headers: { Authorization: `Bearer ${this.props.apiAccessToken}` }
-        }
+        `/api/subscriptions/${this.props.subscription.id}`,
+        { course: this.state.courseId },
+        { headers: { Authorization: `Bearer ${this.props.apiAccessToken}` } }
       )
       .then(response => {
         this.setState({ loading: false });
@@ -86,6 +167,12 @@ class EditCourseDialog extends React.PureComponent {
       .catch(error => this.setState({ loading: false, error }));
   };
 
+  componentWillMount() {
+    this.getColleges()
+      .then(() => this.getTerms(this.state.college))
+      .then(() => this.getCourses(this.state.term));
+  }
+
   render() {
     const { classes } = this.props;
     return (
@@ -107,35 +194,83 @@ class EditCourseDialog extends React.PureComponent {
           <DialogTitle id="edit-dialog-title">Edit course</DialogTitle>
           <DialogContent>
             <TextField
-              id="term"
-              label="Term"
+              select
+              label="College"
               required
-              autoFocus
               fullWidth
               margin="dense"
-              value={this.state.term}
-              onChange={this.handleChange("term")}
-              error={this.state.errors.term !== false}
-            />
-            <TextField
-              id="crn"
-              label="CRN"
-              required
-              fullWidth
-              margin="dense"
-              value={this.state.crn}
-              onChange={this.handleChange("crn")}
-              error={this.state.errors.crn !== false}
-            />
+              value={this.state.college}
+              onChange={this.handleChange("college")}
+              disabled={this.state.responses.colleges === null}
+              error={this.state.errors.college !== false}
+            >
+              {this.state.responses.colleges &&
+                this.state.responses.colleges.map(college => (
+                  <MenuItem key={college.id} value={college.id}>
+                    {college.name}
+                  </MenuItem>
+                ))}
+            </TextField>
             <TextField
-              id="title"
-              label="Title"
+              select
+              label="Term"
               required
               fullWidth
               margin="dense"
-              value={this.state.title}
-              onChange={this.handleChange("title")}
-              error={this.state.errors.title !== false}
+              value={this.state.term}
+              onChange={this.handleChange("term")}
+              disabled={this.state.responses.terms === null}
+              error={this.state.errors.term !== false}
+            >
+              {this.state.responses.terms &&
+                this.state.responses.terms.map(term => (
+                  <MenuItem key={term.id} value={term.id}>
+                    {term.name}
+                  </MenuItem>
+                ))}
+            </TextField>
+            <Autosuggest
+              suggestions={this.state.suggestions}
+              onSuggestionsFetchRequested={({ value }) => {
+                this.setState({
+                  suggestions: this.getSuggestions(value)
+                });
+              }}
+              onSuggestionsClearRequested={() => {}}
+              getSuggestionValue={this.getCourseValue}
+              renderSuggestion={(course, { query, isHighlighted }) => (
+                <MenuItem selected={isHighlighted}>
+                  <ListItemText
+                    primary={this.getCourseValue(course)}
+                    secondary={course.title}
+                  />
+                </MenuItem>
+              )}
+              inputProps={{
+                value: this.state.course,
+                onChange: this.handleChange("course")
+              }}
+              onSuggestionSelected={(event, { suggestion }) => {
+                this.setState({ courseId: suggestion.id });
+              }}
+              alwaysRenderSuggestions
+              highlightFirstSuggestion
+              renderInputComponent={inputProps => {
+                const { value, onChange, ...rest } = inputProps;
+                return (
+                  <TextField
+                    label="Course"
+                    required
+                    fullWidth
+                    margin="dense"
+                    value={value}
+                    onChange={onChange}
+                    disabled={this.state.responses.courses === null}
+                    error={this.state.errors.course !== false}
+                    inputProps={rest}
+                  />
+                );
+              }}
             />
           </DialogContent>
           <DialogActions>
@@ -157,7 +292,7 @@ EditCourseDialog.propTypes = {
   fullScreen: PropTypes.bool,
   onClose: PropTypes.func,
   apiAccessToken: PropTypes.string,
-  course: PropTypes.object
+  subscription: PropTypes.object
 };
 
 export default compose(
diff --git a/src/containers/Subscriptions/index.js b/src/containers/Subscriptions/index.js
index 0d9a745..2e48f64 100644
--- a/src/containers/Subscriptions/index.js
+++ b/src/containers/Subscriptions/index.js
@@ -186,7 +186,7 @@ class Subscriptions extends React.PureComponent {
           <EditCourseDialog
             apiAccessToken={this.props.auth.token}
             onClose={this.handleEditDialogClose}
-            course={this.state.editSubscription}
+            subscription={this.state.editSubscription}
           />
         )}
       </div>

From 3f4b4ed58bff0ec96aa860bc4c7e4dc8512c0b98 Mon Sep 17 00:00:00 2001
From: Kevin Abraham <abraha2d@users.noreply.github.com>
Date: Wed, 8 Aug 2018 21:18:06 -0400
Subject: [PATCH 09/10] Make add/edit dialog a bit more user friendly

---
 src/components/AddCourseDialog/index.js  | 2 +-
 src/components/EditCourseDialog/index.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/AddCourseDialog/index.js b/src/components/AddCourseDialog/index.js
index e3f71e5..8c7c79b 100644
--- a/src/components/AddCourseDialog/index.js
+++ b/src/components/AddCourseDialog/index.js
@@ -129,7 +129,7 @@ class AddCourseDialog extends React.PureComponent {
           loading: false,
           responses: { ...prevState.responses, courses: response.data }
         }));
-        this.setState({ suggestions: this.getSuggestions("") });
+        this.setState({ suggestions: this.getSuggestions(this.state.course) });
       })
       .catch(error => this.setState({ loading: false, error }));
   };
diff --git a/src/components/EditCourseDialog/index.js b/src/components/EditCourseDialog/index.js
index f2bf81c..2f0fa52 100644
--- a/src/components/EditCourseDialog/index.js
+++ b/src/components/EditCourseDialog/index.js
@@ -132,7 +132,7 @@ class EditCourseDialog extends React.PureComponent {
           loading: false,
           responses: { ...prevState.responses, courses: response.data }
         }));
-        this.setState({ suggestions: this.getSuggestions("") });
+        this.setState({ suggestions: this.getSuggestions(this.state.course) });
       })
       .catch(error => this.setState({ loading: false, error }));
   };

From 9c2976e26f8bcc10e2f4ff93d972e2db8b95689d Mon Sep 17 00:00:00 2001
From: Kevin Abraham <abraha2d@users.noreply.github.com>
Date: Wed, 8 Aug 2018 21:18:22 -0400
Subject: [PATCH 10/10] Bump version to 0.2.0-alpha.1

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 126412d..39dbc8b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "coursewatch",
-  "version": "0.1.0",
+  "version": "0.2.0-alpha.1",
   "homepage": "https://web.coursewatch.sueztech.com",
   "bugs": "https://github.com/abraha2d/coursewatch/issues",
   "license": "UNLICENSED",