feat: useIdb hook

packages/grafnode-run/package.json

@@ -36,6 +36,7 @@
     "graphiql": "^1.5.9",
     "graphql": "^16.2.0",
     "graphql-request": "^3.7.0",
+    "idb": "^7.0.0",
     "immer": "^9.0.7",
     "lodash": "^4.17.21",
     "markdown-it": "^12.2.0",

packages/grafnode-run/src/providers/Store/actions.js

@@ -11,6 +11,7 @@ const SENDING_REQUEST = "SENDING_REQUEST";
 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";
 
 export default {
   SIDEBAR_COLLECTION_CLICK,
@@ -25,5 +26,6 @@ export default {
   SENDING_REQUEST,
   ADD_REQUEST,
   ADD_NEW_HTTP_REQUEST,
-  ADD_NEW_GQL_REQUEST
+  ADD_NEW_GQL_REQUEST,
+  IDB_CONNECTION_READY
 };

packages/grafnode-run/src/providers/Store/useIdb.js

@@ -0,0 +1,27 @@
+import { useEffect } from 'react';
+import { openDB } from 'idb';
+import actions from './actions';
+
+const useIdb = () => {
+  useEffect(() => {
+    let dbName = `grafnode`;
+    let connection = openDB(dbName, 1, {
+      upgrade(db, oldVersion, newVersion, transaction) {
+        switch(oldVersion) {
+          case 0:
+            const collectionStore = db.createObjectStore('collections', { keyPath: 'id' });
+            collectionStore.createIndex('transactionIdIndex', 'transaction_id');
+        }
+      }
+    });
+
+    connection.then(() => {
+      dispatch({
+        type: actions.IDB_CONNECTION_READY,
+        connection: connection
+      });
+    });
+  }, []);
+};
+
+export default useIdb;