Use actions to change program mode

The application currently has 3 modes:

* Viewing a school detail
* Adding a school program
* Editing a school program

Try to make this state live at the top level (in SchoolStore)
and passed down as props instead of living in a downstream view.

Change the state using actions.

This seems like a more Fluxy way to do it, and is ultimately
easier for me to reason about.

All of this was changes that I noticed should be made on the way
to reseting back to showing a school detail when a new school is
selected.

Addresses #41

js/src/actions/LearningCollaborativeActions.js

@@ -18,6 +18,29 @@ const LearningCollaborativeActions = {
     });
   },
 
+  showSchoolDetail: function(school, zoomToMarker=false) {
+    AppDispatcher.handleViewAction({
+      actionType: LearningCollaborativeConstants.SHOW_SCHOOL_DETAIL,
+      school: school,
+      zoomToMarker: zoomToMarker
+    });
+  },
+
+  showAddProgramForm: function(school) {
+    AppDispatcher.handleViewAction({
+      actionType: LearningCollaborativeConstants.SHOW_ADD_PROGRAM_FORM,
+      school: school
+    });
+  },
+
+  showEditProgramForm: function(school, program) {
+    AppDispatcher.handleViewAction({
+      actionType: LearningCollaborativeConstants.SHOW_EDIT_PROGRAM_FORM,
+      school: school,
+      program: program
+    });
+  },
+
   createProgram: function(school, agency, ageGroup, programType, dates, notes) {
     AppDispatcher.handleViewAction({
       actionType: LearningCollaborativeConstants.CREATE_PROGRAM,

js/src/components/LearningCollaborativeMap.js

@@ -3,6 +3,7 @@ import L from 'leaflet';
 import React from 'react';
 
 import LearningCollaborativeActions from '../actions/LearningCollaborativeActions';
+import LearningCollaborativeConstants from '../constants/LearningCollaborativeConstants';
 import SchoolStore from '../stores/SchoolStore';
 import AgencyStore from '../stores/AgencyStore';
 
@@ -59,7 +60,9 @@ const LearningCollaborativeMap = React.createClass({
     return (
       <div className="app-container">
         <div ref="mapContainer" className="map-container"></div>
-        <MapDrawer school={this.state.selectedSchool}
+        <MapDrawer mode={this.state.mode}
+                   school={this.state.selectedSchool}
+                   program={this.state.selectedProgram}
                    engine={SchoolStore.getEngine()}
                    handleSelectSchool={this._handleSelectSchool}
                    agencies={this.state.agencies}
@@ -77,6 +80,7 @@ const LearningCollaborativeMap = React.createClass({
     SchoolStore.addReceiveProgramListener(this._onReceiveProgram);
     SchoolStore.addReceiveProgramNoteListener(this._onReceiveProgramNote);
     AgencyStore.addChangeListener(this._onChange);
+    SchoolStore.addChangeModeListener(this._onChangeMode);
 
     this.setState({
       map: this._initializeMap()
@@ -88,6 +92,7 @@ const LearningCollaborativeMap = React.createClass({
     SchoolStore.removeReceiveProgramListener(this._onReceiveProgram);
     SchoolStore.removeReceiveProgramNoteListener(this._onReceiveProgramNote);
     AgencyStore.removeChangeListener(this._onChange);
+    SchoolStore.removeChangeModeListener(this._onChangeMode);
   },
 
   componentDidUpdate: function(prevProps, prevState) {
@@ -103,7 +108,7 @@ const LearningCollaborativeMap = React.createClass({
         marker.setStyle(this._styleSchoolMarker(this.state.selectedSchool));
       }
 
-      if (this.state.schoolSelectMethod == 'search') {
+      if (this.state.zoomToMarker) {
         let center = new L.LatLng(
           this.state.selectedSchool.geometry.coordinates[1],
           this.state.selectedSchool.geometry.coordinates[0]
@@ -214,9 +219,7 @@ const LearningCollaborativeMap = React.createClass({
       else {
         school.properties.programs.push(program);
       }
-      this.setState({
-        selectedSchool: school
-      });
+      LearningCollaborativeActions.showSchoolDetail(school);
     }
   },
 
@@ -251,17 +254,31 @@ const LearningCollaborativeMap = React.createClass({
   },
 
   _handleClickSchoolMarker: function(school) {
-    this.setState({
-      selectedSchool: school,
-      schoolSelectMethod: 'click'
-    });
+    LearningCollaborativeActions.showSchoolDetail(school, false);
   },
 
   _handleSelectSchool: function(school) {
-    this.setState({
-      selectedSchool: school,
-      schoolSelectMethod: 'search'
-    });
+    LearningCollaborativeActions.showSchoolDetail(school, true);
+  },
+
+  _onChangeMode: function(mode, props) {
+    let newState = {
+      mode: mode
+    };
+    switch(mode) {
+      case LearningCollaborativeConstants.SCHOOL_DETAIL_MODE:
+        newState.selectedSchool = SchoolStore.getSelectedSchool();
+        newState.zoomToMarker = props.zoomToMarker;
+        break;
+      case LearningCollaborativeConstants.ADD_PROGRAM_MODE:
+        newState.selectedSchool = SchoolStore.getSelectedSchool();
+        break;
+      case LearningCollaborativeConstants.EDIT_PROGRAM_MODE:
+        newState.selectedSchool = SchoolStore.getSelectedSchool();
+        newState.selectedProgram = SchoolStore.getSelectedProgram();
+        break;
+    }
+    this.setState(newState);
   }
 });
 

js/src/components/MapDrawer.js

@@ -9,7 +9,9 @@ const MapDrawer = React.createClass({
     return (
       <div className="map-drawer">
         <SchoolSearch engine={this.props.engine} handleSelectSchool={this.props.handleSelectSchool} />
-        <SchoolDetail school={this.props.school}
+        <SchoolDetail mode={this.props.mode}
+                      school={this.props.school}
+                      program={this.props.program}
                       agencies={this.props.agencies}
                       agencyLookup={this.props.agencyLookup}
                       programTypes={this.props.programTypes}

js/src/components/ProgramForm.js

@@ -88,7 +88,6 @@ const ProgramForm = React.createClass({
   },
 
   handleChangeProgramType: function(programType) {
-    console.log(programType);
     this.setState({
       programType: programType
     });

js/src/components/SchoolDetail.js

@@ -1,17 +1,12 @@
 import React from 'react';
 
+import LearningCollaborativeActions from '../actions/LearningCollaborativeActions';
+import LearningCollaborativeConstants from '../constants/LearningCollaborativeConstants';
 import ProgramForm from './ProgramForm';
 import SchoolPrograms from './SchoolPrograms';
 import {agencyIdFromUrl} from "../utils";
 
 const SchoolDetail = React.createClass({
-  getInitialState: function() {
-    return {
-      addingProgram: false,
-      editingProgram: false
-    };
-  },
-
   render: function() {
     if (!this.props.school) {
       return false;
@@ -23,7 +18,7 @@ const SchoolDetail = React.createClass({
     let editProgram = false;
     let schoolPrograms = false;
 
-    if (this.state.addingProgram) {
+    if (this.props.mode == LearningCollaborativeConstants.ADD_PROGRAM_MODE) {
       createProgram = <ProgramForm school={this.props.school}
                          agencies={this.props.agencies}
                          agencyLookup={this.props.agencyLookup}
@@ -32,22 +27,22 @@ const SchoolDetail = React.createClass({
                          handleCancel={this._handleCancelCreateProgram}
                          submitLabel="Add Program" />;
     }
-    else if (this.state.editingProgram) {
-      let agencyId = agencyIdFromUrl(this.state.program.agency);
+    else if (this.props.mode == LearningCollaborativeConstants.EDIT_PROGRAM_MODE) {
+      let agencyId = agencyIdFromUrl(this.props.program.agency);
       let initialNotes;
 
-      if (this.state.program.notes && this.state.program.notes.length) {
-        initialNotes = this.state.program.notes[0].text;  
+      if (this.props.program.notes && this.props.program.notes.length) {
+        initialNotes = this.props.program.notes[0].text;  
       }
 
       editProgram = <ProgramForm school={this.props.school}
                                  agencies={this.props.agencies}
                                  agencyLookup={this.props.agencyLookup}
                                  programTypes={this.props.programTypes}
                                  initialAgency={this.props.agencyLookup[agencyId]}
-                                 initialAgeGroup={this.state.program.age_group}
-                                 initialProgramType={this.state.program.program_type}
-                                 initialDates={this.state.program.dates}
+                                 initialAgeGroup={this.props.program.age_group}
+                                 initialProgramType={this.props.program.program_type}
+                                 initialDates={this.props.program.dates}
                                  initialNotes={initialNotes}
                                  handleSubmit={this._handleUpdateProgram}
                                  handleCancel={this._handleCancelEditProgram}
@@ -73,47 +68,33 @@ const SchoolDetail = React.createClass({
 
   _handleClickAddProgram: function(evt) {
     evt.preventDefault();
-    this.setState({
-      addingProgram: true
-    });
+    LearningCollaborativeActions.showAddProgramForm(this.props.school);
   },
 
   _handleEditProgram: function(program) {
-    this.setState({
-      editingProgram: true,
-      program: program
-    });
+    LearningCollaborativeActions.showEditProgramForm(this.props.school, program);
   },
 
   _handleUpdateProgram: function(school, agency, ageGroup, programType, dates, notes) {
     this.props.updateProgram(
       school,
-      this.state.program,
+      this.props.program,
       agency,
       ageGroup,
       programType,
       dates,
       notes
     );
-    this.setState({
-      editingProgram: false,
-      program: undefined
-    });
   },
 
   _handleCancelEditProgram: function(evt) {
     evt.preventDefault();
-    this.setState({
-      editingProgram: false,
-      program: undefined
-    });
+    LearningCollaborativeActions.showSchoolDetail(this.props.school);
   },
 
   _handleCancelCreateProgram: function(evt) {
     evt.preventDefault();
-    this.setState({
-      addingProgram: false
-    });
+    LearningCollaborativeActions.showSchoolDetail(this.props.school);
   },
 
   _handleCreateProgram: function(school, agency, ageGroup, programType, dates, notes) {
@@ -125,9 +106,6 @@ const SchoolDetail = React.createClass({
       dates,
       notes
     );
-    this.setState({
-      addingProgram: false
-    });
   }
 });
 

js/src/constants/LearningCollaborativeConstants.js

@@ -5,5 +5,12 @@ export default keyMirror({
   AGENCIES_SET: null,
   CREATE_PROGRAM: null,
   RECEIVE_PROGRAM: null,
-  RECEIVE_PROGRAM_NOTE: null
+  RECEIVE_PROGRAM_NOTE: null,
+  VIEW_SCHOOL_DETAIL_MODE: null,
+  SHOW_SCHOOL_DETAIL: null,
+  SHOW_ADD_PROGRAM_FORM: null,
+  SHOW_EDIT_PROGRAM_FORM: null,
+  SCHOOL_DETAIL_MODE: null,
+  ADD_PROGRAM_MODE: null,
+  EDIT_PROGRAM_MODE: null
 });

js/src/stores/SchoolStore.js

@@ -8,6 +8,7 @@ import LearningCollaborativeConstants from '../constants/LearningCollaborativeCo
 const CHANGE_EVENT = 'change';
 const RECEIVE_PROGRAM_EVENT = 'receive:program';
 const RECEIVE_PROGRAM_NOTE_EVENT = 'receive:programNote';
+const CHANGE_MODE_EVENT = 'change:mode';
 
 let _schools = []; // Collection of school items
 let _schoolLookup = {};
@@ -20,7 +21,7 @@ let _programTypes = [
   'Sexual Violence/Exploitation'
 ];
 
-let _engine;
+let _engine, _mode, _selectedSchool, _selectedProgram;
 
 let SchoolStore = assign({}, EventEmitter.prototype, {
   getAll: function() {
@@ -35,6 +36,14 @@ let SchoolStore = assign({}, EventEmitter.prototype, {
     return _programTypes;
   },
 
+  getSelectedSchool: function() {
+    return _selectedSchool;
+  },
+
+  getSelectedProgram: function() {
+    return _selectedProgram;
+  },
+
   emitChange: function() {
     this.emit(CHANGE_EVENT);
   },
@@ -71,6 +80,18 @@ let SchoolStore = assign({}, EventEmitter.prototype, {
     this.removeListener(RECEIVE_PROGRAM_NOTE_EVENT, callback);
   },
 
+  emitChangeMode: function(mode, props) {
+    this.emit(CHANGE_MODE_EVENT, mode, props);
+  },
+
+  addChangeModeListener: function(callback) {
+    this.on(CHANGE_MODE_EVENT, callback);
+  },
+
+  removeChangeModeListener: function(callback) {
+    this.removeListener(CHANGE_MODE_EVENT, callback);
+  },
+
   dispatcherIndex: AppDispatcher.register(function(payload) {
     let action = payload.action;
 
@@ -95,6 +116,21 @@ let SchoolStore = assign({}, EventEmitter.prototype, {
       case LearningCollaborativeConstants.RECEIVE_PROGRAM_NOTE:
         SchoolStore.emitReceiveProgramNote(action.program, action.note, action.method);
         break;
+      case LearningCollaborativeConstants.SHOW_SCHOOL_DETAIL:
+        _selectedSchool = action.school;
+        SchoolStore.emitChangeMode(LearningCollaborativeConstants.SCHOOL_DETAIL_MODE, {
+          zoomToMarker: action.zoomToMarker
+        });
+        break;
+      case LearningCollaborativeConstants.SHOW_ADD_PROGRAM_FORM:
+        _selectedSchool = action.school;
+        SchoolStore.emitChangeMode(LearningCollaborativeConstants.ADD_PROGRAM_MODE);
+        break;
+      case LearningCollaborativeConstants.SHOW_EDIT_PROGRAM_FORM:
+        _selectedSchool = action.school;
+        _selectedProgram = action.program;
+        SchoolStore.emitChangeMode(LearningCollaborativeConstants.EDIT_PROGRAM_MODE);
+        break;
     }
 
     return true;