diff --git a/src/components/map/MapSettings.js b/src/components/map/MapSettings.js index c8f3276..02a4c95 100644 --- a/src/components/map/MapSettings.js +++ b/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() { - let size = 0; - if (map.quality === "original") { - size = map.file.length; - } else { - size = map.resolutions[map.quality].file.length; + const mapURL = useDataURL(map, defaultMapSources); + const [mapSize, setMapSize] = useState(0); + useEffect(() => { + async function updateMapSize() { + if (mapURL) { + 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 - return `${size.toFixed(2)}MB`; - } + updateMapSize(); + }, [mapURL]); const mapEmpty = !map || isEmpty(map); const mapStateEmpty = !mapState || isEmpty(mapState); @@ -269,7 +278,7 @@ function MapSettings({ /> )} diff --git a/src/contexts/AssetsContext.js b/src/contexts/AssetsContext.js index e522a7d..48f456c 100644 --- a/src/contexts/AssetsContext.js +++ b/src/contexts/AssetsContext.js @@ -73,7 +73,7 @@ export function AssetsProvider({ children }) { await database.table("assets").put(asset); } }, - [database] + [database, worker] ); const value = { diff --git a/src/contexts/MapDataContext.js b/src/contexts/MapDataContext.js index 4f298a9..acff7dc 100644 --- a/src/contexts/MapDataContext.js +++ b/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 diff --git a/src/modals/EditMapModal.js b/src/modals/EditMapModal.js index ad38c8c..dcfc4ed 100644 --- a/src/modals/EditMapModal.js +++ b/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 }) { - const { - 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 EditMapModal({ isOpen, onDone, map, mapState }) { + const { updateMap, updateMapState } = useMapData(); function handleClose() { setMapSettingChanges({}); @@ -147,23 +114,10 @@ function EditMapModal({ isOpen, onDone, mapId }) { - {isLoading || !map ? ( - - - - ) : ( - - )} + setIsEditModalOpen(false)} - mapId={selectedMaps.length === 1 && selectedMaps[0].id} + map={selectedMaps.length === 1 && selectedMaps[0]} + mapState={selectedMapStates.length === 1 && selectedMapStates[0]} />