alters structure of state. adds support for ES6 spread/rest

minaorangina · Dec 30, 2016 · 8aebec5 · 8aebec5
1 parent 088872c
commit 8aebec5
Show file tree

Hide file tree

Showing 12 changed files with 57 additions and 42 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,4 +1,4 @@
 {
     "presets": ["react", "es2015"],
-    "plugins": ["react-hot-loader/babel"]
+    "plugins": ["react-hot-loader/babel", "transform-object-rest-spread"]
 }
diff --git a/package.json b/package.json
@@ -33,11 +33,13 @@
   "dependencies": {
     "axios": "^0.15.2",
     "babel-loader": "^6.2.5",
+    "babel-plugin-transform-object-rest-spread": "^6.20.2",
     "babel-preset-es2015": "^6.16.0",
     "babel-preset-react": "^6.16.0",
     "babel-register": "^6.16.3",
     "css-loader": "^0.25.0",
     "hapi": "^15.2.0",
+    "immutability-helper": "^2.0.0",
     "inert": "^4.0.2",
     "moment": "^2.15.1",
     "node-sass": "^3.10.1",

diff --git a/server/lib/getTfLArrivals.js b/server/lib/getTfLArrivals.js
@@ -50,9 +50,9 @@ function pollAPI (io, api, stopPoint, mode, direction) {
 
         api.get('StopPoint/' + stopPoint + '/Arrivals', function (err, response, body) {
 
-            var results = JSON.parse(body);
+            let data = JSON.parse(body);
 
-            if (!results || results.httpStatusCode === 404) {
+            if (!data || data.httpStatusCode === 404) {
 
                 io.emit(`${mode}:error`, new Error("Could not get arrivals from TfL"));
                 return;
@@ -61,13 +61,13 @@ function pollAPI (io, api, stopPoint, mode, direction) {
 
                 if (direction === 'home') {
 
-                    results = results.filter(function (arrival) {
+                    data = data.filter(function (arrival) {
 
                         return arrival.destinationNaptanId === AWAY_DLR;
                     });
                 }
             }
-            results = results.sort(function (a, b) {
+            data = data.sort(function (a, b) {
 
                 if (a.expectedArrival < b.expectedArrival) {
                     return -1;
@@ -78,7 +78,9 @@ function pollAPI (io, api, stopPoint, mode, direction) {
                 }
             })
             .slice(0, NUM_ARRIVALS);
-            io.emit(mode + ':arrivals', { data: results, direction });
+            const origin = data[0].stationName;
+            const destination = data[0].destinationName;
+            io.emit(mode + ':arrivals', { data, direction, origin, destination });
         });
     }
 }
diff --git a/server/lib/getTrainArrivals.js b/server/lib/getTrainArrivals.js
@@ -42,11 +42,9 @@ function getTrainArrivals (io, mode, direction) {
                 return;
             }
             const stationBoard = result.GetStationBoardResult;
-            const results = {
-                destination: stationBoard.filterLocationName,
-                arrivals: stationBoard.trainServices ? stationBoard.trainServices.service : []
-            };
-            io.emit(mode + ':arrivals', { data: results, direction });
+            const data = stationBoard.trainServices ? stationBoard.trainServices.service : [];
+            const origin = direction === 'home' ? process.env.HOME_TRAIN_STATION_NAME : process.env.AWAY_TRAIN_STATION_NAME;
+            io.emit(mode + ':arrivals', { data, direction, origin, destination: stationBoard.filterLocationName });
         });
     });
 }

diff --git a/src/js/actions.js b/src/js/actions.js
@@ -26,13 +26,15 @@ export function getArrivalsRequest (mode) {
     };
 }
 
-export function getArrivalsSuccess (mode, direction, data) {
+export function getArrivalsSuccess (mode, direction, data, origin, destination) {
 
     return {
         type: GET_ARRIVALS_SUCCESS,
         mode,
         direction,
-        data
+        data,
+        origin,
+        destination
     };
 }
 

diff --git a/src/js/components/arrivals.jsx b/src/js/components/arrivals.jsx
@@ -12,16 +12,16 @@ const Arrivals = ({ train, dlr, bus, direction, changeDirection }) => {
         if (direction === 'home') {
             return (
                 <div className="arrivals-container">
-                    <TfL mode="Bus" data={ bus } direction={ direction }  />
-                    <TfL mode="DLR" data={ dlr } direction={ direction }  />
-                    <Train data={ train } />
+                    <TfL mode="Bus" data={ bus.arrivals } direction={ direction }  />
+                    <TfL mode="DLR" data={ dlr.arrivals } direction={ direction }  />
+                    <Train data={ train.arrivals } origin={ train.origin } destination={ train.destination } direction={ direction } />
                 </div>
             );
         }
         if (direction === 'away') {
             return (
                 <div className="arrivals-container">
-                    <Train data={ train } />
+                    <Train data={ train.arrivals } destination={ train.destination } />
                     <TfL mode="DLR" data={ dlr } direction={ direction }  />
                     <TfL mode="Bus" data={ bus } direction={ direction }  />
                 </div>

diff --git a/src/js/components/tfl.jsx b/src/js/components/tfl.jsx
@@ -12,7 +12,7 @@ const TfL = ({ mode, data, direction }) => {
     return (
         <div className={ `card ${modeLowerCase} ${direction || ''}` }>
             <h3>
-                { mode }: { data[0] && normaliseStationName(data[0].stationName) } { data.length === 0 && 'Got nothing...' }
+                { mode }: { data.length > 0 && `from ${normaliseStationName(data[0].stationName)}` } { data.length === 0 && 'Got nothing...' }
             </h3>
             {
                 data.map((arrival, i) => {
@@ -25,7 +25,7 @@ const TfL = ({ mode, data, direction }) => {
                             <span className="time">{ time }</span>
                             {
                                 modeLowerCase === 'dlr' &&
-                                <div className="platform">{ arrival.platformName }</div>
+                                <div className="info">{ arrival.platformName }</div>
                             }
                         </div>
                     );

diff --git a/src/js/components/train.jsx b/src/js/components/train.jsx
@@ -1,20 +1,21 @@
 import React from 'react';
 
-export default function Train ({ data, destination }) {
-    
+export default function Train ({ data, direction, origin, destination }) {
+
     const arrivals = data.length > 0 && data.map((arrival, i) => {
-        const trainDestination = arrival.destination.location[0].locationName;
         return (
             <div className="arrival-item" key={ i }>
-                { `${arrival.std} to ${trainDestination}` }
+                { `${arrival.std} to ${destination}` }
                 <div className="info">{ arrival.etd }</div>
             </div>
         );
     });
 
     return (
         <div className='card'>
-            <h3>{ `Train: going to ${destination}` }</h3>
+            <h3>
+                { `Train: ${ data.length === 0 ? 'Got nothing...' : `from ${origin}`}` }
+            </h3>
             { arrivals }
         </div>
     );

diff --git a/src/js/containers/arrivals.js b/src/js/containers/arrivals.js
@@ -5,14 +5,14 @@ import Arrivals from '../components/arrivals.jsx';
 import { setBackgroundColour } from '../helpers';
 
 
-const mapStateToProps = (state) => {
-
-    setBackgroundColour(state.direction);
+const mapStateToProps = ({ bus, dlr, train, direction }) => {
+    console.log("container", train);
+    setBackgroundColour(direction);
     return {
-        bus: state.bus.arrivals,
-        train: state.train.arrivals,
-        dlr: state.dlr.arrivals,
-        direction: state.direction
+        bus,
+        train,
+        dlr,
+        direction
     };
 };
 
@@ -23,6 +23,7 @@ const mapDispatchToProps = (dispatch) => {
             const newDirection = store.getState().direction === 'home' ? 'away' : 'home';
             dispatch(getArrivals('dlr', newDirection));
             dispatch(getArrivals('bus', newDirection));
+            dispatch(getArrivals('train', newDirection));
         }
     };
 };

diff --git a/src/js/reducer.js b/src/js/reducer.js
@@ -1,4 +1,4 @@
-import update from 'react-addons-update';
+import update from 'immutability-helper';
 
 import {
     GET_ARRIVALS_REQUEST,
@@ -10,14 +10,20 @@ export const initialState = {
     direction: "home",
     bus: {
         arrivals: [],
+        origin: '',
+        destination: '',
         error: undefined
     },
     dlr: {
         arrivals: [],
+        origin: '',
+        destination: '',
         error: undefined
     },
     train: {
         arrivals: [],
+        origin: '',
+        destination: '',
         error: undefined
     },
     isFetching: false,
@@ -37,11 +43,15 @@ export function reducer (state = initialState, action) {
     case GET_ARRIVALS_SUCCESS:
 
         return update(state, {
-            [action.mode]: { arrivals: { $set: action.data } },
+            [action.mode]: {
+                arrivals: { $set: action.data },
+                origin: { $set: action.origin },
+                destination: { $set: action.destination }
+            },
             direction: { $set: action.direction },
             isFetching: { $set: false }
         });
-
+        
     case GET_ARRIVALS_FAILURE:
 
         return update(state, {

diff --git a/src/js/socket.js b/src/js/socket.js
@@ -8,17 +8,16 @@ export const socket = io(); // eslint-disable-line no-undef
 
 export function registerListeners (dispatch) {
 
-    socket.on('dlr:arrivals', ({ direction, data }) => {
-        dispatch(getArrivalsSuccess('dlr', direction, data));
+    socket.on('dlr:arrivals', ({ direction, data, origin, destination }) => {
+        dispatch(getArrivalsSuccess('dlr', direction, data, origin, destination));
     });
 
-    socket.on('bus:arrivals', ({ direction, data }) => {
-        dispatch(getArrivalsSuccess('bus', direction, data));
+    socket.on('bus:arrivals', ({ direction, data, origin, destination }) => {
+        dispatch(getArrivalsSuccess('bus', direction, data, origin, destination));
     });
 
-    socket.on('train:arrivals', ({ direction, data }) => {
-        console.table(data);
-        dispatch(getArrivalsSuccess('train', direction, data));
+    socket.on('train:arrivals', ({ direction, data, origin, destination }) => {
+        dispatch(getArrivalsSuccess('train', direction, data, origin, destination));
     });
 
     socket.on('dlr:error', (error) => {

diff --git a/src/scss/_styles.scss b/src/scss/_styles.scss
@@ -27,7 +27,7 @@ h2, h3 {
     margin: 10px;
 }
 
-.platform {
+.info {
     font-size: 0.8em;
     font-style: italic;
 }