Add Journey_patterns display with initialized state Refs #2204

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

8 files changed, 124 insertions, 2 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 e69de29bb..a51c11b9c 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/actions/index.js
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/actions/index.js
@@ -0,0 +1,3 @@
+const actions = {}
+
+module.exports = actions
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/components/App.js b/app/assets/javascripts/es6_browserified/journey_patterns/components/App.js
new file mode 100644
index 000000000..8e22bfe45
--- /dev/null
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/components/App.js
@@ -0,0 +1,12 @@
+var React = require('react')
+var AddJourneyPattern = require('../containers/AddJourneyPattern')
+var JourneyPatternList = require('../containers/JourneyPatternList')
+
+const App = () => (
+  <div>
+    <AddJourneyPattern />
+    <JourneyPatternList />
+  </div>
+)
+
+module.exports = App
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/components/JourneyPattern.js b/app/assets/javascripts/es6_browserified/journey_patterns/components/JourneyPattern.js
new file mode 100644
index 000000000..8848eec35
--- /dev/null
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/components/JourneyPattern.js
@@ -0,0 +1,19 @@
+var React = require('react')
+var PropTypes = require('react').PropTypes
+
+const JourneyPattern = (props) => {
+  return (
+    <div className='list-group-item'>
+      <span className='label label-default' style={{marginRight: 10}}>{props.index}</span>
+      <span className='label label-default' style={{marginRight: 10}}>{props.value.name}</span>
+      <span className='label label-default' style={{marginRight: 10}}>{props.value.object_id}</span>
+      <span className='label label-default' style={{marginRight: 10}}>{props.value.published_name}</span>
+    </div>
+  )
+}
+
+JourneyPattern.propTypes = {
+  value: PropTypes.object
+}
+
+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..b291494e4
--- /dev/null
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/components/JourneyPatterns.js
@@ -0,0 +1,21 @@
+var React = require('react')
+var PropTypes = require('react').PropTypes
+var JourneyPattern = require('./JourneyPattern')
+
+const JourneyPatterns = ({ journeyPatterns }) => {
+  return (
+    <div className='list-group'>
+      {journeyPatterns.map((journeyPattern, index) =>
+        <JourneyPattern
+          value={ journeyPattern }
+        />
+      )}
+    </div>
+  )
+}
+
+JourneyPatterns.propTypes = {
+  journeyPatterns: PropTypes.array.isRequired
+}
+
+module.exports = JourneyPatterns
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/containers/AddJourneyPattern.js b/app/assets/javascripts/es6_browserified/journey_patterns/containers/AddJourneyPattern.js
new file mode 100644
index 000000000..b4f18bf66
--- /dev/null
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/containers/AddJourneyPattern.js
@@ -0,0 +1,21 @@
+var React = require('react')
+var connect = require('react-redux').connect
+var actions = require('../actions')
+
+let AddJourneyPattern = ({ dispatch }) => {
+  return (
+    <div className="clearfix" style={{marginBottom: 10}}>
+      <form onSubmit={e => {
+        e.preventDefault()
+        dispatch(actions.addStop())
+      }}>
+        <button type="submit" className="btn btn-primary btn-xs pull-right">
+          <span className="fa fa-plus"></span> Ajouter une mission
+        </button>
+      </form>
+    </div>
+  )
+}
+AddJourneyPattern = connect()(AddJourneyPattern)
+
+module.exports = AddJourneyPattern
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/containers/JourneyPatternList.js b/app/assets/javascripts/es6_browserified/journey_patterns/containers/JourneyPatternList.js
new file mode 100644
index 000000000..0e3e57b21
--- /dev/null
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/containers/JourneyPatternList.js
@@ -0,0 +1,20 @@
+var actions = require('../actions')
+var connect = require('react-redux').connect
+var JourneyPatterns = require('../components/JourneyPatterns')
+
+const mapStateToProps = (state) => {
+  return {
+    journeyPatterns: state.journeyPatterns
+  }
+}
+
+const mapDispatchToProps = (dispatch) => {
+  return {}
+}
+
+const JourneyPatternList = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(JourneyPatterns)
+
+module.exports = JourneyPatternList
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/index.js b/app/assets/javascripts/es6_browserified/journey_patterns/index.js
index c35ac2681..626997f4c 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/index.js
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/index.js
@@ -3,6 +3,7 @@ var render = require('react-dom').render
 var Provider = require('react-redux').Provider
 var createStore = require('redux').createStore
 var journeyPatternsApp = require('./reducers')
+var App = require('./components/App')
 
 // logger, DO NOT REMOVE
 var applyMiddleware = require('redux').applyMiddleware
@@ -16,11 +17,28 @@ var req = new Request(urlJSON, {
 });
 const getInitialState = () => {
   console.log(urlJSON)
+  let state = []
   fetch(req)
     .then(response => response.json())
     // .then(json => dispatch(receivePosts(reddit, json)))
-    .then(json => console.log(json))
-  let state = []
+    .then((json) => {
+      console.log(json)
+      for (let [i, val] of json.entries()){
+        let stop_points = []
+        for (let [i, stopArea] of val['stop_area_short_descriptions'].entries()){
+          stop_points.push("id", false)
+        }
+        for (let [i, stopArea] of val['stop_area_short_descriptions'].entries()){
+          stop_points["id"] = true
+        }
+        state.push({
+          name: val.name,
+          object_id: val.object_id,
+          published_name: val.published_name
+          // stop_points: stop_points
+        })
+      }
+    })
   return state
 }
 
@@ -33,3 +51,10 @@ let store = createStore(
   initialState,
   applyMiddleware(thunkMiddleware, promise, loggerMiddleware)
 )
+
+render(
+  <Provider store={store}>
+    <App />
+  </Provider>,
+  document.getElementById('journey_patterns')
+)
diff --git a/app/views/journey_patterns_collections/show.html.slim b/app/views/journey_patterns_collections/show.html.slim
index 2c4a38bd6..0d16daf1a 100644
--- a/app/views/journey_patterns_collections/show.html.slim
+++ b/app/views/journey_patterns_collections/show.html.slim
@@ -1 +1,2 @@
+#journey_patterns
 = javascript_include_tag 'es6_browserified/journey_patterns/index.js'