Handled case of late request

mapbox · Jan 16, 2024 · 6b80678 · 6b80678
1 parent bfca411
commit 6b80678
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 5 deletions.
diff --git a/src/actions/index.js b/src/actions/index.js
@@ -25,6 +25,15 @@ function destinationPoint(coordinates) {
   };
 }
 
+function directionsRequestStart(request) {
+  return dispatch => {
+    dispatch({
+      type: types.DIRECTIONS_REQUEST_START,
+      request
+    })
+  }
+}
+
 function setDirections(directions) {
   return dispatch => {
     dispatch({
@@ -51,10 +60,15 @@ function setHoverMarker(feature) {
 
 function fetchDirections() {
   return (dispatch, getState) => {
-    const { api, accessToken, routeIndex, profile, alternatives, congestion, destination, language, exclude } = getState();
+    const { api, accessToken, routeIndex, profile, alternatives, congestion, destination, language, exclude, fetchDirectionsRequest } = getState();
     // if there is no destination set, do not make request because it will fail
     if (!(destination && destination.geometry)) return;
 
+    if (fetchDirectionsRequest) {
+      fetchDirectionsRequest.abort();
+    }
+
+
     const query = buildDirectionsQuery(getState);
 
     // Request params
@@ -71,6 +85,8 @@ function fetchDirections() {
     const request = new XMLHttpRequest();
     request.open('GET', `${api}${profile}/${query}.json?${options.join('&')}`, true);
 
+    dispatch(directionsRequestStart(request))
+
     request.onload = () => {
       if (request.status >= 200 && request.status < 400) {
         var data = JSON.parse(request.responseText);
@@ -189,7 +205,13 @@ export function clearOrigin() {
 }
 
 export function clearDestination() {
-  return dispatch => {
+  return (dispatch, getState) => {
+    const { fetchDirectionsRequest } = getState();
+
+    if (fetchDirectionsRequest) {
+      fetchDirectionsRequest.abort();
+    }
+
     dispatch({
       type: types.DESTINATION_CLEAR
     });

diff --git a/src/constants/action_types.js b/src/constants/action_types.js
@@ -1,9 +1,9 @@
 export const DESTINATION = 'DESTINATION';
 export const DESTINATION_CLEAR = 'DESTINATION_CLEAR';
 export const DESTINATION_QUERY = 'DESTINATION_QUERY';
-export const DESTINATION_QUERY_START = 'DESTINATION_QUERY_START';
 export const DESTINATION_FROM_COORDINATES = 'DESTINATION_FROM_COORDINATES';
 export const DIRECTIONS = 'DIRECTIONS';
+export const DIRECTIONS_REQUEST_START = 'DIRECTIONS_REQUEST_START';
 export const DIRECTIONS_PROFILE = 'DIRECTIONS_PROFILE';
 export const EVENTS = 'EVENTS';
 export const ERROR = 'ERROR';

diff --git a/src/reducers/index.js b/src/reducers/index.js
@@ -46,6 +46,7 @@ const initialState = {
 
   // Directions data
   directions: [],
+  fetchDirectionsRequest: null,
   routeIndex: 0, 
   routePadding: 80
 };
@@ -118,10 +119,15 @@ function data(state = initialState, action) {
       waypoints: [],
       directions: []
     });
-
+
+  case types.DIRECTIONS_REQUEST_START:
+    return Object.assign({}, state, {
+      fetchDirectionsRequest: action.request
+    });
   case types.DIRECTIONS:
     return Object.assign({}, state, {
-      directions: action.directions
+      directions: action.directions,
+      fetchDirectionsRequest: null
     });
 
   case types.ROUTE_INDEX: