refactor: redux migration - load collections from idb

renderer/components/Sidebar/Collections/index.js

@@ -1,12 +1,9 @@
 import React from 'react';
-import { useStore } from 'providers/Store';
+import { useSelector } from 'react-redux';
 import Collection from './Collection';
 
 const Collections = () => {
-  const [store, storeDispatch] = useStore();
-  const {
-    collections
-  } = store;
+  const collections = useSelector((state) => state.collections.collections);
 
   return (
     <div className="mt-4 flex flex-col">

renderer/jsconfig.json

@@ -7,7 +7,8 @@
       "components/*": ["src/components/*"],
       "api/*": ["src/api/*"],
       "pageComponents/*": ["src/pageComponents/*"],
-      "providers/*": ["src/providers/*"]
+      "providers/*": ["src/providers/*"],
+      "utils/*": ["src/utils/*"]
     }
   },
   "exclude": ["node_modules", "dist"]

renderer/providers/App/useIdb.js

@@ -1,6 +1,7 @@
 import { useEffect } from 'react';
 import { openDB } from 'idb';
 import { idbConnectionReady } from 'providers/ReduxStore/slices/app'
+import { loadCollectionsFromIdb } from 'providers/ReduxStore/slices/collections'
 import { useDispatch } from 'react-redux';
 
 const useIdb = () => {
@@ -22,6 +23,7 @@ const useIdb = () => {
       .then(() => {
         window.__idb = connection;
         dispatch(idbConnectionReady());
+        dispatch(loadCollectionsFromIdb());
       })
       .catch((err) => console.log(err));
   }, []);

renderer/providers/ReduxStore/index.js

@@ -1,9 +1,11 @@
 import { configureStore } from '@reduxjs/toolkit';
 import appReducer from './slices/app';
+import collectionsReducer from './slices/collections';
 
 export const store = configureStore({
   reducer: {
-    app:appReducer
+    app: appReducer,
+    collections: collectionsReducer
   }
 });
 

renderer/providers/ReduxStore/slices/collections.js

@@ -0,0 +1,26 @@
+import { createSlice } from '@reduxjs/toolkit'
+import { getCollectionsFromIdb } from 'utils/idb';
+
+const initialState = {
+  collections: []
+};
+
+export const collectionsSlice = createSlice({
+  name: 'app',
+  initialState,
+  reducers: {
+    loadCollections: (state, action) => {
+      state.collections = action.payload;
+    }
+  }
+});
+
+export const { loadCollections } = collectionsSlice.actions;
+
+export const loadCollectionsFromIdb = () => (dispatch) => {
+  getCollectionsFromIdb(window.__idb)
+    .then((collections) => dispatch(loadCollections(collections)))
+    .catch((err) => console.log(err));
+};
+
+export default collectionsSlice.reducer;

renderer/utils/idb/index.js

@@ -0,0 +1,41 @@
+import isArray from 'lodash/isArray';
+
+export const saveCollectionToIdb = (connection, collection) => {
+  return new Promise((resolve, reject) => {
+    connection
+      .then((db) => {
+        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();
+      })
+      .catch((err) => reject(err));
+  });
+};
+
+export const getCollectionsFromIdb = (connection) => {
+  return new Promise((resolve, reject) => {
+    connection
+      .then((db) => {
+        let tx = db.transaction('collection');
+        let collectionStore = tx.objectStore('collection');
+        return collectionStore.getAll();
+      })
+      .then((collections) => {
+        if(!Array.isArray(collections)) {
+          return new Error('IDB Corrupted');
+        }
+
+        return resolve(collections);
+      })
+      .catch((err) => reject(err));
+  });
+};