Store settings in store, fix #12

src/i18n/index.js

@@ -1,14 +1,9 @@
-import moment from 'moment';
 import Vue from 'vue';
 import VueI18n from 'vue-i18n';
 
-import { storageAvailable } from '@/tools';
-
 import en from './en';
 import fr from './fr';
 
-Vue.use(VueI18n);
-
 export function getBrowserLocales() {
     let langs = [];
 
@@ -34,37 +29,13 @@ export function getBrowserLocales() {
     return locales;
 }
 
+Vue.use(VueI18n);
+
 export const messages = {
     en,
     fr,
 };
 
-let locale = null;
-if (storageAvailable('localStorage')) {
-    locale = localStorage.getItem('i18nSetting');
-    if (!messages[locale]) {
-        locale = null;
-    }
-} else {
-    // Get best matching locale from browser
-    const locales = getBrowserLocales();
-    for (let i = 0; i < locales.length; i += 1) {
-        if (messages[locales[i]]) {
-            locale = locales[i];
-            break; // Break at first matching locale
-        }
-    }
-}
-if (!locale) {
-    locale = 'en'; // Safe default
-}
-
-if (locale) {
-    // Set moment locale
-    moment.locale(locale);
-}
-
 export default new VueI18n({
-    locale,
     messages,
 });

src/main.js

@@ -14,6 +14,9 @@ import i18n from './i18n';
 import router from './router';
 import store from './store';
 
+// Ensure locale is correctly set from the store value
+store.dispatch('setLocale', store.state.settings.locale);
+
 Vue.use(Vuetify);
 
 Vue.component('v-lmap', Vue2Leaflet.LMap);

src/store/actions.js

@@ -1,5 +1,16 @@
+import moment from 'moment';
+
 import * as api from '@/api';
-import { IS_LOADING, IS_DONE_LOADING, PUSH_REPORT, SHOW_REPORT_DETAILS, STORE_REPORTS } from './mutations-types';
+import i18n from '@/i18n';
+
+import {
+    IS_LOADING,
+    IS_DONE_LOADING,
+    PUSH_REPORT,
+    SET_SETTING,
+    SHOW_REPORT_DETAILS,
+    STORE_REPORTS,
+} from './mutations-types';
 
 export function fetchReports({ commit }) {
     commit(IS_LOADING);
@@ -28,3 +39,16 @@ export function saveReport({ commit }, { type, lat, lng }) {
 export function showReportDetails({ commit }, id) {
     return commit(SHOW_REPORT_DETAILS, { id });
 }
+
+export function setLocale({ commit }, locale) {
+    // Set global Vue-i18n locale
+    i18n.locale = locale;
+    // Set moment locale
+    moment.locale(locale);
+    // Commit setting into the store
+    return commit(SET_SETTING, { setting: 'locale', value: locale });
+}
+
+export function setSetting({ commit }, { setting, value }) {
+    return commit(SET_SETTING, { setting, value });
+}

src/store/mutations-types.js

@@ -1,5 +1,6 @@
 export const IS_LOADING = 'IS_LOADING';
 export const IS_DONE_LOADING = 'IS_DONE_LOADING';
 export const PUSH_REPORT = 'PUSH_REPORT';
+export const SET_SETTING = 'SET_SETTING';
 export const SHOW_REPORT_DETAILS = 'SHOW_REPORT_DETAILS';
 export const STORE_REPORTS = 'STORE_REPORTS';

src/store/mutations.js

@@ -1,11 +1,45 @@
+import moment from 'moment';
 import Vue from 'vue';
 
+import { messages, getBrowserLocales } from '@/i18n';
+import { storageAvailable } from '@/tools';
 import * as types from './mutations-types';
 
+// Load settings from storage
+let locale = null;
+let preventSuspend = null;
+if (storageAvailable('localStorage')) {
+    preventSuspend = localStorage.getItem('preventSuspend');
+    if (preventSuspend) {
+        preventSuspend = JSON.parse(preventSuspend);
+    }
+
+    locale = localStorage.getItem('locale');
+    if (!messages[locale]) {
+        locale = null;
+    }
+    if (!locale) {
+        // Get best matching locale from browser
+        const locales = getBrowserLocales();
+        for (let i = 0; i < locales.length; i += 1) {
+            if (messages[locales[i]]) {
+                locale = locales[i];
+                break; // Break at first matching locale
+            }
+        }
+    }
+    // Set moment locale
+    moment.locale(locale);
+}
+
 export const initialState = {
     isLoading: false,
     reportDetailsID: null,
     reports: [],
+    settings: {
+        locale: locale || 'en',
+        preventSuspend: preventSuspend || true,
+    },
 };
 
 export const mutations = {
@@ -15,6 +49,12 @@ export const mutations = {
     [types.IS_DONE_LOADING](state) {
         state.isLoading = false;
     },
+    [types.SET_SETTING](state, { setting, value }) {
+        if (storageAvailable('localStorage')) {
+            localStorage.setItem(setting, value);
+        }
+        state.settings[setting] = value;
+    },
     [types.SHOW_REPORT_DETAILS](state, { id }) {
         state.reportDetailsID = id;
     },

src/views/Settings.vue

@@ -6,7 +6,7 @@
                 <form>
                     <v-select
                         :items="i18nItems"
-                        v-model="i18nSelect"
+                        v-model="locale"
                         :label="$t('settings.locale')"
                         required
                         ></v-select>
@@ -24,34 +24,20 @@
 </template>
 
 <script>
-import moment from 'moment';
-
 import { messages } from '@/i18n';
-import { storageAvailable } from '@/tools';
 
 export default {
     data() {
-        let preventSuspend = localStorage.getItem('preventSuspend');
-        if (preventSuspend) {
-            preventSuspend = JSON.parse(preventSuspend);
-        } else {
-            preventSuspend = true;
-        }
         return {
             i18nItems: Object.keys(messages),
-            i18nSelect: this.$i18n.locale,
-            preventSuspend,
+            locale: this.$store.state.settings.locale,
+            preventSuspend: this.$store.state.settings.preventSuspend,
         };
     },
     methods: {
         submit() {
-            if (storageAvailable('localStorage')) {
-                localStorage.setItem('i18nSetting', this.i18nSelect);
-                localStorage.setItem('preventSuspend', JSON.stringify(this.preventSuspend));
-            }
-            this.$i18n.locale = this.i18nSelect;
-            // Set moment locale
-            moment.locale(this.i18nSelect);
+            this.$store.dispatch('setLocale', this.locale);
+            this.$store.dispatch('setSetting', { setting: 'preventSuspend', value: this.preventSuspend });
         },
     },
 };