Merge pull request #11 from geops/lucien/load_routes

Show loading bar on route request

Author: edellucien

src/Components/MapComponent/MapComponent.jsx

@@ -460,7 +460,11 @@ class MapComponent extends Component {
       currentMot,
       APIKey,
       onShowNotification,
+      onSetShowLoadingBar,
     } = this.props;
+
+    onSetShowLoadingBar(true);
+
     Object.keys(currentStopsGeoJSON).forEach(key => {
       if (currentStopsGeoJSON[key].features) {
         // If the current item is a point selected on the map, not a station.
@@ -487,6 +491,7 @@ class MapComponent extends Component {
     fetch(reqUrl, { signal })
       .then(response => response.json())
       .then(response => {
+        onSetShowLoadingBar(false);
         if (response.error) {
           onShowNotification("Couldn't find route", 'error');
           return;
@@ -567,6 +572,8 @@ const mapDispatchToProps = dispatch => {
       dispatch(actions.setClickLocation(clickLocation)),
     onShowNotification: (notificationMessage, notificationType) =>
       dispatch(actions.showNotification(notificationMessage, notificationType)),
+    onSetShowLoadingBar: showLoadingBar =>
+      dispatch(actions.setShowLoadingBar(showLoadingBar)),
   };
 };
 
@@ -576,6 +583,7 @@ MapComponent.propTypes = {
   stationSearchUrl: PropTypes.string.isRequired,
   onSetClickLocation: PropTypes.func.isRequired,
   onShowNotification: PropTypes.func.isRequired,
+  onSetShowLoadingBar: PropTypes.func.isRequired,
   onSetCurrentStops: PropTypes.func.isRequired,
   onSetCurrentStopsGeoJSON: PropTypes.func.isRequired,
   currentStops: propTypeCurrentStops.isRequired,

src/Components/RoutingMenu/RoutingMenu.jsx

@@ -20,6 +20,7 @@ import {
   setCurrentMot,
   showNotification,
   setIsFieldFocused,
+  setShowLoadingBar,
 } from '../../store/actions/Map';
 import './RoutingMenu.css';
 import {
@@ -138,6 +139,7 @@ function RoutingMenu({
 
   const clickLocation = useSelector(state => state.MapReducer.clickLocation);
   const currentStops = useSelector(state => state.MapReducer.currentStops);
+  const showLoadingBar = useSelector(state => state.MapReducer.showLoadingBar);
   const currentStopsGeoJSON = useSelector(
     state => state.MapReducer.currentStopsGeoJSON,
   );
@@ -156,7 +158,6 @@ function RoutingMenu({
   const [currentSearchResults, setCurrentSearchResults] = useState([]);
   const [searchMotOnly, setSearchMotOnly] = React.useState(true);
   const [focusedFieldIndex, setFocusedFieldIndex] = useState(0);
-  const [showLoadingBar, setShowLoadingBar] = useState(false);
   const [currentOtherMot, setCurrentOtherMot] = useState(undefined);
 
   useEffect(() => {
@@ -352,13 +353,13 @@ function RoutingMenu({
       updatedCurrentStops[fieldIndex] = '';
       setCurrentSearchResults([]);
       dispatch(setCurrentStops(updatedCurrentStops));
-      setShowLoadingBar(false);
+      dispatch(setShowLoadingBar(false));
       return;
     }
     const updatedCurrentStops = _.clone(currentStops);
     updatedCurrentStops[fieldIndex] = event.target.value;
     dispatch(setCurrentStops(updatedCurrentStops));
-    setShowLoadingBar(true);
+    dispatch(setShowLoadingBar(true));
 
     abortController.abort();
     abortController = new AbortController();
@@ -381,7 +382,7 @@ function RoutingMenu({
           dispatch(showNotification("Couldn't find stations", 'warning'));
         }
         setCurrentSearchResults(response.features);
-        setShowLoadingBar(false);
+        dispatch(setShowLoadingBar(false));
       })
       .catch(err => {
         if (err.name === 'AbortError') {

src/store/actions/Map.jsx

@@ -42,3 +42,10 @@ export const setIsFieldFocused = isFieldFocused => {
     isFieldFocused,
   };
 };
+
+export const setShowLoadingBar = showLoadingBar => {
+  return {
+    type: actionTypes.SET_SHOW_LOADING_BAR,
+    showLoadingBar,
+  };
+};

src/store/actions/actionTypes.js

@@ -4,3 +4,4 @@ export const SET_CURRENT_MOT = 'SET_CURRENT_MOT';
 export const SET_CLICK_LOCATION = 'SET_CLICK_LOCATION';
 export const SHOW_NOTIFICATION = 'SHOW_NOTIFICATION';
 export const SET_IS_FIELD_FOCUSED = 'SET_IS_FIELD_FOCUSED';
+export const SET_SHOW_LOADING_BAR = 'SET_SHOW_LOADING_BAR';

src/store/actions/index.js

@@ -5,4 +5,5 @@ export {
   setClickLocation,
   showNotification,
   setIsFieldFocused,
+  setShowLoadingBar,
 } from './Map';

src/store/reducers/Map.jsx

@@ -8,6 +8,7 @@ const initialState = {
   notificationMessage: '',
   notificationType: 'info',
   isFieldFocused: false,
+  showLoadingBar: false,
 };
 
 const setCurrentStops = (state, action) => {
@@ -71,6 +72,16 @@ const setIsFieldFocused = (state, action) => {
   };
 };
 
+const setShowLoadingBar = (state, action) => {
+  const updatedState = {
+    showLoadingBar: action.showLoadingBar,
+  };
+  return {
+    ...state,
+    ...updatedState,
+  };
+};
+
 const reducer = (state = initialState, action) => {
   switch (action.type) {
     case actionTypes.SET_CURRENT_STOPS:
@@ -85,6 +96,8 @@ const reducer = (state = initialState, action) => {
       return showNotification(state, action);
     case actionTypes.SET_IS_FIELD_FOCUSED:
       return setIsFieldFocused(state, action);
+    case actionTypes.SET_SHOW_LOADING_BAR:
+      return setShowLoadingBar(state, action);
     default:
       return state;
   }

src/store/reducers/reducer.test.js

@@ -12,6 +12,7 @@ describe('map reducer', () => {
       notificationMessage: '',
       notificationType: 'info',
       isFieldFocused: false,
+      showLoadingBar: false,
     });
   });