Debugging Vuex store's actions for saving translation to the store state as well as saving to indexDB

src/store/actions.js

@@ -0,0 +1,99 @@
+import idb from '../api/idb';
+import getbible  from  '../api/getbible_v2_api';
+
+export default {
+    async add({commit}, payload){
+
+    // payload = {
+    //   abbreviation: '',
+    //   saved_translations:{
+    //     name: 'saved_translation',
+    //     putObj: {}
+    //   }
+    // }
+      const response = await getbible.get_translation(payload.abbreviation).catch(err => console.log(err))
+      // console.log(response);
+      if(!response) return;
+
+      const data = await response.json().catch(err => console.log(err))
+      // console.log(JSON.parse(data));
+      if(!data) return;
+      let dataString = JSON.stringify(data)
+      let savet = JSON.stringify(payload.saved_translations.putObj)
+      // console.log(dataString);
+      payload.translation = {
+        name: 'translations',
+        putObj: JSON.parse(dataString),
+      }
+      payload.saved_translations.putObj = JSON.parse(savet)
+      let success = false
+    //save translation in indexdb
+    success =  await idb.save(payload.translation).catch(err => console.log(err));
+    
+    if(!success)
+      return;
+
+    // then save the newly added translation details to the list of saved tr...s
+    success = await idb.save(payload.saved_translations).catch(err => console.log(err));
+
+    if(!success) return;
+
+      commit('add_translation', payload);
+    },
+    async remove({commit}, payload){
+      // payload example
+      // payload = {
+      //   translation:{
+      //     name: 'translation',
+      //     keyPath: 'aksjv'
+      //   },
+      //   saved_translations:{
+      //     name: 'saved_translation',
+      //     keyPath: "askjv"
+      //   }
+      // }
+      const {translation, saved_translations} = payload
+      let success = false
+      //save translation in indexdb
+      success =  await idb.delete(translation).catch(err => console.log(err));
+
+      if(!success)
+        return;
+
+      // then save the newly added translation details to the list of saved tr...s
+      success = await idb.delete(saved_translations).catch(err => console.log(err));
+
+      
+      if(!success) return;
+
+      commit('REMOVE_TRANSLATION', payload);
+    },
+   async  initialise({commit}){
+        let saved_translations = await idb.getAll('saved_translations').catch(err => console.log(err));
+        
+        if(!saved_translations) saved_translations = [];
+        
+  
+          let translations = await idb.getAll('translations').catch(err => console.log(err));
+          
+          if(!translations || !translations.length) translations = [{}];
+          
+    commit('initialise', {saved_translations, translation: translations[0]})
+        
+   
+
+    },
+    set_chapter({commit}, payload) {
+        commit('set_chapter', payload)
+    },
+    set_book({commit}, payload) {
+        commit('set_book', payload)
+    },
+    async set_translation({commit}, payload){
+        let translation = await idb.get('translations', payload.selectedTranslation).catch(err => console.log(err));
+        
+        if(!translation) return;
+        payload.translation = translation
+        commit('set_translation', payload)
+    }
+}

src/store/mutations.js

@@ -0,0 +1,68 @@
+export default {
+    add_translation (state, payload ) {
+
+     // payload = {
+     //   translation:{
+     //     name: 'translation',
+     //     putObj: {}
+     //   },
+     //   saved_translations:{
+     //     name: 'saved_translation',
+     //     putObj: {}
+     //   }
+     // }
+     
+
+     state.saved_translations.push(payload.saved_translations.putObj)
+       
+   },
+    REMOVE_TRANSLATION (state, payload ) {
+     // payload example
+       // payload = {
+       //   translation:{
+       //     name: 'translation',
+       //     keyPath: 'aksjv'
+       //   },
+       //   saved_translations:{
+       //     name: 'saved_translation',
+       //     keyPath: "askjv"
+       //   }
+       // }
+    
+     
+     const {keyPath} = payload.saved_translations;
+
+     state.saved_translations = state.saved_translations.filter(tr => tr.abbreviation !== keyPath)
+
+     if(state.in_memory_translation.abbreviation === keyPath){
+       state.in_memory_translation = {}
+       state.selected = {
+         translation: null,
+         book: null,
+         chapter: null
+       }
+     }
+       
+   }, 
+   // save_settings(state, settings){
+   //   state.settings =  settings;
+   //   localStorage.setItem('settings', JSON.stringify(settings))
+   // },
+   // add_search(state, search){
+   //     state.search = search
+   // }
+   initialise(state, payload){
+     state.saved_translations = payload.saved_translations
+     state.in_memory_translation = payload.translation
+   },
+   set_chapter(state, payload){
+      state.selected.chapter = payload;
+   },
+   set_book(state, payload){
+     state.selected.book =  payload;
+   },
+   set_translation(state, payload){
+    state.selected.translation = payload.selectedTranslation;
+    state.in_memory_translation = payload.translation;
+   }
+ }