From aa33e6c341ff35e728abc7d928580b9d51c8f479 Mon Sep 17 00:00:00 2001 From: Mitchell McCaffrey Date: Fri, 19 Mar 2021 15:32:17 +1100 Subject: [PATCH] Moved database worker to database context to consolidate network requests --- src/contexts/DatabaseContext.js | 7 +++++++ src/contexts/MapDataContext.js | 11 ++++------- src/contexts/TokenDataContext.js | 9 ++------- src/modals/ImportExportModal.js | 6 ++---- src/workers/DatabaseWorker.js | 6 ------ 5 files changed, 15 insertions(+), 24 deletions(-) diff --git a/src/contexts/DatabaseContext.js b/src/contexts/DatabaseContext.js index a5b35d4..13b0b29 100644 --- a/src/contexts/DatabaseContext.js +++ b/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 ( diff --git a/src/contexts/MapDataContext.js b/src/contexts/MapDataContext.js index b00cf6c..ddd8dce 100644 --- a/src/contexts/MapDataContext.js +++ b/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 diff --git a/src/contexts/TokenDataContext.js b/src/contexts/TokenDataContext.js index 97ca575..d705705 100644 --- a/src/contexts/TokenDataContext.js +++ b/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(() => { diff --git a/src/modals/ImportExportModal.js b/src/modals/ImportExportModal.js index f665f58..f57e3f7 100644 --- a/src/modals/ImportExportModal.js +++ b/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); diff --git a/src/workers/DatabaseWorker.js b/src/workers/DatabaseWorker.js index 953921a..bb47f64 100644 --- a/src/workers/DatabaseWorker.js +++ b/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(); }, };