Refs #2501: Add fetchApi when landing on page, fetch status, wip display

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

8 files changed, 185 insertions, 3 deletions

diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/actions/index.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/actions/index.js
index 68ca27f03..012a4035f 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/actions/index.js
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/actions/index.js
@@ -1,4 +1,71 @@
 const actions = {
+  receiveVehicleJourneys : (json) => ({
+    type: "RECEIVE_VEHICLE_JOURNEYS",
+    json
+  }),
+  fetchingApi: () =>({
+      type: 'FETCH_API'
+  }),
+  unavailableServer : () => ({
+    type: 'UNAVAILABLE_SERVER'
+  }),
+  fetchVehicleJourneys : (dispatch, currentPage, nextPage) => {
+    if(currentPage == undefined){
+      currentPage = 1
+    }
+    let vehicleJourneys = []
+    let page
+    switch (nextPage) {
+      case true:
+        page = currentPage + 1
+        break
+      case false:
+        if(currentPage > 1){
+          page = currentPage - 1
+        }
+        break
+      default:
+        page = currentPage
+        break
+    }
+    let str = ".json"
+    if(page > 1){
+      str = '.json?page=' + page.toString()
+    }
+    let urlJSON = window.location.pathname + str
+    let req = new Request(urlJSON, {
+      credentials: 'same-origin',
+    })
+    let hasError = false
+    fetch(req)
+      .then(response => {
+        if(response.status == 500) {
+          hasError = true
+        }
+        return response.json()
+      }).then((json) => {
+        if(hasError == true) {
+          dispatch(actions.unavailableServer())
+        } else {
+          let val
+          for (val of json){
+            vehicleJourneys.push({
+              journey_pattern_id: val.journey_pattern_id,
+              published_journey_name: val.published_journey_name,
+              objectid: val.objectid,
+              footnotes: val.footnotes,
+              time_tables: val.time_tables,
+              vehicle_journey_at_stops: val.vehicle_journey_at_stops,
+              deletable: false
+            })
+          }
+          // if(vehicleJourneys.length != window.vehicleJourneysPerPage){
+          //   dispatch(actions.updateTotalCount(vehicleJourneys.length - window.vehicleJourneysPerPage))
+          // }
+          dispatch(actions.receiveVehicleJourneys(vehicleJourneys))
+        }
+      })
+  }
 }
 
 module.exports = actions
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/App.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/App.js
index 385a37d25..38a6981ea 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/App.js
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/App.js
@@ -1,7 +1,9 @@
 var React = require('react')
+var VehicleJourneysList = require('../containers/vehicleJourneysList')
 
 const App = () => (
   <div>
+    <VehicleJourneysList />
   </div>
 )
 
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/VehicleJourney.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/VehicleJourney.js
new file mode 100644
index 000000000..18a58afb7
--- /dev/null
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/VehicleJourney.js
@@ -0,0 +1,35 @@
+var React = require('react')
+var PropTypes = require('react').PropTypes
+
+const VehicleJourney = (props) => {
+  return (
+    <div className={'list-group-item'}>
+
+      <div style={{display: 'inline-block', verticalAlign: 'top', width: 'calc(100% - 25px)'}}>
+        {/* Name */}
+        <p className='small'>
+          <strong>Id: </strong>{props.value.journey_pattern_id}
+        </p>
+
+        {/* Published name */}
+        <p className='small'>
+          <strong>Objectid: </strong>{props.value.objectid}
+        </p>
+
+        {/* Registration number */}
+        <p className='small'>
+          <strong>Registration number: </strong>{props.value.registration_number}
+        </p>
+
+      </div>
+
+    </div>
+  )
+}
+
+VehicleJourney.propTypes = {
+  value: PropTypes.object,
+  index: PropTypes.number,
+}
+
+module.exports = VehicleJourney
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/VehicleJourneys.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/VehicleJourneys.js
new file mode 100644
index 000000000..fe96555d1
--- /dev/null
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/VehicleJourneys.js
@@ -0,0 +1,47 @@
+var React = require('react')
+var Component = require('react').Component
+var PropTypes = require('react').PropTypes
+var VehicleJourney = require('./VehicleJourney')
+
+class VehicleJourneys extends Component{
+  constructor(props){
+    super(props)
+  }
+  componentDidMount() {
+    this.props.onLoadFirstPage()
+  }
+
+  render() {
+    if(this.props.status.isFetching == true) {
+      return (
+        <div className="isLoading" style={{marginTop: 80, marginBottom: 80}}>
+          <div className="loader"></div>
+        </div>
+      )
+    } else {
+      return (
+        <div className='list-group'>
+          {(this.props.status.fetchSuccess == false) && (
+            <div className="alert alert-danger">
+              <strong>Erreur : </strong>
+              la récupération des missions a rencontré un problème. Rechargez la page pour tenter de corriger le problème
+            </div>
+          )}
+          {this.props.vehicleJourneys.map((vj, index) =>
+            <VehicleJourney
+              value={ vj }
+              key={ index }
+              />
+          )}
+        </div>
+      )
+    }
+  }
+}
+
+VehicleJourneys.propTypes = {
+  status: PropTypes.object.isRequired,
+  onLoadFirstPage: PropTypes.func.isRequired,
+}
+
+module.exports = VehicleJourneys
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/VehicleJourneysList.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/VehicleJourneysList.js
new file mode 100644
index 000000000..e028b7eb3
--- /dev/null
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/VehicleJourneysList.js
@@ -0,0 +1,23 @@
+var actions = require('../actions')
+var connect = require('react-redux').connect
+var VehicleJourneys = require('../components/VehicleJourneys')
+
+const mapStateToProps = (state) => {
+  return {
+    vehicleJourneys: state.vehicleJourneys,
+    status: state.status
+  }
+}
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    onLoadFirstPage: () =>{
+      dispatch(actions.fetchingApi())
+      actions.fetchVehicleJourneys(dispatch)
+    }
+  }
+}
+
+const VehicleJourneysList = connect(mapStateToProps, mapDispatchToProps)(VehicleJourneys)
+
+module.exports = VehicleJourneysList
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/index.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/index.js
index 839db18ec..66d6a6052 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/index.js
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/index.js
@@ -19,8 +19,8 @@ var initialState = {
   vehicleJourneys: [],
   pagination: {
     page : 1,
-    totalCount: window.journeyPatternLength,
-    perPage: window.journeyPatternsPerPage,
+    totalCount: window.vehicleJourneysLength,
+    perPage: window.vehicleJourneysPerPage,
     stateChanged: false
   },
   modal: {
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/reducers/status.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/reducers/status.js
index fb23e97e7..3351aec4f 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/reducers/status.js
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/reducers/status.js
@@ -2,6 +2,12 @@ var actions = require("../actions")
 
 const status = (state = {}, action) => {
   switch (action.type) {
+    case 'UNAVAILABLE_SERVER':
+      return Object.assign({}, state, {fetchSuccess: false})
+    case 'FETCH_API':
+      return Object.assign({}, state, {isFetching: true})
+    case 'RECEIVE_VEHICLE_JOURNEYS':
+      return Object.assign({}, state, {fetchSuccess: true, isFetching: false})
     default:
       return state
   }
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/reducers/vehicleJourneys.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/reducers/vehicleJourneys.js
index fb23e97e7..ae40d5911 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/reducers/vehicleJourneys.js
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/reducers/vehicleJourneys.js
@@ -1,7 +1,9 @@
 var actions = require("../actions")
 
-const status = (state = {}, action) => {
+const status = (state = [], action) => {
   switch (action.type) {
+    case 'RECEIVE_VEHICLE_JOURNEYS':
+      return [...action.json]
     default:
       return state
   }