add state for selected course

fixes CNVS-31156

Test Plan:
- Click find appointment button
- Select a course and click submit
- Click close

Change-Id: I92efbd9db093f58c326e5afadb37735c89f625a0
Reviewed-on: https://gerrit.instructure.com/89388
Reviewed-by: Clay Diffrient <cdiffrient@instructure.com>
Tested-by: Jenkins
QA-Review: Heath Hales <hhales@instructure.com>
Product-Review: Steven Burnett <sburnett@instructure.com>

app/jsx/calendar/scheduler/actions.jsx

@@ -5,11 +5,13 @@ define([
   const { createAction } = ReduxActions;
 
   const keys = {
-    SET_FIND_APPOINTMENT_MODE: 'SET_FIND_APPOINTMENT_MODE'
+    SET_FIND_APPOINTMENT_MODE: 'SET_FIND_APPOINTMENT_MODE',
+    SET_COURSE: 'SET_COURSE'
   }
 
   const actions = {
-    setFindAppointmentMode: createAction(keys.SET_FIND_APPOINTMENT_MODE)
+    setFindAppointmentMode: createAction(keys.SET_FIND_APPOINTMENT_MODE),
+    setCourse: createAction(keys.SET_COURSE)
   };
 
   return {

app/jsx/calendar/scheduler/components/FindAppointment.jsx

@@ -13,17 +13,28 @@ define([
 
     constructor (props) {
       super(props)
-      this.state = { isModalOpen: false }
+      this.state = {
+        isModalOpen: false,
+        selectedCourse: {}
+      }
       this.openModal = this.openModal.bind(this)
       this.closeModal = this.closeModal.bind(this)
       this.handleSubmit = this.handleSubmit.bind(this)
       this.endAppointmentMode = this.endAppointmentMode.bind(this)
+      this.selectCourse = this.selectCourse.bind(this)
     }
 
     handleSubmit () {
       this.props.store.dispatch(Actions.actions.setFindAppointmentMode(!this.props.store.getState().inFindAppointmentMode))
+      this.props.store.dispatch(Actions.actions.setCourse(this.state.selectedCourse))
       this.setState ({
         isModalOpen: false,
+        selectedCourse: {}
+      })
+    }
+    selectCourse (e) {
+      this.setState({
+        selectedCourse: this.props.courses.find((c) => c.id === e.target.value)
       })
     }
     openModal () {
@@ -33,7 +44,6 @@ define([
     }
     endAppointmentMode () {
       this.props.store.dispatch(Actions.actions.setFindAppointmentMode(false))
-      // Probably should set the state here to close the grey view thing.
       this.setState({
         isModalOpen: false,
       })
@@ -75,7 +85,7 @@ define([
             </div>
             <div className="ReactModal__Body">
               <div className="ic-Form-control">
-                <select className="ic-Input">
+                <select onChange={this.selectCourse} value={this.state.selectedCourse.id} className="ic-Input">
                   {this.props.courses.map((c, index) => {
                     if (c.asset_string.indexOf("user") === -1) {
                       return(<option key={c.id} value={c.id}>{c.name}</option>)

app/jsx/calendar/scheduler/reducer.jsx

@@ -1,15 +1,23 @@
 define([
   'redux-actions',
-  './actions'
+  './actions',
-], (ReduxActions, SchedulerActions) => {
+  './store/initialState'
+], (ReduxActions, SchedulerActions, initialState) => {
 
   const { handleActions } = ReduxActions;
 
   const reducer = handleActions({
-    [SchedulerActions.keys.SET_FIND_APPOINTMENT_MODE]: (state, action) => {
+    [SchedulerActions.keys.SET_FIND_APPOINTMENT_MODE]: (state = initialState, action) => {
       return {
+        ...state,
         inFindAppointmentMode: action.payload
       }
+    },
+    [SchedulerActions.keys.SET_COURSE]: (state = initialState, action) => {
+      return {
+        ...state,
+        selectedCourse: action.payload
+      }
     }
   });
 

app/jsx/calendar/scheduler/store/initialState.jsx

@@ -1,7 +1,8 @@
 define([], () => {
 
   const initialState = {
-    inFindAppointmentMode: false
+    inFindAppointmentMode: false,
+    selectedCourse: {}
   };
 
 

spec/javascripts/jsx/calendar/scheduler/actionsSpec.jsx

@@ -12,6 +12,16 @@ define([
     };
 
     deepEqual(actual, expected);
-  });
+  })
 
-});
+  test('setCourse returns the proper action', () => {
+    const actual = Actions.actions.setCourse({id: 4, name:'blah'});
+    const expected = {
+      type: 'SET_COURSE',
+      payload: {id: 4, name:'blah'}
+    };
+
+    deepEqual(actual, expected)
+  })
+
+})

spec/javascripts/jsx/calendar/scheduler/reducerSpec.jsx

@@ -7,15 +7,30 @@ define([
   test('sets inFindAppointmentMode on SET_FIND_APPOINTMENT_MODE', () => {
 
     const initialState = {
-      inFindAppointmentMode: false
+      inFindAppointmentMode: false,
-    };
+      setCourse: {}
+    }
 
     const newState = reducer(initialState, {
       type: 'SET_FIND_APPOINTMENT_MODE',
       payload: true
-    });
+    })
 
     ok(newState.inFindAppointmentMode)
-  });
+  })
 
-});
+  test('sets selectedCourse on SET_COURSE', () => {
+
+    const initialState = {
+      inFindAppointmentMode: false,
+      selectedCourse : null
+    }
+
+    const newState = reducer(initialState, {
+      type: 'SET_COURSE',
+      payload: {id: 1, name: "blah"}
+    })
+
+    ok(newState.selectedCourse)
+  })
+})