Convert the redux implementation to typescript

Because I had to install a beta version of redux in order to get it to
stop throwing dispatch type errors, based on advice from some issue, I
had a subsequent problem  with redux-thunk not yet supporting that new
version.

There was a pull request already though to fix this, so I pulled the
changes from [that pr] into my redux-thunk npm package to get it to
work.  I have a comment on that PR as to exactly what I did.

As of this moment though, that PR still isn't quite finished and thus
this does not compile.

[that pr]: reduxjs/redux-thunk#180

package.json

@@ -24,19 +24,25 @@
   "author": "Zach Posten",
   "license": "MIT",
   "dependencies": {
-    "@types/react": "^16.0.38",
-    "@types/react-dom": "^16.0.4",
     "history": "^4.7.2",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
     "react-redux": "^5.0.7",
     "react-router": "^4.2.0",
     "react-router-dom": "^4.2.2",
-    "redux": "^3.7.2",
-    "redux-thunk": "^2.2.0",
-    "whatwg-fetch": "1.0.0"
+    "redux-thunk": "^2.2.0"
   },
   "devDependencies": {
+    "@types/material-ui": "^0.21.1",
+    "@types/node": "^9.4.6",
+    "@types/prop-types": "^15.5.2",
+    "@types/react": "^16.0.38",
+    "@types/react-bootstrap": "^0.32.6",
+    "@types/react-dom": "^16.0.4",
+    "@types/react-hot-loader": "^3.0.6",
+    "@types/react-router-dom": "^4.2.4",
+    "@types/redux-immutable-state-invariant": "^2.0.4",
+    "@types/webpack-env": "^1.13.5",
     "autoprefixer": "^8.0.0",
     "awesome-typescript-loader": "^3.5.0",
     "babel-cli": "6.16.0",
@@ -46,7 +52,7 @@
     "babel-preset-react": "^6.24.1",
     "babel-register": "6.16.3",
     "chai": "3.5.0",
-    "chalk": "1.1.3",
+    "chalk": "^2.3.1",
     "cheerio": "0.22.0",
     "classnames": "^2.2.5",
     "compression": "1.6.2",
@@ -73,12 +79,15 @@
     "react-bootstrap": "^0.32.1",
     "react-hot-loader": "^3.1.3",
     "react-router-bootstrap": "^0.24.4",
+    "redux": "^4.0.0-beta.2",
     "redux-immutable-state-invariant": "^2.1.0",
     "rimraf": "2.5.4",
     "sass-loader": "^6.0.6",
     "source-map-loader": "^0.2.3",
     "style-loader": "0.13.1",
+    "typesafe-actions": "^1.1.2",
     "typescript": "^2.7.2",
+    "utility-types": "^1.0.0",
     "webpack": "^3.0.0",
     "webpack-dev-middleware": "1.11.0",
     "webpack-hot-middleware": "2.18.2",

src/api/authorApi.ts

@@ -0,0 +1,17 @@
+import { get } from './fetchHttp'
+import { IAuthor, ICourse } from  '../redux'
+import courseApi from './courseApi'
+
+
+class AuthorApi {
+  getAllAuthors() : Promise<IAuthor[]> {
+    return courseApi.getAllCourses().then((courses: ICourse[]) => {
+      let allAuthorEntries = courses.map(course => course.authorId)
+
+      let uniqueAuthors = Array.from(new Set(allAuthorEntries))
+      return uniqueAuthors.map((author) => ({id: author}))
+    })
+  }
+}
+
+export default new AuthorApi()

src/api/baseUrl.js → src/api/baseUrl.ts

@@ -1,12 +1,12 @@
-export default function getBaseUrl() {
+export default function getBaseUrl(): string {
   return 'http://localhost:3001/'
   // return getQueryStringParameterByName('useMockApi')
   //   ? 'http://localhost:3001/'
   //   : '/'
 }
 
 // This should really be done with a tested and maintained framework
-// function getQueryStringParameterByName(name, url) {
+// function getQueryStringParameterByName(name: string, url: string): string {
 //   if (!url) url = window.location.href
 
 //   name = name.replace(/[\[\]]/g, "\\$&")

src/api/courseApi.ts

@@ -0,0 +1,15 @@
+import { get, post } from './fetchHttp'
+import { ICourse } from '../redux'
+
+class CourseApi {
+  getAllCourses(): Promise<ICourse[]> {
+    return get('courses')
+  }
+
+  saveCourse(course: ICourse): Promise<any> {
+    console.log("Saved course: ", course)
+    return post('courses', course)
+  }
+}
+
+export default new CourseApi()

src/api/fetchHttp.js → src/api/fetchHttp.ts

@@ -14,17 +14,17 @@ import getBaseUrl from './baseUrl'
 
 const baseUrl = getBaseUrl()
 
-export function get(url) {
+export function get(url: string) {
   return fetch(baseUrl + url).then(onSuccess, onError);
 }
 
-export function del(url) {
+export function del(url: string) {
   return fetch(baseUrl + url, {
     method: 'DELETE',
   }).then(onSuccess, onError)
 }
 
-export function post(url, body) {
+export function post(url: string, body: any) {
   // Default options are marked with *
   return fetch(baseUrl + url, {
     body: JSON.stringify(body),  // must match 'Content-Type' header
@@ -41,10 +41,10 @@ export function post(url, body) {
   .then(onSuccess, onError)
 }
 
-function onSuccess(response) {
+function onSuccess(response: Response) {
   return response.json();
 }
 
-function onError(error) {
+function onError(error: any) {
   console.log(chalk.red(error), error); // eslint-disable-line no-console
 }

src/components/courses/CourseForm.js

@@ -4,7 +4,6 @@ import TextField from 'material-ui/TextField'
 import SelectField from 'material-ui/SelectField';
 import MenuItem from 'material-ui/MenuItem';
 import cs from 'classnames'
-import chalk from 'chalk'
 
 import s from './CourseForm.scss'
 
@@ -25,7 +24,7 @@ const CourseForm = ({
         value={course.title}
         onChange={onChangeText}
         errorText={getErrorField(errors, 'title')}
-        fullWidth={true}
+        fullWidth
         />
 
       <SelectField
@@ -35,14 +34,14 @@ const CourseForm = ({
         options={allAuthors}
         onChange={onChangeAuthor}
         errorText={getErrorField(errors, 'authorId')}
-        fullWidth={true}
+        fullWidth
         >
 
         <MenuItem
           value={0}
           primaryText="Select an author" />
 
-        {allAuthors.map((author, index) =>
+        {allAuthors.map(author =>
           <MenuItem
             key={author.id}
             value={author.id}
@@ -57,7 +56,7 @@ const CourseForm = ({
         value={course.category}
         onChange={onChangeText}
         errorText={getErrorField(errors, 'category')}
-        fullWidth={true}
+        fullWidth
         />
 
       <TextField
@@ -66,7 +65,7 @@ const CourseForm = ({
         value={course.length}
         onChange={onChangeText}
         errorText={getErrorField(errors, 'length')}
-        fullWidth={true}
+        fullWidth
         />
 
       <input

src/components/courses/CoursesPage.js

@@ -4,7 +4,7 @@ import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
 import { Route, Switch } from 'react-router-dom'
 
-import * as courseActions from '../../actions/courseActions'
+import * as courseActions from '../../redux'
 import CourseList from './CourseList'
 import ManageCoursePage from './ManageCoursePage'
 
@@ -44,14 +44,14 @@ class CoursesPage extends Component {
           exact path={`${match.path}/:courseId`}
           component={ManageCoursePage} />
       </Switch>
-
      )
   }
 }
 
 CoursesPage.propTypes = {
   courses: PropTypes.array.isRequired,
   match: PropTypes.object.isRequired, // Supplied by react router
+  history: PropTypes.object.isRequired, // Supplied by react router
 }
 
 function mapStateToProps(state) {

src/components/courses/ManageCoursePage.js

@@ -3,7 +3,7 @@ import { connect } from 'react-redux'
 import { PropTypes } from 'prop-types'
 import { bindActionCreators } from 'redux'
 
-import * as courseActions from '../../actions/courseActions'
+import * as courseActions from '../../redux'
 import CourseForm from './CourseForm'
 
 class ManageCoursePage extends Component {