feat: Collection changes are synced to IndexedDB

renderer/providers/Store/actions.js

@@ -14,6 +14,8 @@ const ADD_REQUEST = "ADD_REQUEST";
 const ADD_NEW_HTTP_REQUEST = "ADD_NEW_HTTP_REQUEST";
 const ADD_NEW_GQL_REQUEST = "ADD_NEW_GQL_REQUEST";
 const IDB_CONNECTION_READY = "IDB_CONNECTION_READY";
+const IDB_COLLECTIONS_SYNC_STARTED = "IDB_COLLECTIONS_SYNC_STARTED";
+const IDB_COLLECTIONS_SYNC_ERROR = "IDB_COLLECTIONS_SYNC_ERROR";
 
 export default {
   SIDEBAR_COLLECTION_CLICK,
@@ -31,5 +33,7 @@ export default {
   ADD_REQUEST,
   ADD_NEW_HTTP_REQUEST,
   ADD_NEW_GQL_REQUEST,
-  IDB_CONNECTION_READY
+  IDB_CONNECTION_READY,
+  IDB_COLLECTIONS_SYNC_STARTED,
+  IDB_COLLECTIONS_SYNC_ERROR
 };

renderer/providers/Store/idb.js

@@ -1,3 +1,5 @@
+import isArray from 'lodash/isArray';
+
 export const saveCollectionToIdb = (connection, collection) => {
   return new Promise((resolve, reject) => {
     connection
@@ -5,7 +7,13 @@ export const saveCollectionToIdb = (connection, collection) => {
         let tx = db.transaction(`collection`, 'readwrite');
         let collectionStore = tx.objectStore('collection');
 
+        if(isArray(collection)) {
+          for(let c of collection) {
+            collectionStore.put(c);
+          }
+        } else {
           collectionStore.put(collection);
+        }
 
         resolve();
       })

renderer/providers/Store/index.js

@@ -1,10 +1,12 @@
-import React, { useEffect, useContext, useReducer, createContext } from 'react';
+import React, { useState, useEffect, useContext, useReducer, createContext } from 'react';
+import map from 'lodash/map';
+import filter from 'lodash/filter';
 import reducer from './reducer';
 import useIdb from './useIdb';
 import { sendRequest } from '../../network';
 import { nanoid } from 'nanoid';
 import actions from './actions';
-import {getCollectionsFromIdb} from './idb';
+import {getCollectionsFromIdb, saveCollectionToIdb} from './idb';
 
 export const StoreContext = createContext();
 
@@ -117,14 +119,18 @@ const initialState = {
   collections: [],
 	activeRequestTabId: null,
 	requestQueuedToSend: null,
-  requestTabs: []
+	requestTabs: [],
+	collectionsToSyncToIdb: []
 };
 
 export const StoreProvider = props => {
 	const [state, dispatch] = useReducer(reducer, initialState);
+	const [collectionsSyncingToIdb, setCollectionsSyncingToIdb] = useState(false);
 
 	const {
-		idbConnection
+		collections,
+		idbConnection,
+		collectionsToSyncToIdb
 	} = state;
 	
 	useEffect(() => {
@@ -151,6 +157,34 @@ export const StoreProvider = props => {
 		}
 	}, [idbConnection]);
 
+	useEffect(() => {
+		if(collectionsSyncingToIdb) {
+			return;
+		}
+		if(collectionsToSyncToIdb && collectionsToSyncToIdb.length) {
+			setCollectionsSyncingToIdb(true);
+			const _collections = filter(collections, (c) => {
+				return collectionsToSyncToIdb.indexOf(c.uid) > -1;
+			});
+			dispatch({
+				type: actions.IDB_COLLECTIONS_SYNC_STARTED
+			});
+			saveCollectionToIdb(idbConnection, _collections)
+				.then(() => {
+					setCollectionsSyncingToIdb(false);
+				})
+				.catch((err) => {
+					setCollectionsSyncingToIdb(false);
+					dispatch({
+						type: actions.IDB_COLLECTIONS_SYNC_ERROR,
+						collectionUids: map(collections, (c) => c.uid)
+					});
+					console.log(err);
+				});
+			
+		}
+	}, [collectionsToSyncToIdb]);
+
 	useIdb(dispatch);
 
   return <StoreContext.Provider value={[state, dispatch]} {...props} />;

renderer/providers/Store/reducer.js

@@ -1,6 +1,7 @@
 import produce from 'immer';
 import {nanoid} from 'nanoid';
 import find from 'lodash/find';
+import union from 'lodash/union';
 import filter from 'lodash/filter';
 import last from 'lodash/last';
 import actions from './actions';
@@ -21,9 +22,20 @@ const reducer = (state, action) => {
       });
     }
 
+    case actions.IDB_COLLECTIONS_SYNC_STARTED: {
+      return produce(state, (draft) => {
+        draft.collectionsToSyncToIdb = [];
+      });
+    }
+
+    case actions.IDB_COLLECTIONS_SYNC_ERROR: {
+      return produce(state, (draft) => {
+        draft.collectionsToSyncToIdb = union(draft.collectionsToSyncToIdb, action.collectionUids);
+      });
+    }
+
     case actions.LOAD_COLLECTIONS_FROM_IDB: {
       return produce(state, (draft) => {
-        console.log(action.collections);
         draft.collections = action.collections;
       });
     }
@@ -71,7 +83,6 @@ const reducer = (state, action) => {
     case actions.SIDEBAR_COLLECTION_ADD_FOLDER: {
       return produce(state, (draft) => {
         const collection = find(draft.collections, (c) => c.uid === action.collectionUid);
-        console.log(collection.current.items);
 
         if(collection) {
           collection.current.items.push({
@@ -80,6 +91,7 @@ const reducer = (state, action) => {
             "depth": 1,
             "items": []
           });
+          draft.collectionsToSyncToIdb.push(collection.uid);
         }
       });
     }