Add initial import export functionality

package.json

@@ -17,6 +17,7 @@
     "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",
     "fuse.js": "^6.4.1",
@@ -48,6 +49,7 @@
     "simplify-js": "^1.2.4",
     "socket.io-client": "^3.0.3",
     "source-map-explorer": "^2.4.2",
+    "streamsaver": "^2.0.5",
     "theme-ui": "^0.3.1",
     "use-image": "^1.0.5",
     "webrtc-adapter": "^7.5.1"

src/components/LoadingBar.js

@@ -0,0 +1,41 @@
+import React, { useEffect, useRef } from "react";
+import { Progress } from "theme-ui";
+
+function LoadingBar({ isLoading, loadingProgressRef }) {
+  const requestRef = useRef();
+  const progressBarRef = useRef();
+
+  // Use an animation frame to update the progress bar
+  // This bypasses react allowing the animation to be smooth
+  useEffect(() => {
+    function animate() {
+      if (!isLoading) {
+        return;
+      }
+      requestRef.current = requestAnimationFrame(animate);
+      if (progressBarRef.current) {
+        progressBarRef.current.value = loadingProgressRef.current;
+      }
+    }
+
+    requestRef.current = requestAnimationFrame(animate);
+
+    return () => {
+      cancelAnimationFrame(requestRef.current);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isLoading]);
+
+  return (
+    <Progress
+      ref={progressBarRef}
+      max={1}
+      value={0}
+      m={0}
+      sx={{ width: "100%", borderRadius: 0, height: "4px" }}
+      color="primary"
+    />
+  );
+}
+
+export default LoadingBar;

src/components/map/MapLoadingOverlay.js

@@ -1,35 +1,13 @@
-import React, { useContext, useEffect, useRef } from "react";
-import { Box, Progress } from "theme-ui";
+import React, { useContext } from "react";
+import { Box } from "theme-ui";
 
 import MapLoadingContext from "../../contexts/MapLoadingContext";
 
+import LoadingBar from "../LoadingBar";
+
 function MapLoadingOverlay() {
   const { isLoading, loadingProgressRef } = useContext(MapLoadingContext);
 
-  const requestRef = useRef();
-  const progressBarRef = useRef();
-
-  // Use an animation frame to update the progress bar
-  // This bypasses react allowing the animation to be smooth
-  useEffect(() => {
-    function animate() {
-      if (!isLoading) {
-        return;
-      }
-      requestRef.current = requestAnimationFrame(animate);
-      if (progressBarRef.current) {
-        progressBarRef.current.value = loadingProgressRef.current;
-      }
-    }
-
-    requestRef.current = requestAnimationFrame(animate);
-
-    return () => {
-      cancelAnimationFrame(requestRef.current);
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isLoading]);
-
   return (
     isLoading && (
       <Box
@@ -46,13 +24,9 @@ function MapLoadingOverlay() {
         }}
         bg="overlay"
       >
-        <Progress
-          ref={progressBarRef}
-          max={1}
-          value={0}
-          m={0}
-          sx={{ width: "100%", borderRadius: 0, height: "4px" }}
-          color="primary"
+        <LoadingBar
+          isLoading={isLoading}
+          loadingProgressRef={loadingProgressRef}
         />
       </Box>
     )

src/modals/ImportExportModal.js

@@ -0,0 +1,157 @@
+import React, { useRef, useState, useContext, useEffect } from "react";
+import { Box, Label, Text, Button, Flex } from "theme-ui";
+import { importDB, exportDB } from "dexie-export-import";
+import streamSaver from "streamsaver";
+
+import Modal from "../components/Modal";
+import LoadingOverlay from "../components/LoadingOverlay";
+import LoadingBar from "../components/LoadingBar";
+
+import DatabaseContext from "../contexts/DatabaseContext";
+
+function ImportDatabaseModal({ isOpen, onRequestClose }) {
+  const { database } = useContext(DatabaseContext);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const fileInputRef = useRef();
+
+  function openFileDialog() {
+    if (fileInputRef.current) {
+      fileInputRef.current.click();
+    }
+  }
+
+  const loadingProgressRef = useRef(0);
+
+  function handleDBProgress({ completedRows, totalRows }) {
+    loadingProgressRef.current = completedRows / totalRows;
+  }
+
+  async function handleImportDatabase(file) {
+    setIsLoading(true);
+    await database.delete();
+    await importDB(file, { progressCallback: handleDBProgress });
+    setIsLoading(false);
+    window.location.reload();
+  }
+
+  const fileStreamRef = useRef();
+
+  async function handleExportDatabase() {
+    setIsLoading(true);
+    const blob = await exportDB(database, {
+      progressCallback: handleDBProgress,
+    });
+    const fileStream = streamSaver.createWriteStream(
+      `${new Date().toISOString()}.db`,
+      {
+        size: blob.size,
+      }
+    );
+    fileStreamRef.current = fileStream;
+
+    const readableStream = blob.stream();
+    if (window.WritableStream && readableStream.pipeTo) {
+      await readableStream.pipeTo(fileStream);
+      setIsLoading(false);
+    } else {
+      const writer = fileStream.getWriter();
+      const reader = readableStream.getReader();
+      async function pump() {
+        const res = await reader.read();
+        if (res.done) {
+          writer.close();
+        } else {
+          writer.write(res.value).then(pump);
+        }
+      }
+      await pump();
+      setIsLoading(false);
+    }
+    fileStreamRef.current = null;
+  }
+
+  function handleClose() {
+    if (isLoading) {
+      return;
+    }
+    onRequestClose();
+  }
+
+  useEffect(() => {
+    function handleBeforeUnload(event) {
+      if (isLoading) {
+        event.returnValue =
+          "Database is still processing, are you sure you want to leave?";
+      }
+    }
+
+    function handleUnload() {
+      if (fileStreamRef.current) {
+        fileStreamRef.current.abort();
+      }
+    }
+
+    window.addEventListener("beforeunload", handleBeforeUnload);
+    window.addEventListener("unload", handleUnload);
+    return () => {
+      window.removeEventListener("beforeunload", handleBeforeUnload);
+      window.removeEventListener("unload", handleUnload);
+    };
+  }, [isLoading]);
+
+  return (
+    <Modal isOpen={isOpen} onRequestClose={handleClose} allowClose={!isLoading}>
+      <Flex
+        sx={{
+          flexDirection: "column",
+          justifyContent: "center",
+          maxWidth: "300px",
+          flexGrow: 1,
+        }}
+        m={2}
+      >
+        <Box>
+          <Label>Import / Export Database</Label>
+          <Text as="p" mb={2} variant="caption">
+            Importing a database will overwrite your current data.
+          </Text>
+          <input
+            onChange={(event) => handleImportDatabase(event.target.files[0])}
+            type="file"
+            accept=".db"
+            style={{ display: "none" }}
+            ref={fileInputRef}
+          />
+          <Flex>
+            <Button mr={1} sx={{ flexGrow: 1 }} onClick={openFileDialog}>
+              Import
+            </Button>
+            <Button ml={1} sx={{ flexGrow: 1 }} onClick={handleExportDatabase}>
+              Export
+            </Button>
+          </Flex>
+        </Box>
+        {isLoading && (
+          <Box
+            sx={{
+              width: "100%",
+              height: "100%",
+              position: "absolute",
+              top: 0,
+              left: 0,
+            }}
+          >
+            <LoadingOverlay />
+            <LoadingBar
+              isLoading={isLoading}
+              loadingProgressRef={loadingProgressRef}
+            />
+          </Box>
+        )}
+      </Flex>
+    </Modal>
+  );
+}
+
+export default ImportDatabaseModal;

src/modals/SettingsModal.js

@@ -19,6 +19,7 @@ import DatabaseContext from "../contexts/DatabaseContext";
 import useSetting from "../helpers/useSetting";
 
 import ConfirmModal from "./ConfirmModal";
+import ImportExportModal from "./ImportExportModal";
 
 function SettingsModal({ isOpen, onRequestClose }) {
   const { database } = useContext(DatabaseContext);
@@ -26,6 +27,7 @@ function SettingsModal({ isOpen, onRequestClose }) {
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
   const [labelSize, setLabelSize] = useSetting("map.labelSize");
   const [storageEstimate, setStorageEstimate] = useState();
+  const [isImportExportModalOpen, setIsImportExportModalOpen] = useState(false);
 
   useEffect(() => {
     async function estimateStorage() {
@@ -125,6 +127,14 @@ function SettingsModal({ isOpen, onRequestClose }) {
               Erase all content and reset
             </Button>
           </Flex>
+          <Flex py={2}>
+            <Button
+              sx={{ flexGrow: 1 }}
+              onClick={() => setIsImportExportModalOpen(true)}
+            >
+              Import / Export Database
+            </Button>
+          </Flex>
           {storageEstimate && (
             <Flex sx={{ justifyContent: "center" }}>
               <Text variant="caption">
@@ -148,6 +158,10 @@ function SettingsModal({ isOpen, onRequestClose }) {
         description="This will remove all data including saved maps and tokens."
         confirmText="Erase"
       />
+      <ImportExportModal
+        isOpen={isImportExportModalOpen}
+        onRequestClose={() => setIsImportExportModalOpen(false)}
+      />
     </>
   );
 }

yarn.lock

@@ -4532,7 +4532,14 @@ detect-port-alt@1.1.6:
     address "^1.0.1"
     debug "^2.6.0"
 
-dexie@^3.0.3:
+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"
   integrity sha512-BSFhGpngnCl1DOr+8YNwBDobRMH0ziJs2vts69VilwetHYOtEDcLqo7d/XiIphM0tJZ2rPPyAGd31lgH2Ln3nw==
@@ -10946,7 +10953,6 @@ simple-peer@feross/simple-peer#694/head:
   resolved "https://codeload.github.com/feross/simple-peer/tar.gz/0d08d07b83ff3b8c60401688d80642d24dfeffe2"
   dependencies:
     debug "^4.0.1"
-    err-code "^2.0.3"
     get-browser-rtc "^1.0.0"
     queue-microtask "^1.1.0"
     randombytes "^2.0.3"
@@ -11325,6 +11331,11 @@ stream-shift@^1.0.0:
   resolved "https://registry.yarnpkg.com/stream-shift/-/stream-shift-1.0.1.tgz#d7088281559ab2778424279b0877da3c392d5a3d"
   integrity sha512-AiisoFqQ0vbGcZgQPY1cdP2I76glaVA/RauYR4G4thNFgkTqr90yXTo4LYX60Jl+sIlPNHHdGSwo01AvbKUSVQ==
 
+streamsaver@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/streamsaver/-/streamsaver-2.0.5.tgz#3212f0e908fcece5b3a65591094475cf87850d00"
+  integrity sha512-KIWtBvi8A6FiFZGNSyuIZRZM6C8AvnWTiCx/TYa7so420vC5sQwcBKkdqInuGWoWMfeWy/P+/cRqMtWVf4RW9w==
+
 strict-uri-encode@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713"