Moved database worker to database context to consolidate network requests

src/contexts/DatabaseContext.js

@@ -1,15 +1,21 @@
 import React, { useState, useEffect, useContext } from "react";
+import * as Comlink from "comlink";
 
 import ErrorBanner from "../components/banner/ErrorBanner";
 
 import { getDatabase } from "../database";
 
+import DatabaseWorker from "worker-loader!../workers/DatabaseWorker"; // eslint-disable-line import/no-webpack-loader-syntax
+
 const DatabaseContext = React.createContext();
 
+const worker = Comlink.wrap(new DatabaseWorker());
+
 export function DatabaseProvider({ children }) {
   const [database, setDatabase] = useState();
   const [databaseStatus, setDatabaseStatus] = useState("loading");
   const [databaseError, setDatabaseError] = useState();
+  // const [worker] = useState(Comlink.wrap(new DatabaseWorker()))
 
   useEffect(() => {
     // Create a test database and open it to see if indexedDB is enabled
@@ -58,6 +64,7 @@ export function DatabaseProvider({ children }) {
     database,
     databaseStatus,
     databaseError,
+    worker,
   };
   return (
     <DatabaseContext.Provider value={value}>

src/contexts/MapDataContext.js

@@ -11,8 +11,6 @@ import { decode, encode } from "@msgpack/msgpack";
 import { useAuth } from "./AuthContext";
 import { useDatabase } from "./DatabaseContext";
 
-import DatabaseWorker from "worker-loader!../workers/DatabaseWorker"; // eslint-disable-line import/no-webpack-loader-syntax
-
 import { maps as defaultMaps } from "../maps";
 
 const MapDataContext = React.createContext();
@@ -29,10 +27,8 @@ const defaultMapState = {
   notes: {},
 };
 
-const worker = Comlink.wrap(new DatabaseWorker());
-
 export function MapDataProvider({ children }) {
-  const { database, databaseStatus } = useDatabase();
+  const { database, databaseStatus, worker } = useDatabase();
   const { userId } = useAuth();
 
   const [maps, setMaps] = useState([]);
@@ -74,6 +70,7 @@ export function MapDataProvider({ children }) {
       let storedMaps = [];
       // Try to load maps with worker, fallback to database if failed
       const packedMaps = await worker.loadData("maps");
+      // let packedMaps;
       if (packedMaps) {
         storedMaps = decode(packedMaps);
       } else {
@@ -93,7 +90,7 @@ export function MapDataProvider({ children }) {
     }
 
     loadMaps();
-  }, [userId, database, databaseStatus]);
+  }, [userId, database, databaseStatus, worker]);
 
   const mapsRef = useRef(maps);
   useEffect(() => {
@@ -232,7 +229,7 @@ export function MapDataProvider({ children }) {
         await updateCache();
       }
     },
-    [database, updateCache, userId]
+    [database, updateCache, userId, worker]
   );
 
   // Create DB observable to sync creating and deleting

src/contexts/TokenDataContext.js

@@ -5,24 +5,19 @@ import React, {
   useCallback,
   useRef,
 } from "react";
-import * as Comlink from "comlink";
 import { decode } from "@msgpack/msgpack";
 
 import { useAuth } from "./AuthContext";
 import { useDatabase } from "./DatabaseContext";
 
-import DatabaseWorker from "worker-loader!../workers/DatabaseWorker"; // eslint-disable-line import/no-webpack-loader-syntax
-
 import { tokens as defaultTokens } from "../tokens";
 
 const TokenDataContext = React.createContext();
 
 const cachedTokenMax = 100;
 
-const worker = Comlink.wrap(new DatabaseWorker());
-
 export function TokenDataProvider({ children }) {
-  const { database, databaseStatus } = useDatabase();
+  const { database, databaseStatus, worker } = useDatabase();
   const { userId } = useAuth();
 
   /**
@@ -71,7 +66,7 @@ export function TokenDataProvider({ children }) {
     }
 
     loadTokens();
-  }, [userId, database, databaseStatus]);
+  }, [userId, database, databaseStatus, worker]);
 
   const tokensRef = useRef(tokens);
   useEffect(() => {

src/modals/ImportExportModal.js

@@ -11,18 +11,16 @@ import LoadingBar from "../components/LoadingBar";
 import ErrorBanner from "../components/banner/ErrorBanner";
 
 import { useAuth } from "../contexts/AuthContext";
+import { useDatabase } from "../contexts/DatabaseContext";
 
 import SelectDataModal from "./SelectDataModal";
 
 import { getDatabase } from "../database";
 
-import DatabaseWorker from "worker-loader!../workers/DatabaseWorker"; // eslint-disable-line import/no-webpack-loader-syntax
-
-const worker = Comlink.wrap(new DatabaseWorker());
-
 const importDBName = "OwlbearRodeoImportDB";
 
 function ImportExportModal({ isOpen, onRequestClose }) {
+  const { worker } = useDatabase();
   const { userId } = useAuth();
 
   const [isLoading, setIsLoading] = useState(false);

src/workers/DatabaseWorker.js

@@ -22,7 +22,6 @@ let service = {
       if (key) {
         // Load specific item
         const data = await db.table(table).get(key);
-        db.close();
         return data;
       } else {
         // Load entire table
@@ -37,8 +36,6 @@ let service = {
           }
         });
 
-        db.close();
-
         // Pack data with msgpack so we can use transfer to avoid memory issues
         const packed = encode(items);
         return Comlink.transfer(packed, [packed.buffer]);
@@ -61,7 +58,6 @@ let service = {
       } else {
         db.table(table).put(decoded);
       }
-      db.close();
       return true;
     } catch {
       return false;
@@ -96,7 +92,6 @@ let service = {
       numRowsPerChunk: 1,
       prettyJson: true,
     });
-    db.close();
     return data;
   },
 
@@ -151,7 +146,6 @@ let service = {
       acceptVersionDiff: true,
     });
     importDB.close();
-    db.close();
   },
 };