Added database upgrade for blob map files and refactored back to database file

src/contexts/DatabaseContext.js

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from "react";
-import Dexie from "dexie";
+
+import { getDatabase } from "../database";
 
 const DatabaseContext = React.createContext();
 
@@ -7,22 +8,12 @@ export function DatabaseProvider({ children }) {
   const [database, setDatabase] = useState();
   const [databaseStatus, setDatabaseStatus] = useState("loading");
 
-  function loadVersions(db) {
-    db.version(1).stores({
-      maps: "id, owner",
-      states: "mapId",
-      tokens: "id, owner",
-      user: "key",
-    });
-  }
-
   useEffect(() => {
     // Create a test database and open it to see if indexedDB is enabled
     let testDBRequest = window.indexedDB.open("__test");
     testDBRequest.onsuccess = function () {
       testDBRequest.result.close();
-      let db = new Dexie("OwlbearRodeoDB");
+      let db = getDatabase();
-      loadVersions(db);
       setDatabase(db);
       setDatabaseStatus("loaded");
       window.indexedDB.deleteDatabase("__test");
@@ -32,8 +23,7 @@ export function DatabaseProvider({ children }) {
       console.warn("Database is disabled, no state will be saved");
       const indexedDB = await import("fake-indexeddb");
       const IDBKeyRange = await import("fake-indexeddb/lib/FDBKeyRange");
-      let db = new Dexie("OwlbearRodeoDB", { indexedDB, IDBKeyRange });
+      let db = getDatabase({ indexedDB, IDBKeyRange });
-      loadVersions(db);
       setDatabase(db);
       setDatabaseStatus("disabled");
       window.indexedDB.deleteDatabase("__test");

src/database.js

@@ -0,0 +1,34 @@
+import Dexie from "dexie";
+
+import blobToBuffer from "./helpers/blobToBuffer";
+
+function loadVersions(db) {
+  db.version(1).stores({
+    maps: "id, owner",
+    states: "mapId",
+    tokens: "id, owner",
+    user: "key",
+  });
+  // Upgrade move from blob files to array buffers
+  db.version(2)
+    .stores({})
+    .upgrade((tx) => {
+      return tx
+        .table("maps")
+        .toCollection()
+        .modify((map) => {
+          if (map.file instanceof Blob) {
+            blobToBuffer(map.file).then((buffer) => {
+              map.file = buffer;
+            });
+          }
+        });
+    });
+}
+
+// Get the dexie database used in DatabaseContext
+export function getDatabase(options) {
+  let db = new Dexie("OwlbearRodeoDB", options);
+  loadVersions(db);
+  return db;
+}