Fetch next

package.json

@@ -3,12 +3,17 @@
   "version": "0.3.0",
   "private": true,
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.6",
+    "@fortawesome/free-solid-svg-icons": "^5.4.1",
+    "@fortawesome/react-fontawesome": "^0.1.3",
     "ajv": "^6.5.1",
     "axios": "^0.18.0",
+    "i": "^0.3.6",
     "leaflet": "^1.3.2",
     "leaflet-draw": "^1.0.2",
     "lodash": "^4.17.10",
     "moment": "^2.22.2",
+    "npm": "^6.4.1",
     "polyline-encoded": "0.0.8",
     "raven-js": "^3.26.4",
     "react": "^16.4.1",

public/index.html

@@ -22,7 +22,6 @@
     <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.4.2/leaflet.draw.css" />
     <link rel="stylesheet" href="https://static.10ninox.com/css/bulma.min.css" />
     <link rel="stylesheet" href="https://static.10ninox.com/css/bulma-checkradio.min.css" />
-    <script defer="defer" src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
     <script src="https://cdn.ravenjs.com/3.26.4/raven.min.js" crossorigin="anonymous"></script>
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.

src/App.js

@@ -1,6 +1,9 @@
 import React from 'react'
 // import './App.css'
 import { Switch, Route } from 'react-router-dom'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faGhost, faSpinner } from '@fortawesome/free-solid-svg-icons'
 
 import Main from './container/Main'
 import Geo from './container/Geo'
@@ -8,6 +11,9 @@ import Public from './container/Public'
 
 import { LOGIN_PATH } from './constants/path'
 
+library.add(faGhost)
+library.add(faSpinner)
+
 const App = () => (
   <Switch>
     {/* both /roster and /roster/:number begin with /roster */}

src/actions/fare.js

@@ -7,7 +7,11 @@ import { API_URL } from '../constants/Api'
 
 export const getFareAttr = (query) => ({
   [RSAA]: {
-    endpoint: `${API_URL}/fare-attribute/?${query || ''}`,
+    endpoint: (state) => (
+      query === 'next' ?
+        state.next :
+        `${API_URL}/fare-attribute/?${query || ''}`
+    ),
     method: 'GET',
     headers: RSAAHeaders,
     bailout: (state) => state.fareattr.fetching || (
@@ -70,7 +74,11 @@ export const deleteFareAttr = (id) => ({
 
 export const getFareRule = (query) => ({
   [RSAA]: {
-    endpoint: `${API_URL}/fare-rule/?${query || ''}`,
+    endpoint: (state) => (
+      query === 'next' ?
+        state.farerule.next :
+        `${API_URL}/fare-rule/?${query || ''}`
+    ),
     method: 'GET',
     headers: RSAAHeaders,
     bailout: (state) => state.farerule.fetching || (

src/components/FareAttributesDetail.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 import styled from 'styled-components'
 import { connect } from 'react-redux'
 import { Redirect, Link } from 'react-router-dom'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 
 import {
   PaymentMethodChoices, TransferChoices
@@ -100,6 +101,10 @@ class FareAttributesDetail extends Component {
     )
   }
 
+  handleFetchMoreRules() {
+    store.dispatch(getFareRule('next'))
+  }
+
   render () {
     const { fetching, results } = this.props.fareattr
     const { farerule } = this.props
@@ -119,6 +124,8 @@ class FareAttributesDetail extends Component {
           <i className="fas fa-plus" /> New fare rule
         </Link>
         {farerule.results && farerule.results.map(ele => <FareRulesOne item={ele} />)}
+        {farerule.fetching && <FontAwesomeIcon icon="spinner" pulse/>}
+        {farerule.next && <a onClick={this.handleFetchMoreRules}>More</a>}
       </div>
     )
   }

src/components/FareList.js

@@ -55,7 +55,7 @@ class FareList extends Component {
             </p>
           </nav>
           {farerule.results && Object.keys(farerule.results).map(i => (
-            <FareRulesOne item={farerule.results[i]} />
+            <FareRulesOne key={`ff-${farerule.results[i].id}`} item={farerule.results[i]} />
           ))}
         </div>
 

src/components/FareRulesDetail.js

@@ -13,7 +13,7 @@ export const FareRulesOne = (props) => {
   const { item } = props
 
   return (
-    <FakeRow className="level panel" key={item.fare_id}>
+    <FakeRow className="level panel" key={`fro-${item.fare_id}`}>
       <div className="level-item has-text-centered">
         <div>
           <p className="heading">Fare ID</p>

src/reducers/agency.js

@@ -25,14 +25,14 @@ const agency = (state = agencyInitState, action) => {
         fetching: true,
       }
     case AGENCY_SUCCESS:
-      const { count, next, prev, results } = action.payload
+      const { count, next, previous, results } = action.payload
       return {
         ...state,
         fetching: false,
         count,
         next,
         results: [
-          ...(prev ? state.results : []),
+          ...(previous ? state.results : []),
           ...results,
         ]
       }

src/reducers/calendar.js

@@ -19,14 +19,14 @@ const calendar = (state = calendarInitState, action) => {
         fetching: true,
       }
     case CALENDAR_SUCCESS:
-      const { count, next, prev, results } = action.payload
+      const { count, next, previous, results } = action.payload
       return {
         ...state,
         fetching: false,
         count,
         next,
         results: [
-          ...( (prev) ? state.results : [] ),
+          ...( (previous) ? state.results : [] ),
           ...results,
         ]
       }

src/reducers/fareattr.js

@@ -20,14 +20,14 @@ const fareAttr = (state = fareAttrInitState, action) => {
         query: action.meta !== undefined ? action.meta.query : state.query,
       }
     case FAREATTR_SUCCESS:
-      const { count, next, prev, results } = action.payload
+      const { count, next, previous, results } = action.payload
       return {
         ...state,
         fetching: false,
         count,
         next,
         results: [
-          ...( (prev) ? state.results : [] ),
+          ...( (previous) ? state.results : [] ),
           ...results,
         ]
       }

src/reducers/farerule.js

@@ -6,37 +6,45 @@ import {
 
 const fareRuleInitState = {
   results: [],
+  previous: null,
   next: null,
   count: 0,
   fetching: false,
   query: '',
+  isNext: false,
 }
 const fareRule = (state = fareRuleInitState, action) => {
   switch(action.type) {
     case FARERULE_REQUEST:
-      let resetResult, resetCount
+      let resetResult, resetCount, isNextReq = false
       if (action.meta !== undefined) {
-        resetResult = state.query !== action.meta.query ? [] : state.results
-        resetCount = state.query !== action.meta.query ? 0 : state.count
+        if (action.meta.query === 'next') {
+          isNextReq = true
+        } else {
+          resetResult = state.query !== action.meta.query ? [] : state.results
+          resetCount = state.query !== action.meta.query ? 0 : state.count
+        }
       }
+      const updateQRC = (action.meta !== undefined) && !isNextReq
       return {
         ...state,
         fetching: true,
-        query: action.meta !== undefined ? action.meta.query : state.query,
-        results: action.meta !== undefined ? resetResult : state.results,
-        count: action.meta !== undefined ? resetCount : state.count,
+        query: updateQRC ? action.meta.query : state.query,
+        results: updateQRC ? resetResult : state.results,
+        count: updateQRC ? resetCount : state.count,
       }
     case FARERULE_SUCCESS:
-      const { count, next, prev, results } = action.payload
+      const { count, next, previous, results } = action.payload
       return {
         ...state,
         fetching: false,
         count,
+        previous,
         next,
         results: [
-          ...( (prev) ? state.results : [] ),
+          ...( (previous) ? state.results : [] ),
           ...results,
-        ]
+        ],
       }
     case FARERULE_UPDATE:
       const { id } = action.payload

src/reducers/frequency.js

@@ -30,14 +30,14 @@ const frequency = (state = frequencyInitState, action) => {
         query: action.meta !== undefined ? action.meta.query : state.query,
       }
     case FREQUENCY_SUCCESS:
-      const { count, next, prev, results } = action.payload
+      const { count, next, previous, results } = action.payload
       return {
         ...state,
         fetching: false,
         count,
         next,
         results: [
-          ...((prev) ? state.results : []),
+          ...((previous) ? state.results : []),
           ...results,
         ]
       }

src/reducers/route.js

@@ -20,14 +20,14 @@ const route = (state = routeInitState, action) => {
         query: action.meta !== undefined ? action.meta.query : state.query,
       }
     case ROUTE_SUCCESS:
-      const { count, next, prev, results } = action.payload
+      const { count, next, previous, results } = action.payload
       return {
         ...state,
         fetching: false,
         count,
         next,
         results: [
-          ...( (prev) ? state.results : [] ),
+          ...( (previous) ? state.results : [] ),
           ...results,
         ]
       }

src/reducers/stop.js

@@ -28,14 +28,14 @@ const stop = (state = stopInitState, action) => {
         query: q || '',
       }
     case STOP_SUCCESS:
-      const { count, next, prev, results } = action.payload
+      const { count, next, previous, results } = action.payload
       return {
         ...state,
         fetching: false,
         count,
         next,
         results: [
-          ...(prev ? state.results : []),
+          ...(previous ? state.results : []),
           ...results,
         ]
       }

src/reducers/stoptime.js

@@ -30,14 +30,14 @@ const stoptime = (state = stoptimeInitState, action) => {
         query: action.meta !== undefined ? action.meta.query : state.query,
       }
     case STOPTIME_SUCCESS:
-      const { count, next, prev, results } = action.payload
+      const { count, next, previous, results } = action.payload
       return {
         ...state,
         fetching: false,
         count,
         next,
         results: [
-          ...((prev) ? state.results : []),
+          ...((previous) ? state.results : []),
           ...results,
         ]
       }

src/reducers/trip.js

@@ -18,14 +18,14 @@ const trip = (state = tripInitState, action) => {
         fetching: true,
       }
     case TRIP_SUCCESS:
-      const { count, next, prev, results } = action.payload
+      const { count, next, previous, results } = action.payload
       return {
         ...state,
         fetching: false,
         count,
         next,
         results: [
-          ...(prev ? state.results : []),
+          ...(previous ? state.results : []),
           ...results,
         ]
       }