Added error banner to database and updated to custom dexie-export-import build

package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "@babylonjs/core": "^4.2.0",
     "@babylonjs/loaders": "^4.2.0",
+    "@mitchemmc/dexie-export-import": "^1.0.0-rc.2",
     "@msgpack/msgpack": "^2.3.0",
     "@sentry/react": "^5.27.1",
     "@stripe/stripe-js": "^1.3.2",
@@ -18,7 +19,6 @@
     "comlink": "^4.3.0",
     "deep-diff": "^1.0.2",
     "dexie": "^3.0.3",
-    "dexie-export-import": "^1.0.0",
     "err-code": "^2.0.3",
     "fake-indexeddb": "^3.1.2",
     "file-saver": "^2.0.5",

src/modals/ImportExportModal.js

@@ -6,16 +6,15 @@ import * as Comlink from "comlink";
 import Modal from "../components/Modal";
 import LoadingOverlay from "../components/LoadingOverlay";
 import LoadingBar from "../components/LoadingBar";
-
+import Banner from "../components/Banner";
-import { useDatabase } from "../contexts/DatabaseContext";
 
 import DatabaseWorker from "worker-loader!../workers/DatabaseWorker"; // eslint-disable-line import/no-webpack-loader-syntax
 
 const worker = Comlink.wrap(new DatabaseWorker());
 
-function ImportDatabaseModal({ isOpen, onRequestClose }) {
+function ImportExportModal({ isOpen, onRequestClose }) {
-  const { database } = useDatabase();
   const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState();
 
   const backgroundTaskRunningRef = useRef(false);
   const fileInputRef = useRef();
@@ -35,18 +34,35 @@ function ImportDatabaseModal({ isOpen, onRequestClose }) {
   async function handleImportDatabase(file) {
     setIsLoading(true);
     backgroundTaskRunningRef.current = true;
-    await database.delete();
+    try {
-    await worker.importData(file, Comlink.proxy(handleDBProgress));
+      await worker.importData(file, Comlink.proxy(handleDBProgress));
-    setIsLoading(false);
+      setIsLoading(false);
-    backgroundTaskRunningRef.current = false;
+      backgroundTaskRunningRef.current = false;
-    window.location.reload();
+      window.location.reload();
+    } catch (e) {
+      setIsLoading(false);
+      backgroundTaskRunningRef.current = false;
+      if (e.message.startsWith("Max buffer length exceeded")) {
+        setError(
+          new Error(
+            "Max image size exceeded ensure your database doesn't have an image over 100MB"
+          )
+        );
+      } else {
+        setError(e);
+      }
+    }
   }
 
   async function handleExportDatabase() {
     setIsLoading(true);
     backgroundTaskRunningRef.current = true;
-    const blob = await worker.exportData(Comlink.proxy(handleDBProgress));
+    try {
-    saveAs(blob, `${new Date().toISOString()}.owlbear`);
+      const blob = await worker.exportData(Comlink.proxy(handleDBProgress));
+      saveAs(blob, `${new Date().toISOString()}.owlbear`);
+    } catch (e) {
+      setError(e);
+    }
     setIsLoading(false);
     backgroundTaskRunningRef.current = false;
   }
@@ -121,9 +137,16 @@ function ImportDatabaseModal({ isOpen, onRequestClose }) {
             />
           </Box>
         )}
+        <Banner isOpen={!!error} onRequestClose={() => setError()}>
+          <Box p={1}>
+            <Text as="p" variant="body2">
+              Error: {error && error.message}
+            </Text>
+          </Box>
+        </Banner>
       </Flex>
     </Modal>
   );
 }
 
-export default ImportDatabaseModal;
+export default ImportExportModal;

src/workers/DatabaseWorker.js

@@ -1,5 +1,5 @@
 import * as Comlink from "comlink";
-import { importDB, exportDB } from "dexie-export-import";
+import { importInto, exportDB } from "@mitchemmc/dexie-export-import";
 import { encode } from "@msgpack/msgpack";
 
 import { getDatabase } from "../database";
@@ -43,13 +43,11 @@ let service = {
    * @param {function} progressCallback
    */
   async exportData(progressCallback) {
-    try {
+    let db = getDatabase({});
-      let db = getDatabase({});
+    return await exportDB(db, {
-      return await exportDB(db, {
+      progressCallback,
-        progressCallback,
+      numRowsPerChunk: 1,
-        numRowsPerChunk: 1,
+    });
-      });
-    } catch {}
   },
 
   /**
@@ -58,9 +56,8 @@ let service = {
    * @param {function} progressCallback
    */
   async importData(data, progressCallback) {
-    try {
+    let db = getDatabase({});
-      await importDB(data, { progressCallback });
+    await importInto(db, data, { progressCallback, overwriteValues: true });
-    } catch {}
   },
 };
 

yarn.lock

@@ -1443,6 +1443,14 @@
   resolved "https://registry.yarnpkg.com/@mdx-js/react/-/react-1.6.16.tgz#538eb14473194d0b3c54020cb230e426174315cd"
   integrity sha512-+FhuSVOPo7+4fZaRwWuCSRUcZkJOkZu0rfAbBKvoCg1LWb1Td8Vzi0DTLORdSvgWNbU6+EL40HIgwTOs00x2Jw==
 
+"@mitchemmc/dexie-export-import@^1.0.0-rc.2":
+  version "1.0.0-rc.2"
+  resolved "https://registry.yarnpkg.com/@mitchemmc/dexie-export-import/-/dexie-export-import-1.0.0-rc.2.tgz#80c3e9b3331c9ad50cfe3c9378aedf7640a467ae"
+  integrity sha512-iCkiUrGTYlIy6sWfp1DeeUMv2NlilG70e+3FV54Av5nsGsFuUCrTh7sCR6pcQChmq1fdYXu6Jg//SkocP5rcNg==
+  dependencies:
+    dexie "^3.0.0-alpha.5 || ^2.0.4"
+    rollup-plugin-sourcemaps "^0.6.3"
+
 "@msgpack/msgpack@^2.3.0":
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/@msgpack/msgpack/-/msgpack-2.3.0.tgz#a9043b920837b2dd63482e7bf6b8345813e9816b"
@@ -1507,7 +1515,7 @@
     "@rollup/pluginutils" "^3.1.0"
     magic-string "^0.25.7"
 
-"@rollup/pluginutils@^3.0.8", "@rollup/pluginutils@^3.1.0":
+"@rollup/pluginutils@^3.0.8", "@rollup/pluginutils@^3.0.9", "@rollup/pluginutils@^3.1.0":
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-3.1.0.tgz#706b4524ee6dc8b103b3c995533e5ad680c02b9b"
   integrity sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==
@@ -4532,13 +4540,6 @@ detect-port-alt@1.1.6:
     address "^1.0.1"
     debug "^2.6.0"
 
-dexie-export-import@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/dexie-export-import/-/dexie-export-import-1.0.0.tgz#2e2cc375a416f540c89d2a39f623d297077221a4"
-  integrity sha512-mqtREaI+/tSEfpwOZeYNyX+FfCxTYt0RB4BIevX4wFGMQL1mQ0cWfIGXBpoRGEnHdiHbf3QNK2+0Ras3dNJfIQ==
-  dependencies:
-    dexie "^3.0.0-alpha.5 || ^2.0.4"
-
 "dexie@^3.0.0-alpha.5 || ^2.0.4", dexie@^3.0.3:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/dexie/-/dexie-3.0.3.tgz#ede63849dfe5f07e13e99bb72a040e8ac1d29dab"
@@ -10597,6 +10598,14 @@ rollup-plugin-babel@^4.3.3:
     "@babel/helper-module-imports" "^7.0.0"
     rollup-pluginutils "^2.8.1"
 
+rollup-plugin-sourcemaps@^0.6.3:
+  version "0.6.3"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-sourcemaps/-/rollup-plugin-sourcemaps-0.6.3.tgz#bf93913ffe056e414419607f1d02780d7ece84ed"
+  integrity sha512-paFu+nT1xvuO1tPFYXGe+XnQvg4Hjqv/eIhG8i5EspfYYPBKL57X7iVbfv55aNVASg3dzWvES9dmWsL2KhfByw==
+  dependencies:
+    "@rollup/pluginutils" "^3.0.9"
+    source-map-resolve "^0.6.0"
+
 rollup-plugin-terser@^5.3.1:
   version "5.3.1"
   resolved "https://registry.yarnpkg.com/rollup-plugin-terser/-/rollup-plugin-terser-5.3.1.tgz#8c650062c22a8426c64268548957463bf981b413"