now saving and retrieving accounts from localstorage!

package.json

@@ -15,6 +15,7 @@
   "dependencies": {
     "bulma": "^0.3.1",
     "localforage": "^1.4.3",
+    "localforage-startswith": "^1.2.0",
     "vue": "^2.1.10",
     "vue-router": "^2.2.0",
     "vuex": "^2.1.2"

src/app/accounts/api.js

@@ -0,0 +1,31 @@
+import localforage from 'localforage';
+
+const ACCOUNT_NAMESPACE = 'ACCOUNT-';
+
+export const fetchAccounts = () => {
+  return localforage.startsWith(ACCOUNT_NAMESPACE).then((res) => {
+    return res;
+  });
+};
+
+export const saveAccount = (account) => {
+  return localforage.setItem(
+    ACCOUNT_NAMESPACE + account.id,
+    account
+  ).then((value) => {
+    return value;
+  }).catch((err) => {
+    console.log('oops! the account was too far gone, there was nothing we could do to save him ', err);
+  });
+};
+
+export const removeAccount = (account) => {
+  return localforage.removeItem(
+    ACCOUNT_NAMESPACE + account.id
+  ).then(() => {
+    return true;
+  }).catch((err) => {
+    console.log(err);
+    return false;
+  });
+};

src/app/accounts/components/AccountsListView.vue

@@ -29,9 +29,14 @@ export default {
     };
   },
 
+  mounted () {
+    this.loadAccounts();
+  },
+
   methods: {
     ...mapActions([
-      'deleteAccount'
+      'deleteAccount',
+      'loadAccounts'
     ]),
 
     confirmDeleteAccount (account) {

src/app/accounts/components/CreateEditAccount.vue

@@ -51,23 +51,26 @@ export default {
 
   mounted () {
     if ('accountId' in this.$route.params) {
-      let selectedAccount = this.getAccountById(this.$route.params.accountId);
-      if (selectedAccount) {
-        this.editing = true;
-        this.selectedAccount = {
-          name: selectedAccount.name,
-          category: selectedAccount.category,
-          id: selectedAccount.id
-        };
-      }
+      this.loadAccounts().then(() => {
+        let selectedAccount = this.getAccountById(this.$route.params.accountId);
+        if (selectedAccount) {
+          this.editing = true;
+          this.selectedAccount = {
+            name: selectedAccount.name,
+            category: selectedAccount.category,
+            id: selectedAccount.id
+          };
+        }
       // TODO: the object does not exist, how do we handle this scenario?
+      });
     }
   },
 
   methods: {
     ...mapActions([
       'addAccount',
-      'updateAccount'
+      'updateAccount',
+      'loadAccounts'
     ]),
 
     resetAndGo () {

src/app/accounts/vuex/actions.js

@@ -1,11 +1,32 @@
+import { guid } from '../../../utils';
+import { removeAccount, saveAccount, fetchAccounts } from '../api';
+
 export const addAccount = ({ commit }, data) => {
-  commit('ADD_ACCOUNT', { account: data });
+  let id = guid();
+  let account = Object.assign({ id: id }, data);
+  commit('ADD_ACCOUNT', {account: account});
+  saveAccount(account).then((value) => {
+    // we've saved the account, what now
+  });
 };
 
 export const updateAccount = ({ commit }, data) => {
-  commit('UPDATE_ACCOUNT', { account: data });
+  commit('UPDATE_ACCOUNT', {account: data});
+  saveAccount(data);
 };
 
 export const deleteAccount = ({ commit }, data) => {
   commit('DELETE_ACCOUNT', { account: data });
+  removeAccount(data);
+};
+
+export const loadAccounts = (state) => {
+  // loads accounts only if they are not already loaded
+  if (!state.accounts || Object.keys(state.accounts).length === 0) {
+    return fetchAccounts().then((res) => {
+      let accounts = {};
+      Object.keys(res).forEach((key) => { accounts[res[key].id] = res[key]; });
+      state.commit('LOAD_ACCOUNTS', accounts);
+    });
+  }
 };

src/app/accounts/vuex/mutations.js

@@ -1,10 +1,8 @@
 import Vue from 'vue';
-import { guid } from '../../../utils';
 
 export default {
   ADD_ACCOUNT (state, payload) {
-    let id = guid();
-    state.accounts[id] = Object.assign({ id: id }, payload.account);
+    state.accounts[payload.account.id] = payload.account;
   },
 
   UPDATE_ACCOUNT (state, payload) {
@@ -13,5 +11,9 @@ export default {
 
   DELETE_ACCOUNT (state, payload) {
     Vue.delete(state.accounts, payload.account.id);
+  },
+
+  LOAD_ACCOUNTS (state, payload) {
+    state.accounts = payload;
   }
 };

src/main.js

@@ -1,12 +1,18 @@
 // The Vue build version to load with the `import` command
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from 'vue';
+import localforage from 'localforage';
+require('localforage-startswith');
 import 'bulma/css/bulma.css';
 
 import { App } from './app';
 import router from './router';
 import store from './store';
 
+localforage.config({
+  name: 'budgeterbium'
+});
+
 /* eslint-disable no-new */
 new Vue({
   el: '#app',