Fix a bug in automatic refetch of reports after a given distance

src/components/Map.vue

@@ -23,6 +23,7 @@
 </template>
 
 <script>
+// TODO: Rotate the map according to user heading.
 // TODO: Map going outside of container + on resize ?
 import 'ol/ol.css';
 import Feature from 'ol/Feature';

src/store/actions.js

@@ -16,6 +16,7 @@ import {
     SET_CURRENT_MAP_CENTER,
     SET_CURRENT_MAP_ZOOM,
     SET_CURRENT_POSITION,
+    SET_LAST_REPORT_FETCHING_LOCATION,
     SET_LOCATION_ERROR,
     SET_LOCATION_WATCHER_ID,
     SET_SETTING,
@@ -36,6 +37,10 @@ export function fetchReports({ commit }) {
         });
 }
 
+export function setLastReportFetchingLocation({ commit }, { locationLatLng }) {
+    return commit(SET_LAST_REPORT_FETCHING_LOCATION, { locationLatLng });
+}
+
 export function downvote({ commit }, { id }) {
     // Hide details
     commit(SHOW_REPORT_DETAILS, { id: null, userAsked: null });

src/store/mutations-types.js

@@ -9,6 +9,7 @@ export const REMOVE_UNSENT_REPORT = 'REMOVE_UNSENT_REPORT';
 export const SET_CURRENT_MAP_CENTER = 'SET_CURRENT_MAP_CENTER';
 export const SET_CURRENT_MAP_ZOOM = 'SET_CURRENT_MAP_ZOOM';
 export const SET_CURRENT_POSITION = 'SET_CURRENT_POSITION';
+export const SET_LAST_REPORT_FETCHING_LOCATION = 'SET_LAST_REPORT_FETCHING_LOCATION';
 export const SET_LOCATION_ERROR = 'SET_LOCATION_ERROR';
 export const SET_LOCATION_WATCHER_ID = 'SET_LOCATION_WATCHER_ID';
 export const SET_SETTING = 'SET_SETTING';

src/store/mutations.js

@@ -91,6 +91,7 @@ export const initialState = {
         gpx: [],
         watcherID: null,
     },
+    lastReportFetchingLocation: [null, null],
     map: {
         center: [null, null],
         zoom: null,
@@ -164,6 +165,19 @@ export const mutations = {
     },
     [types.SET_CURRENT_POSITION](state, { currentLocation }) {
         state.location.gpx.push(currentLocation);
+        if (
+            !state.lastReportFetchingLocation
+            || !state.lastReportFetchingLocation[0]
+            || !state.lastReportFetchingLocation[1]
+        ) {
+            state.lastReportFetchingLocation = [
+                currentLocation.latitude,
+                currentLocation.longitude,
+            ];
+        }
+    },
+    [types.SET_LAST_REPORT_FETCHING_LOCATION](state, { locationLatLng }) {
+        state.lastReportFetchingLocation = locationLatLng;
     },
     [types.SET_LOCATION_ERROR](state, { error }) {
         Vue.set(state.location, 'error', error);

src/views/Map.vue

@@ -61,14 +61,20 @@ function handlePositionError(error) {
 }
 
 function setPosition(position) {
-    const lastLocation = store.getters.getLastLocation;
+    const lastFetchingLocation = store.state.lastReportFetchingLocation;
-    if (lastLocation !== null) {
+    if (
-        // TODO: Should not be lastLocation
+        lastFetchingLocation
+        && lastFetchingLocation[0] !== null
+        && lastFetchingLocation[1] !== null
+    ) {
         const distanceFromPreviousPoint = distance(
-            [lastLocation.latitude, lastLocation.longitude],
+            [lastFetchingLocation[0], lastFetchingLocation[1]],
             [position.coords.latitude, position.coords.longitude],
         );
         if (distanceFromPreviousPoint > constants.UPDATE_REPORTS_DISTANCE_THRESHOLD) {
+            store.dispatch('setLastReportFetchingLocation', {
+                locationLatLng: [position.coords.latitude, position.coords.longitude],
+            });
             store.dispatch('fetchReports');
         }
     }