Some comments and pretter

- I'm basically learning redux my commenting my way through
and refactoring some things a bit (stateless functions anyone?)

schedules_web/src/actions/schedule/schedule.action-types.ts

 export const ADD_SECTION = '[Schedule] ADD_SECTION';
-export const REMOVE_SECTION = '[Schedule] REMOVE_SECTION';
\ No newline at end of file
+export const REMOVE_SECTION = '[Schedule] REMOVE_SECTION';

schedules_web/src/actions/schedule/schedule.actions.ts

-import { ADD_SECTION, REMOVE_SECTION } from "./schedule.action-types";
-import { Section } from "../../ts/section";
+import { Section } from '../../ts/section';
+import { ADD_SECTION, REMOVE_SECTION } from './schedule.action-types';
 
 export interface ScheduleAction {
     type: string;
@@ -9,13 +9,13 @@ export interface ScheduleAction {
 export const addSection = (section: Section): ScheduleAction => {
     return {
         type: ADD_SECTION,
-        section: section
+        section: section,
     };
-}
+};
 
 export const removeSection = (section: Section): ScheduleAction => {
     return {
         type: REMOVE_SECTION,
-        section: section
+        section: section,
     };
-}
\ No newline at end of file
+};

schedules_web/src/actions/search/search.action-types.ts

-export const SET_SEARCH_SECTIONS = '[Search] SET_SECTIONS';
\ No newline at end of file
+export const SET_SEARCH_SECTIONS = '[Search] SET_SECTIONS';

schedules_web/src/actions/search/search.actions.ts

-import { SET_SEARCH_SECTIONS } from './search.action-types';
 import { Section } from '../../ts/section';
+import { SET_SEARCH_SECTIONS } from './search.action-types';
 
 export interface SearchAction {
     type: string;
@@ -24,6 +24,6 @@ export const searchSections = (crn: string) => async (dispatch: any) => {
 
     dispatch({
         type: SET_SEARCH_SECTIONS,
-        sections: [section]
+        sections: [section],
     });
-}
\ No newline at end of file
+};

schedules_web/src/components/SectionList.tsx

@@ -10,7 +10,6 @@ interface Props {
 export default class SectionList extends React.Component<Props, any> {
     constructor(props: Props) {
         super(props);
-        this.state = {};
     }
 
     render() {

schedules_web/src/containers/App.tsx

 import * as React from 'react';
+import { connect } from 'react-redux';
+import { removeSection } from '../actions/schedule/schedule.actions';
+import SectionList from '../components/SectionList';
+import { State } from '../reducers';
 import { Section } from '../ts/section';
 import { downloadCalendar, ENDPOINTS, postData } from '../ts/utilities';
 import Search from './Search';
-import SectionList from '../components/SectionList';
-import { connect } from 'react-redux';
-import {State} from '../reducers';
-import { removeSection } from '../actions/schedule/schedule.actions';
 
 interface AppProps {
     schedule: Section[];
@@ -20,7 +20,13 @@ class App extends React.Component<AppProps> {
     render() {
         return (
             <div>
-                <h1>Schedules</h1>
+                <h1 className="display-3">
+                    <span className="fa-stack mr-3">
+                        <i className="fas fa-circle fa-stack-2x" />
+                        <i className="fas fa-flag fa-stack-1x fa-inverse" />
+                    </span>
+                    Schedules
+                </h1>
                 <h2>Search</h2>
                 <Search />
                 <h2>Your schedule</h2>
@@ -44,10 +50,18 @@ class App extends React.Component<AppProps> {
     };
 }
 
+/**
+ * Take the current schedule in the store and map it to the <App /> component.
+ * @param state The current Redux store state.
+ */
 const mapStateToProps = (state: State) => ({
-    schedule: state.schedule
+    schedule: state.schedule,
 });
 
-export default connect(mapStateToProps, {
-    removeSection
-})(App);
\ No newline at end of file
+/**
+ * Ensure that the Redux state is passed into the component.
+ */
+export default connect(
+    mapStateToProps,
+    { removeSection }
+)(App);

schedules_web/src/containers/Search.tsx

 import * as React from 'react';
-import { Section } from '../ts/section';
+import { connect } from 'react-redux';
+import { addSection } from '../actions/schedule/schedule.actions';
+import { searchSections } from '../actions/search/search.actions';
 import SearchBar from '../components/SearchBar';
 import SectionList from '../components/SectionList';
-import { connect } from 'react-redux';
 import { State } from '../reducers';
-import { searchSections } from '../actions/search/search.actions';
-import { addSection } from '../actions/schedule/schedule.actions';
+import { Section } from '../ts/section';
 
 interface SearchProps {
     searchedSections: Section[];
@@ -33,10 +33,10 @@ class Search extends React.Component<SearchProps> {
 }
 
 const mapStateToProps = (state: State) => ({
-    searchedSections: state.search.searchedSections
+    searchedSections: state.search.searchedSections,
 });
 
-export default connect(mapStateToProps, {
-    searchSections,
-    addSection
-})(Search);
\ No newline at end of file
+export default connect(
+    mapStateToProps,
+    { searchSections, addSection }
+)(Search);

schedules_web/src/index.tsx

+/**
+ * index.tsx
+ *
+ * The entry point for the application. Apply global styling, configure high
+ * level (global application) settings and render <App />. Simple.
+ */
+
+// Apply Global Masonstrap styling
 import 'masonstrap/build/css/masonstrap.min.css';
 import 'masonstrap/build/js/masonstrap.min.js';
-import {applyMiddleware, compose, createStore} from 'redux';
-import ReduxThunk from 'redux-thunk';
-import {Provider} from 'react-redux';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
+import { Provider } from 'react-redux';
+import { applyMiddleware, compose, createStore } from 'redux';
+import ReduxThunk from 'redux-thunk';
 import App from './containers/App';
-import { reducers } from './reducers';
+import { allReducers } from './reducers';
 
 declare global {
     interface Window {
         __REDUX_DEVTOOLS_EXTENSION__?: () => any;
     }
 }
-
 const extension = window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__();
 const isProduction = process.env.NODE_ENV === 'production';
 
-let enhance;
+let addOns;
 if (isProduction || !extension) {
-    enhance = compose(applyMiddleware(ReduxThunk));
+    addOns = compose(applyMiddleware(ReduxThunk));
 } else {
-    enhance = compose(applyMiddleware(ReduxThunk), extension);
+    addOns = compose(
+        applyMiddleware(ReduxThunk),
+        extension
+    );
 }
 
-const store = createStore(reducers, enhance);
+const store = createStore(allReducers, addOns);
 
 ReactDOM.render(
     <Provider store={store}>
         <App />
-    </Provider>, document.getElementById('root'));
\ No newline at end of file
+    </Provider>,
+    document.getElementById('root')
+);

schedules_web/src/reducers/index.ts

@@ -2,18 +2,21 @@ import { schedule, ScheduleState } from './schedule.reducer';
 import { search, SearchState } from './search.reducer';
 
 export interface State {
-    schedule: ScheduleState
-    search: SearchState
+    schedule: ScheduleState;
+    search: SearchState;
 }
 
+/**
+ * If there is no current state passed in then initialize as nothing.
+ */
 const defaultState: State = {
     schedule: [],
     search: {
-        searchedSections: []
-    }
+        searchedSections: [],
+    },
 };
 
-export const reducers = (state: State = defaultState, action: any) => ({
+export const allReducers = (state: State = defaultState, action: any) => ({
     schedule: schedule(state.schedule, action),
-    search: search(state.search, action)
-})
\ No newline at end of file
+    search: search(state.search, action),
+});

schedules_web/src/reducers/schedule.reducer.ts

-import { Section } from '../ts/section';
 import { ADD_SECTION, REMOVE_SECTION } from '../actions/schedule/schedule.action-types';
 import { ScheduleAction } from '../actions/schedule/schedule.actions';
+import { Section } from '../ts/section';
 
 export type ScheduleState = Section[];
 
 export const schedule = (state: ScheduleState = [], action: ScheduleAction) => {
     switch (action.type) {
         case ADD_SECTION:
-            return state.findIndex(s => s.crn === action.section.crn) === -1 ?
-                [...state, action.section] :
-                state;
+            return state.findIndex(s => s.crn === action.section.crn) === -1 ? [...state, action.section] : state;
         case REMOVE_SECTION:
             return state.filter(s => s.crn !== action.section.crn);
         default:
             return state;
     }
-};
\ No newline at end of file
+};

schedules_web/src/reducers/search.reducer.ts

+import { SET_SEARCH_SECTIONS } from '../actions/search/search.action-types';
 import { SearchAction } from './../actions/search/search.actions';
 import { Section } from './../ts/section';
-import { SET_SEARCH_SECTIONS } from '../actions/search/search.action-types';
 
 export interface SearchState {
     searchedSections: Section[];
 }
 
-export const search = (state: SearchState = {searchedSections: []}, action: SearchAction) => {
+export const search = (state: SearchState = { searchedSections: [] }, action: SearchAction) => {
     switch (action.type) {
         case SET_SEARCH_SECTIONS:
             return Object.assign({}, state, {
-                searchedSections: [...action.sections]
+                searchedSections: [...action.sections],
             });
         default:
             return state;
     }
-}
\ No newline at end of file
+};