Refs #2209: Add state to modal, Modal Container/Component/first reducer

Signed-off-by: Thomas Shawarma Haddad <thomas.haddad@af83.com>
Signed-off-by: Jean-Paul Lescouzeres <jean-paul.lescouzeres@af83.com>

10 files changed, 76 insertions, 4 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 110d02889..9e598fdbc 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/actions/index.js
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/actions/index.js
@@ -24,6 +24,11 @@ const actions = {
     id : e.currentTarget.id,
     index
   }),
+  openUpdateModalOpen : (index, journeyPattern) => ({
+    type : 'UPDATE_JOURNEYPATTERN_MODAL',
+    index,
+    journeyPattern
+  }),
   savePage : (dispatch, currentPage) => ({
     type: 'SAVE_PAGE',
     dispatch
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/components/App.js b/app/assets/javascripts/es6_browserified/journey_patterns/components/App.js
index 378e6db1e..3472d9dcc 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/components/App.js
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/components/App.js
@@ -1,6 +1,7 @@
 var React = require('react')
 var AddJourneyPattern = require('../containers/AddJourneyPattern')
 var Navigate = require('../containers/Navigate')
+var Modal = require('../containers/Modal')
 var SaveJourneyPattern = require('../containers/SaveJourneyPattern')
 var JourneyPatternList = require('../containers/JourneyPatternList')
 
@@ -12,6 +13,7 @@ const App = () => (
     </div>
     <JourneyPatternList />
     <SaveJourneyPattern />
+    <Modal/>
   </div>
 )
 
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 01796154f..bf604d2ae 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/components/JourneyPattern.js
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/components/JourneyPattern.js
@@ -4,6 +4,12 @@ var PropTypes = require('react').PropTypes
 const JourneyPattern = (props) => {
   return (
     <div className='list-group-item'>
+      <p
+        onClick= {props.onUpdateModalOpen}
+        className='big'
+      >
+        <strong>MODAL</strong>
+      </p>
       <p className='small'><strong>Index: </strong>{props.index}</p>
       <p className='small'><strong>Name: </strong>{props.value.name}</p>
       <p className='small'><strong>ObjectID: </strong>{props.value.object_id}</p>
@@ -33,7 +39,8 @@ const JourneyPattern = (props) => {
 JourneyPattern.propTypes = {
   value: PropTypes.object,
   index: PropTypes.number,
-  onCheckboxChange: PropTypes.func.isRequired
+  onCheckboxChange: PropTypes.func.isRequired,
+  onUpdateModalOpen: 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
index a22963ca3..4a74f7d19 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/components/JourneyPatterns.js
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/components/JourneyPatterns.js
@@ -21,6 +21,7 @@ class JourneyPatterns extends Component{
             value={ journeyPattern }
             key={ index }
             onCheckboxChange= {(e) => this.props.onCheckboxChange(e, index)}
+            onUpdateModalOpen= {() => this.props.onUpdateModalOpen(index, journeyPattern)}
           />
         )}
       </div>
@@ -31,7 +32,8 @@ class JourneyPatterns extends Component{
 JourneyPatterns.propTypes = {
   journeyPatterns: PropTypes.array.isRequired,
   onCheckboxChange: PropTypes.func.isRequired,
-  onLoadFirstPage: PropTypes.func.isRequired
+  onLoadFirstPage: PropTypes.func.isRequired,
+  onUpdateModalOpen: PropTypes.func.isRequired
 }
 
 module.exports = JourneyPatterns
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/components/Modal.js b/app/assets/javascripts/es6_browserified/journey_patterns/components/Modal.js
new file mode 100644
index 000000000..90140661c
--- /dev/null
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/components/Modal.js
@@ -0,0 +1,17 @@
+var React = require('react')
+var PropTypes = require('react').PropTypes
+
+const ModalComponent = (props) => {
+  return (
+    <h1 className={ (props.modal.open ? "" : "hidden") + " btn btn-default" }>
+      COUCOU {props.index}
+    </h1>
+  )
+}
+
+ModalComponent.propTypes = {
+  index: PropTypes.number,
+  modal: PropTypes.object
+}
+
+module.exports = ModalComponent
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 2da8c304c..f475f7cfe 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/containers/JourneyPatternList.js
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/containers/JourneyPatternList.js
@@ -16,6 +16,9 @@ const mapDispatchToProps = (dispatch) => {
     onCheckboxChange: (e, index) =>{
       dispatch(actions.updateCheckboxValue(e, index))
     },
+    onUpdateModalOpen: (index, journeyPattern) =>{
+      dispatch(actions.openUpdateModalOpen(index, journeyPattern))
+    },
   }
 }
 
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/containers/Modal.js b/app/assets/javascripts/es6_browserified/journey_patterns/containers/Modal.js
new file mode 100644
index 000000000..22b36b35e
--- /dev/null
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/containers/Modal.js
@@ -0,0 +1,12 @@
+var connect = require('react-redux').connect
+var ModalComponent = require('../components/modal')
+
+const mapStateToProps = (state) => {
+  return {
+    modal: state.modal,
+  }
+}
+
+const ModalContainer = connect(mapStateToProps)(ModalComponent)
+
+module.exports = ModalContainer
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/index.js b/app/assets/javascripts/es6_browserified/journey_patterns/index.js
index e420cff9f..86e9e1c35 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/index.js
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/index.js
@@ -14,7 +14,11 @@ var promise = require('redux-promise')
 var initialState = {
   journeyPatterns: [],
   pagination: 1,
-  totalCount: window.journeyPatternLength
+  totalCount: window.journeyPatternLength,
+  modal: {
+    open: false,
+    modalProps: {}
+  }
 }
 const loggerMiddleware = createLogger()
 
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/reducers/index.js b/app/assets/javascripts/es6_browserified/journey_patterns/reducers/index.js
index 7e8270868..71ff8b6f5 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/reducers/index.js
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/reducers/index.js
@@ -2,11 +2,13 @@ var combineReducers = require('redux').combineReducers
 var journeyPatterns = require('./journeyPatterns')
 var pagination = require('./pagination')
 var totalCount = require('./totalCount')
+var modal = require('./modal')
 
 const journeyPatternsApp = combineReducers({
   journeyPatterns,
   pagination,
-  totalCount
+  totalCount,
+  modal
 })
 
 module.exports = journeyPatternsApp
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/reducers/modal.js b/app/assets/javascripts/es6_browserified/journey_patterns/reducers/modal.js
new file mode 100644
index 000000000..452c47011
--- /dev/null
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/reducers/modal.js
@@ -0,0 +1,18 @@
+const modal = (state = {}, action) => {
+  switch (action.type) {
+    case 'UPDATE_JOURNEYPATTERN_MODAL':
+      return {
+        open: true,
+        modalProps: {
+          index: action.index,
+          journeyPattern: action.journeyPattern
+        }
+      }
+    case 'HIDE_MODAL':
+      return {}
+    default:
+      return state
+  }
+}
+
+module.exports = modal