refactor: redux migration - idb readiness

renderer/pages/_app.js

@@ -1,6 +1,7 @@
 import { StoreProvider } from 'providers/Store';
 import { HotkeysProvider } from 'providers/Hotkeys';
 import { AuthProvider } from 'providers/Auth';
+import { AppProvider } from 'providers/App';
 import ReduxStore from 'providers/ReduxStore';
 import { Provider } from 'react-redux';
 
@@ -25,11 +26,13 @@ function MyApp({ Component, pageProps }) {
     <SafeHydrate>
       <AuthProvider>
         <Provider store={ReduxStore}>
-          <StoreProvider>
+          <AppProvider>
-            <HotkeysProvider>
+            <StoreProvider>
-              <Component {...pageProps} />
+              <HotkeysProvider>
-            </HotkeysProvider>
+                <Component {...pageProps} />
-          </StoreProvider>
+              </HotkeysProvider>
+            </StoreProvider>
+          </AppProvider>
         </Provider>
       </AuthProvider>
     </SafeHydrate>

renderer/providers/App/index.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import useIdb from './useIdb';
+
+export const AppContext = React.createContext();
+
+export const AppProvider = props => {
+  // boot idb
+  useIdb();
+
+  return (
+    <AppContext.Provider {...props} value='appProvider'>
+      {props.children}
+    </AppContext.Provider>
+  );
+};
+
+export default AppProvider;

renderer/providers/App/useIdb.js

@@ -0,0 +1,30 @@
+import { useEffect } from 'react';
+import { openDB } from 'idb';
+import { idbConnectionReady } from 'providers/ReduxStore/slices/app'
+import { useDispatch } from 'react-redux';
+
+const useIdb = () => {
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    let dbName = `grafnode`;
+    let connection = openDB(dbName, 1, {
+      upgrade(db, oldVersion, newVersion, transaction) {
+        switch(oldVersion) {
+          case 0:
+            const collectionStore = db.createObjectStore('collection', { keyPath: 'uid' });
+            collectionStore.createIndex('transactionIdIndex', 'transaction_id');
+        }
+      }
+    });
+
+    connection
+      .then(() => {
+        window.__idb = connection;
+        dispatch(idbConnectionReady());
+      })
+      .catch((err) => console.log(err));
+  }, []);
+};
+
+export default useIdb;

renderer/providers/ReduxStore/slices/app.js

@@ -1,6 +1,7 @@
 import { createSlice } from '@reduxjs/toolkit'
 
 const initialState = {
+  idbConnectionReady: false,
   leftMenuBarOpen: true,
   leftSidebarWidth: 270
 };
@@ -12,10 +13,13 @@ export const appSlice = createSlice({
     toggleLeftMenuBar: (state) => {
       state.leftMenuBarOpen = !state.leftMenuBarOpen;
       state.leftSidebarWidth = state.leftMenuBarOpen ? 270 : 222;
+    },
+    idbConnectionReady: (state) => {
+      state.idbConnectionReady = true;
     }
   }
 });
 
-export const { toggleLeftMenuBar } = appSlice.actions;
+export const { toggleLeftMenuBar, idbConnectionReady } = appSlice.actions;
 
 export default appSlice.reducer;