Add onCheckboxChange and react gardening

Signed-off-by: Thomas Shawarma Haddad <thomas.haddad@af83.com>

5 files changed, 103 insertions, 34 deletions

diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/actions/index.js b/app/assets/javascripts/es6_browserified/journey_patterns/actions/index.js
index ec9df63f2..2f8c9810e 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/actions/index.js
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/actions/index.js
@@ -19,6 +19,13 @@ const actions = {
     currentPage,
     nextPage : true
   }),
+  updateCheckboxValue : (e, index) => {
+    return {
+      type : 'UPDATE_CHECKBOX_VALUE',
+      id : e.currentTarget.id,
+      index
+    }
+  },
   fetchJourneyPatterns : (dispatch, currentPage, nextPage) => {
     if(currentPage == undefined){
       currentPage = 1
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/components/JourneyPattern.js b/app/assets/javascripts/es6_browserified/journey_patterns/components/JourneyPattern.js
index f1281fecd..82624fee9 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/components/JourneyPattern.js
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/components/JourneyPattern.js
@@ -11,15 +11,17 @@ const JourneyPattern = (props) => {
 
       <p className='small'><strong>Stop points: </strong></p>
       <ul className='list-group'>
-        {props.value.stop_points.map((stopPoint, index) =>
+        {props.value.stop_points.map((stopPoint, i) =>
           <li
-            key={ index }
+            key={ i }
             className='list-group-item clearfix'
           >
             <span className='label label-default' style={{marginRight: 5}}>{stopPoint.id}</span>
             <span>{stopPoint.name}</span>
             <span className='pull-right'>
-              <input type='checkbox' id={stopPoint.id} checked={stopPoint.checked}></input>
+              <input
+              onClick = {(e) => props.onCheckboxChange(e)}
+              type='checkbox' id={stopPoint.id} defaultChecked={stopPoint.checked}></input>
             </span>
           </li>
         )}
@@ -30,7 +32,8 @@ const JourneyPattern = (props) => {
 
 JourneyPattern.propTypes = {
   value: PropTypes.object,
-  index: PropTypes.number
+  index: PropTypes.number,
+  onCheckboxChange: PropTypes.func.isRequired
 }
 
 module.exports = JourneyPattern
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/components/JourneyPatterns.js b/app/assets/javascripts/es6_browserified/journey_patterns/components/JourneyPatterns.js
new file mode 100644
index 000000000..4fd215e4a
--- /dev/null
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/components/JourneyPatterns.js
@@ -0,0 +1,54 @@
+var Component = require('react').Component
+var React = require('react')
+var PropTypes = require('react').PropTypes
+var JourneyPattern = require('./JourneyPattern')
+
+
+// const JourneyPatterns = ({journeyPatterns, onLoadFirstPage, onCheckboxChange}) => {
+//   {onLoadFirstPage()}
+//   return (
+//     <div className='list-group'>
+//       {journeyPatterns.map((journeyPattern, index) =>
+//         <JourneyPattern
+//           value={ journeyPattern }
+//           key={ index }
+//           onLoadFirstPage= {onLoadFirstPage()}
+//           onCheckboxChange= {onCheckboxChange(index)}
+//         />
+//       )}
+//     </div>
+//   )
+// }
+
+class JourneyPatterns extends Component{
+
+  constructor(props){
+    super(props)
+  }
+
+  componentDidMount() {
+    this.props.onLoadFirstPage()
+  }
+
+  render() {
+    return (
+      <div className='list-group'>
+        {this.props.journeyPatterns.map((journeyPattern, index) =>
+          <JourneyPattern
+            value={ journeyPattern }
+            key={ index }
+            onCheckboxChange= {(e) => this.props.onCheckboxChange(e, index)}
+          />
+        )}
+      </div>
+    )
+  }
+}
+
+JourneyPatterns.propTypes = {
+  journeyPatterns: PropTypes.array.isRequired,
+  onCheckboxChange: PropTypes.func.isRequired,
+  onLoadFirstPage: PropTypes.func.isRequired
+}
+
+module.exports = JourneyPatterns
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/containers/JourneyPatternList.js b/app/assets/javascripts/es6_browserified/journey_patterns/containers/JourneyPatternList.js
index 7a5075e35..297c8583a 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/containers/JourneyPatternList.js
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/containers/JourneyPatternList.js
@@ -3,32 +3,7 @@ var Component = require('react').Component
 var PropTypes = require('react').PropTypes
 var actions = require('../actions')
 var connect = require('react-redux').connect
-var JourneyPattern = require('../components/JourneyPattern')
-
-class JourneyPatternList extends Component{
-  constructor(props) {
-    super(props)
-  }
-
-  componentDidMount() {
-    const dispatch = this.props.dispatch
-    const journeyPatterns = this.props.journeyPatterns
-    dispatch(actions.loadFirstPage(dispatch))
-  }
-
-  render() {
-    return (
-      <div className='list-group'>
-        {this.props.journeyPatterns.map((journeyPattern, index) =>
-          <JourneyPattern
-            value={ journeyPattern }
-            key={ index }
-          />
-        )}
-      </div>
-    )
-  }
-}
+var JourneyPatterns = require('../components/JourneyPatterns')
 
 const mapStateToProps = (state) => {
   return {
@@ -36,11 +11,17 @@ const mapStateToProps = (state) => {
   }
 }
 
-JourneyPatternList.propTypes = {
-  dispatch: PropTypes.func.isRequired,
-  journeyPatterns: PropTypes.array.isRequired
+const mapDispatchToProps = (dispatch) => {
+  return {
+    onLoadFirstPage: () =>{
+      dispatch(actions.loadFirstPage(dispatch))
+    },
+    onCheckboxChange: (e, index) =>{
+      dispatch(actions.updateCheckboxValue(e, index))
+    },
+  }
 }
 
-JourneyPatternList = connect(mapStateToProps)(JourneyPatternList)
+const JourneyPatternList = connect(mapStateToProps, mapDispatchToProps)(JourneyPatterns)
 
 module.exports = JourneyPatternList
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/reducers/journeyPatterns.js b/app/assets/javascripts/es6_browserified/journey_patterns/reducers/journeyPatterns.js
index 129746575..543bec6e3 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/reducers/journeyPatterns.js
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/reducers/journeyPatterns.js
@@ -1,5 +1,21 @@
 var actions = require("../actions")
 
+const journeyPattern = (state = {}, action) => {
+  switch (action.type) {
+    case 'UPDATE_CHECKBOX_VALUE':
+      var updatedStopPoints = state.stop_points.map((s, index) => {
+        if (s.id.toString() == action.id) {
+          return Object.assign({}, s, {checked : !s.checked})
+        }else {
+          return s
+        }
+      })
+      return Object.assign({}, state, {stop_points: updatedStopPoints})
+    default:
+      return state
+  }
+}
+
 const journeyPatterns = (state = {}, action) => {
   switch (action.type) {
     case 'RECEIVE_JOURNEY_PATTERNS':
@@ -16,6 +32,14 @@ const journeyPatterns = (state = {}, action) => {
         actions.fetchJourneyPatterns(action.dispatch, action.currentPage, action.nextPage)
       }
       return state
+    case 'UPDATE_CHECKBOX_VALUE':
+      return state.map((j, i) =>{
+        if( i == action.index){
+          return journeyPattern(j, action)
+        }else{
+          return j
+        }
+      })
     default:
       return state
   }