Fix map size label in map settings

src/components/map/MapSettings.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { Flex, Box, Label, Input, Checkbox, IconButton } from "theme-ui";
 
 import ExpandMoreIcon from "../../icons/ExpandMoreIcon";
@@ -6,6 +6,9 @@ import ExpandMoreIcon from "../../icons/ExpandMoreIcon";
 import { isEmpty } from "../../helpers/shared";
 import { getGridUpdatedInset } from "../../helpers/grid";
 
+import { useDataURL } from "../../contexts/AssetsContext";
+import { mapSources as defaultMapSources } from "../../maps";
+
 import Divider from "../Divider";
 import Select from "../Select";
 
@@ -116,16 +119,22 @@ function MapSettings({
     onSettingsChange("grid", grid);
   }
 
-  function getMapSize() {
+  const mapURL = useDataURL(map, defaultMapSources);
-    let size = 0;
+  const [mapSize, setMapSize] = useState(0);
-    if (map.quality === "original") {
+  useEffect(() => {
-      size = map.file.length;
+    async function updateMapSize() {
-    } else {
+      if (mapURL) {
-      size = map.resolutions[map.quality].file.length;
+        const response = await fetch(mapURL);
+        const blob = await response.blob();
+        let size = blob.size;
+        size /= 1000000; // Bytes to Megabytes
+        setMapSize(size.toFixed(2));
+      } else {
+        setMapSize(0);
+      }
     }
-    size /= 1000000; // Bytes to Megabytes
+    updateMapSize();
-    return `${size.toFixed(2)}MB`;
+  }, [mapURL]);
-  }
 
   const mapEmpty = !map || isEmpty(map);
   const mapStateEmpty = !mapState || isEmpty(mapState);
@@ -269,7 +278,7 @@ function MapSettings({
                 />
               </Box>
               <Label sx={{ width: "50%" }} ml={2}>
-                Size: {getMapSize()}
+                Size: {mapSize > 0 && `${mapSize}MB`}
               </Label>
             </Flex>
           )}

src/contexts/AssetsContext.js

@@ -73,7 +73,7 @@ export function AssetsProvider({ children }) {
         await database.table("assets").put(asset);
       }
     },
-    [database]
+    [database, worker]
   );
 
   const value = {

src/contexts/MapDataContext.js

@@ -219,7 +219,7 @@ export function MapDataProvider({ children }) {
         await updateCache();
       }
     },
-    [database, updateCache, userId, worker]
+    [database, updateCache, userId]
   );
 
   // Create DB observable to sync creating and deleting

src/modals/EditMapModal.js

@@ -1,10 +1,9 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import { Button, Flex, Label } from "theme-ui";
 
 import Modal from "../components/Modal";
 import MapSettings from "../components/map/MapSettings";
 import MapEditor from "../components/map/MapEditor";
-import LoadingOverlay from "../components/LoadingOverlay";
 
 import { useMapData } from "../contexts/MapDataContext";
 
@@ -13,40 +12,8 @@ import { getGridDefaultInset } from "../helpers/grid";
 
 import useResponsiveLayout from "../hooks/useResponsiveLayout";
 
-function EditMapModal({ isOpen, onDone, mapId }) {
+function EditMapModal({ isOpen, onDone, map, mapState }) {
-  const {
+  const { updateMap, updateMapState } = useMapData();
-    updateMap,
-    updateMapState,
-    getMap,
-    getMapFromDB,
-    getMapStateFromDB,
-  } = useMapData();
-
-  const [isLoading, setIsLoading] = useState(true);
-  const [map, setMap] = useState();
-  const [mapState, setMapState] = useState();
-  // Load full map when modal is opened
-  useEffect(() => {
-    async function loadMap() {
-      setIsLoading(true);
-      let loadingMap = getMap(mapId);
-      // Ensure file is loaded for map
-      if (loadingMap?.type === "file" && !loadingMap?.file) {
-        loadingMap = await getMapFromDB(mapId);
-      }
-      const mapState = await getMapStateFromDB(mapId);
-      setMap(loadingMap);
-      setMapState(mapState);
-      setIsLoading(false);
-    }
-
-    if (isOpen && mapId) {
-      loadMap();
-    } else {
-      setMap();
-      setMapState();
-    }
-  }, [isOpen, mapId, getMapFromDB, getMapStateFromDB, getMap]);
 
   function handleClose() {
     setMapSettingChanges({});
@@ -147,23 +114,10 @@ function EditMapModal({ isOpen, onDone, mapId }) {
         <Label pt={2} pb={1}>
           Edit map
         </Label>
-        {isLoading || !map ? (
+        <MapEditor
-          <Flex
+          map={selectedMapWithChanges}
-            sx={{
+          onSettingsChange={handleMapSettingsChange}
-              width: "100%",
+        />
-              height: layout.screenSize === "large" ? "500px" : "300px",
-              position: "relative",
-            }}
-            bg="muted"
-          >
-            <LoadingOverlay />
-          </Flex>
-        ) : (
-          <MapEditor
-            map={selectedMapWithChanges}
-            onSettingsChange={handleMapSettingsChange}
-          />
-        )}
         <MapSettings
           map={selectedMapWithChanges}
           mapState={selectedMapStateWithChanges}

src/modals/SelectMapModal.js

@@ -516,7 +516,8 @@ function SelectMapModal({
       <EditMapModal
         isOpen={isEditModalOpen}
         onDone={() => setIsEditModalOpen(false)}
-        mapId={selectedMaps.length === 1 && selectedMaps[0].id}
+        map={selectedMaps.length === 1 && selectedMaps[0]}
+        mapState={selectedMapStates.length === 1 && selectedMapStates[0]}
       />
       <EditGroupModal
         isOpen={isGroupModalOpen}