Refs #2892: init reactux in edit, fetch and load state with datas

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

11 files changed, 194 insertions, 3 deletions

diff --git a/app/assets/javascripts/es6_browserified/time_tables/actions/index.js b/app/assets/javascripts/es6_browserified/time_tables/actions/index.js
new file mode 100644
index 000000000..7c9a5be08
--- /dev/null
+++ b/app/assets/javascripts/es6_browserified/time_tables/actions/index.js
@@ -0,0 +1,33 @@
+const actions = {
+  fetchingApi: () =>({
+      type: 'FETCH_API'
+  }),
+  unavailableServer : () => ({
+    type: 'UNAVAILABLE_SERVER'
+  }),
+  receiveTimeTables : (json) => ({
+    type: "RECEIVE_TIME_TABLES",
+    json
+  }),
+
+  fetchTimeTables : (dispatch, currentPage, nextPage) => {
+    let urlJSON = window.location.pathname.split('/', 5).join('/') + '.json'
+    let hasError = false
+    fetch(urlJSON, {
+      credentials: 'same-origin',
+    }).then(response => {
+        if(response.status == 500) {
+          hasError = true
+        }
+        return response.json()
+      }).then((json) => {
+        if(hasError == true) {
+          dispatch(actions.unavailableServer())
+        } else {
+          dispatch(actions.receiveTimeTables(json))
+        }
+      })
+  },
+}
+
+module.exports = actions
diff --git a/app/assets/javascripts/es6_browserified/time_tables/containers/App.js b/app/assets/javascripts/es6_browserified/time_tables/containers/App.js
new file mode 100644
index 000000000..ab8c3bf06
--- /dev/null
+++ b/app/assets/javascripts/es6_browserified/time_tables/containers/App.js
@@ -0,0 +1,29 @@
+var React = require('react')
+var connect = require('react-redux').connect
+var Component = require('react').Component
+var actions = require('../actions')
+
+class App extends Component {
+  componentDidMount(){
+    this.props.onLoadFirstPage()
+  }
+
+  render(){
+    return(
+      <div></div>
+    )
+  }
+}
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    onLoadFirstPage: () =>{
+      dispatch(actions.fetchingApi())
+      actions.fetchTimeTables(dispatch)
+    }
+  }
+}
+
+const timeTableApp = connect(null, mapDispatchToProps)(App)
+
+module.exports = timeTableApp
diff --git a/app/assets/javascripts/es6_browserified/time_tables/index.js b/app/assets/javascripts/es6_browserified/time_tables/index.js
new file mode 100644
index 000000000..4e44e49ba
--- /dev/null
+++ b/app/assets/javascripts/es6_browserified/time_tables/index.js
@@ -0,0 +1,48 @@
+var React = require('react')
+var render = require('react-dom').render
+var Provider = require('react-redux').Provider
+var createStore = require('redux').createStore
+var timeTablesApp = require('./reducers')
+var App = require('./containers/App')
+
+// logger, DO NOT REMOVE
+// var applyMiddleware = require('redux').applyMiddleware
+// var createLogger = require('redux-logger')
+// var thunkMiddleware = require('redux-thunk').default
+// var promise = require('redux-promise')
+
+var initialState = {
+  status: {
+    policy: window.perms,
+    fetchSuccess: true,
+    isFetching: false
+  },
+  current_month: [],
+  time_table_periods: [],
+  periode_range: [],
+  pagination: {
+    page : 1,
+    totalCount: window.journeyPatternLength,
+    perPage: window.journeyPatternsPerPage,
+    stateChanged: false
+  },
+  modal: {
+    type: '',
+    modalProps: {},
+    confirmModal: {}
+  }
+}
+// const loggerMiddleware = createLogger()
+
+let store = createStore(
+  timeTablesApp,
+  initialState
+  // applyMiddleware(thunkMiddleware, promise, loggerMiddleware)
+)
+
+render(
+  <Provider store={store}>
+    <App />
+  </Provider>,
+  document.getElementById('time_tables')
+)
diff --git a/app/assets/javascripts/es6_browserified/time_tables/reducers/current_month.js b/app/assets/javascripts/es6_browserified/time_tables/reducers/current_month.js
new file mode 100644
index 000000000..425e897d1
--- /dev/null
+++ b/app/assets/javascripts/es6_browserified/time_tables/reducers/current_month.js
@@ -0,0 +1,10 @@
+const currentMonth = (state = [], action) => {
+  switch (action.type) {
+    case 'RECEIVE_TIME_TABLES':
+      return action.json.current_month
+    default:
+      return state
+  }
+}
+
+module.exports = currentMonth
diff --git a/app/assets/javascripts/es6_browserified/time_tables/reducers/index.js b/app/assets/javascripts/es6_browserified/time_tables/reducers/index.js
new file mode 100644
index 000000000..4308c0104
--- /dev/null
+++ b/app/assets/javascripts/es6_browserified/time_tables/reducers/index.js
@@ -0,0 +1,18 @@
+var combineReducers = require('redux').combineReducers
+var status = require('./status')
+var pagination = require('./pagination')
+var modal = require('./modal')
+var current_month = require('./current_month')
+var periode_range = require('./periode_range')
+var time_table_periods = require('./time_table_periods')
+
+const timeTablesApp = combineReducers({
+  current_month,
+  periode_range,
+  time_table_periods,
+  status,
+  pagination,
+  modal
+})
+
+module.exports = timeTablesApp
diff --git a/app/assets/javascripts/es6_browserified/time_tables/reducers/modal.js b/app/assets/javascripts/es6_browserified/time_tables/reducers/modal.js
new file mode 100644
index 000000000..e011164c5
--- /dev/null
+++ b/app/assets/javascripts/es6_browserified/time_tables/reducers/modal.js
@@ -0,0 +1,8 @@
+const modal = (state = {}, action) => {
+  switch (action.type) {
+    default:
+      return state
+  }
+}
+
+module.exports = modal
diff --git a/app/assets/javascripts/es6_browserified/time_tables/reducers/pagination.js b/app/assets/javascripts/es6_browserified/time_tables/reducers/pagination.js
new file mode 100644
index 000000000..5ea7300dc
--- /dev/null
+++ b/app/assets/javascripts/es6_browserified/time_tables/reducers/pagination.js
@@ -0,0 +1,8 @@
+const pagination = (state = {}, action) => {
+  switch (action.type) {
+    default:
+      return state
+  }
+}
+
+module.exports = pagination
diff --git a/app/assets/javascripts/es6_browserified/time_tables/reducers/periode_range.js b/app/assets/javascripts/es6_browserified/time_tables/reducers/periode_range.js
new file mode 100644
index 000000000..095069f8a
--- /dev/null
+++ b/app/assets/javascripts/es6_browserified/time_tables/reducers/periode_range.js
@@ -0,0 +1,10 @@
+const periodeRange = (state = [], action) => {
+  switch (action.type) {
+    case 'RECEIVE_TIME_TABLES':
+      return action.json.periode_range
+    default:
+      return state
+  }
+}
+
+module.exports = periodeRange
diff --git a/app/assets/javascripts/es6_browserified/time_tables/reducers/status.js b/app/assets/javascripts/es6_browserified/time_tables/reducers/status.js
new file mode 100644
index 000000000..aaedff4c1
--- /dev/null
+++ b/app/assets/javascripts/es6_browserified/time_tables/reducers/status.js
@@ -0,0 +1,16 @@
+var _ = require('lodash')
+
+const status = (state = {}, action) => {
+  switch (action.type) {
+    case 'UNAVAILABLE_SERVER':
+      return _.assign({}, state, {fetchSuccess: false})
+    case 'FETCH_API':
+      return _.assign({}, state, {isFetching: true})
+    case 'RECEIVE_JOURNEY_PATTERNS':
+      return _.assign({}, state, {fetchSuccess: true, isFetching: false})
+    default:
+      return state
+  }
+}
+
+module.exports = status
diff --git a/app/assets/javascripts/es6_browserified/time_tables/reducers/time_table_periods.js b/app/assets/javascripts/es6_browserified/time_tables/reducers/time_table_periods.js
new file mode 100644
index 000000000..614e63894
--- /dev/null
+++ b/app/assets/javascripts/es6_browserified/time_tables/reducers/time_table_periods.js
@@ -0,0 +1,10 @@
+const timeTablePeriods = (state = [], action) => {
+  switch (action.type) {
+    case 'RECEIVE_TIME_TABLES':
+      return action.json.time_table_periods
+    default:
+      return state
+  }
+}
+
+module.exports = timeTablePeriods
diff --git a/app/views/time_tables/_form.html.slim b/app/views/time_tables/_form.html.slim
index 65c23231d..fdb735d12 100644
--- a/app/views/time_tables/_form.html.slim
+++ b/app/views/time_tables/_form.html.slim
@@ -59,9 +59,9 @@
 
   .row
     .col-lg-12.mb-sm.mt-md
-      #periods
-        .alert.alert-warning
-          |Les éléments ci-dessous sont à supprimer.
+      #time_tables
+      .alert.alert-warning
+        |Les éléments ci-dessous sont à supprimer.
 
   .row
     .col-lg-6.col-md-6.col-sm-12.col-xs-12
@@ -98,3 +98,4 @@
 
 
   = form.button :submit, t('actions.submit'), class: 'btn btn-default formSubmitr', form: 'timetable_form'
+  = javascript_include_tag 'es6_browserified/time_tables/index.js'