Initial version

src/components/settings/settings.js

@@ -42,6 +42,10 @@ const settings = {
   computed: {
     user () {
       return this.$store.state.users.currentUser
+    },
+    currentSaveStateNotice () {
+      console.log(this.$store.state.config._internal.currentSaveStateNotice && this.$store.state.config._internal.currentSaveStateNotice.error)
+      return this.$store.state.config._internal.currentSaveStateNotice
     }
   },
   watch: {

src/components/settings/settings.vue

@@ -1,8 +1,20 @@
 <template>
 <div class="settings panel panel-default">
   <div class="panel-heading">
+    <div class="title">
       {{$t('settings.settings')}}
     </div>
+
+    <template v-if="currentSaveStateNotice">
+      <div @click.prevent class="alert error" v-if="currentSaveStateNotice.error">
+        Errr
+      </div>
+
+      <div @click.prevent class="alert success" v-if="!currentSaveStateNotice.error">
+        Succ
+      </div>
+    </template>
+  </div>
   <div class="panel-body">
     <tab-switcher>
       <div :label="$t('settings.general')" >

src/lib/persisted_state.js

@@ -1,7 +1,7 @@
 import merge from 'lodash.merge'
 import objectPath from 'object-path'
 import localforage from 'localforage'
-import { throttle, each } from 'lodash'
+import { each } from 'lodash'
 
 let loaded = false
 
@@ -12,18 +12,17 @@ const defaultReducer = (state, paths) => (
   }, {})
 )
 
+const saveImmedeatelyActions = [
+  'markNotificationsAsSeen',
+  'clearCurrentUser',
+  'setCurrentUser',
+  'setOption'
+]
+
 const defaultStorage = (() => {
   return localforage
 })()
 
-const defaultSetState = (key, state, storage) => {
-  if (!loaded) {
-    console.log('waiting for old state to be loaded...')
-  } else {
-    return storage.setItem(key, state)
-  }
-}
-
 export default function createPersistedState ({
   key = 'vuex-lz',
   paths = [],
@@ -31,7 +30,14 @@ export default function createPersistedState ({
     let value = storage.getItem(key)
     return value
   },
-  setState = throttle(defaultSetState, 60000),
+  setState = (key, state, storage) => {
+    if (!loaded) {
+      console.log('waiting for old state to be loaded...')
+      return Promise.resolve()
+    } else {
+      return storage.setItem(key, state)
+    }
+  },
   reducer = defaultReducer,
   storage = defaultStorage,
   subscriber = store => handler => store.subscribe(handler)
@@ -72,7 +78,22 @@ export default function createPersistedState ({
 
     subscriber(store)((mutation, state) => {
       try {
+        if (saveImmedeatelyActions.includes(mutation.type)) {
           setState(key, reducer(state, paths), storage)
+            .then(success => {
+              if (typeof success !== 'undefined') {
+                if (mutation.type === 'setOption') {
+                  store.dispatch('settingsSaved', { success })
+                }
+              }
+            }, error => {
+              if (mutation.type === 'setOption') {
+                store.dispatch('settingsSaved', { error })
+              }
+            })
+        } else {
+          console.warn(`Not saving to localStorage for: ${mutation.type}`)
+        }
       } catch (e) {
         console.log("Couldn't persist state:")
         console.log(e)

src/modules/config.js

@@ -26,7 +26,11 @@ const defaultState = {
   },
   muteWords: [],
   highlight: {},
-  interfaceLanguage: browserLocale
+  interfaceLanguage: browserLocale,
+  _internal: {
+    currentSaveStateNotice: {},
+    noticeClearTimeout: null
+  }
 }
 
 const config = {
@@ -42,6 +46,18 @@ const config = {
       } else {
         del(state.highlight, user)
       }
+    },
+    settingsSaved (state, { success, error }) {
+      if (success) {
+        if (state.noticeClearTimeout) {
+          clearTimeout(state.noticeClearTimeout)
+        }
+        set(state._internal, 'currentSaveStateNotice', { error: false, data: success })
+        set(state._internal, 'noticeClearTimeout',
+            setTimeout(() => del(state._internal, 'currentSaveStateNotice'), 2000))
+      } else {
+        set(state._internal, 'currentSaveStateNotice', { error: true, errorData: error })
+      }
     }
   },
   actions: {
@@ -51,6 +67,9 @@ const config = {
     setHighlight ({ commit, dispatch }, { user, color, type }) {
       commit('setHighlight', {user, color, type})
     },
+    settingsSaved ({ commit, dispatch }, { success, error }) {
+      commit('settingsSaved', { success, error })
+    },
     setOption ({ commit, dispatch }, { name, value }) {
       commit('setOption', {name, value})
       switch (name) {