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

2021-02-13 13:21:13 +11:00 · 2021-02-13 13:21:13 +11:00 · 405e6ed6a3
commit 405e6ed6a3
parent 93f45c738f
4 changed files with 61 additions and 32 deletions
--- a/package.json
+++ b/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",
--- a/src/modals/ImportExportModal.js
+++ b/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 { useDatabase } from "../contexts/DatabaseContext";
+import Banner from "../components/Banner";

 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 }) {
-  const { database } = useDatabase();
+function ImportExportModal({ isOpen, onRequestClose }) {
  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();
-    await worker.importData(file, Comlink.proxy(handleDBProgress));
-    setIsLoading(false);
-    backgroundTaskRunningRef.current = false;
-    window.location.reload();
+    try {
+      await worker.importData(file, Comlink.proxy(handleDBProgress));
+      setIsLoading(false);
+      backgroundTaskRunningRef.current = false;
+      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));
-    saveAs(blob, `${new Date().toISOString()}.owlbear`);
+    try {
+      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;
--- a/src/workers/DatabaseWorker.js
+++ b/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({});
-      return await exportDB(db, {
-        progressCallback,
-        numRowsPerChunk: 1,
-      });
-    } catch {}
+    let db = getDatabase({});
+    return await exportDB(db, {
+      progressCallback,
+      numRowsPerChunk: 1,
+    });
  },

  /**
@ -58,9 +56,8 @@ let service = {
   * @param {function} progressCallback
   */
  async importData(data, progressCallback) {
-    try {
-      await importDB(data, { progressCallback });
-    } catch {}
+    let db = getDatabase({});
+    await importInto(db, data, { progressCallback, overwriteValues: true });
  },
 };

--- a/yarn.lock
+++ b/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"