Start working on a way to resend unsent reports

src/components/ReportDialog/index.vue

@@ -83,13 +83,16 @@ export default {
         },
         saveReport(type) {
             this.isActive = false;
-            return this.$store.dispatch('saveReport', {
+            const report = {
                 type,
                 lat: this.latLng[0],
                 lng: this.latLng[1],
-            }).catch((exc) => {
+            };
+            return this.$store.dispatch('saveReport', report)
+                .catch((exc) => {
                     console.error(exc);
                     this.error = exc;
+                    this.$store.dispatch('saveUnsentReport', { report });
                 });
         },
     },

src/store/actions.js

@@ -9,6 +9,7 @@ import {
     IS_DONE_LOADING,
     IS_LOADING,
     PUSH_REPORT,
+    PUSH_UNSENT_REPORT,
     SET_CURRENT_MAP_CENTER,
     SET_CURRENT_MAP_ZOOM,
     SET_CURRENT_POSITION,
@@ -43,6 +44,10 @@ export function saveReport({ commit }, { type, lat, lng }) {
         .finally(() => commit(IS_DONE_LOADING));
 }
 
+export function saveUnsentReport({ commit }, { report }) {
+    commit(PUSH_UNSENT_REPORT, { report });
+}
+
 export function hideReportDetails({ commit }) {
     return commit(SHOW_REPORT_DETAILS, { id: null, userAsked: null });
 }

src/store/mutations-types.js

@@ -2,6 +2,7 @@ export const INTRO_WAS_SEEN = 'INTRO_WAS_SEEN';
 export const IS_DONE_LOADING = 'IS_DONE_LOADING';
 export const IS_LOADING = 'IS_LOADING';
 export const PUSH_REPORT = 'PUSH_REPORT';
+export const PUSH_UNSENT_REPORT = 'PUSH_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';

src/store/mutations.js

@@ -6,7 +6,7 @@ import { storageAvailable } from '@/tools';
 import { TILE_SERVERS, DEFAULT_TILE_SERVER } from '@/constants';
 import * as types from './mutations-types';
 
-function loadSettingFromStorage(name) {
+function loadDataFromStorage(name) {
     try {
         const value = localStorage.getItem(name);
         if (value) {
@@ -14,21 +14,27 @@ function loadSettingFromStorage(name) {
         }
         return null;
     } catch (e) {
-        console.error(`Unable to load setting ${name}: ${e}.`);
+        console.error(`Unable to load data from storage using key ${name}: ${e}.`);
         return null;
     }
 }
 
+// Load unsent reports from storage
+let unsentReports = null;
+if (storageAvailable('localStorage')) {
+    unsentReports = loadDataFromStorage('unsentReports');
+}
+
 // Load settings from storage
 let locale = null;
 let preventSuspend = null;
 let skipOnboarding = null;
 let tileServer = null;
 if (storageAvailable('localStorage')) {
-    preventSuspend = loadSettingFromStorage('preventSuspend');
-    skipOnboarding = loadSettingFromStorage('skipOnboarding');
+    preventSuspend = loadDataFromStorage('preventSuspend');
+    skipOnboarding = loadDataFromStorage('skipOnboarding');
 
-    tileServer = loadSettingFromStorage('tileServer');
+    tileServer = loadDataFromStorage('tileServer');
     if (!TILE_SERVERS[tileServer]) {
         tileServer = null;
     }
@@ -71,6 +77,7 @@ export const initialState = {
         userAsked: null,
     },
     reports: [],
+    unsentReports: unsentReports || [],
     settings: {
         locale: locale || 'en',
         preventSuspend: preventSuspend || true,
@@ -97,6 +104,12 @@ export const mutations = {
             Vue.set(state.reports, reportIndex, report);
         }
     },
+    [types.PUSH_UNSENT_REPORT](state, { report }) {
+        state.unsentReports.push(report);
+        if (storageAvailable('localStorage')) {
+            localStorage.setItem('unsentReports', JSON.stringify(state.unsentReports));
+        }
+    },
     [types.SET_CURRENT_MAP_CENTER](state, { center }) {
         Vue.set(state.map, 'center', center);
     },