diff --git a/src/components/map/MapTile.js b/src/components/map/MapTile.js index ca243a6..5aaa2c0 100644 --- a/src/components/map/MapTile.js +++ b/src/components/map/MapTile.js @@ -1,8 +1,6 @@ -import React, { useState, useEffect } from "react"; +import React, { useState } from "react"; import { Flex, Image as UIImage, IconButton, Box, Text } from "theme-ui"; -import db from "../../database"; - import RemoveMapIcon from "../../icons/RemoveMapIcon"; import ResetMapIcon from "../../icons/ResetMapIcon"; import ExpandMoreDotIcon from "../../icons/ExpandMoreDotIcon"; @@ -12,6 +10,7 @@ import { mapSources as defaultMapSources } from "../../maps"; function MapTile({ map, + mapState, isSelected, onMapSelect, onMapRemove, @@ -20,21 +19,11 @@ function MapTile({ }) { const mapSource = useDataSource(map, defaultMapSources); const [isMapTileMenuOpen, setIsTileMenuOpen] = useState(false); - const [hasMapState, setHasMapState] = useState(false); const isDefault = map.type === "default"; - - useEffect(() => { - async function checkForMapState() { - const state = await db.table("states").get(map.id); - if ( - state && - (Object.values(state.tokens).length > 0 || state.drawActions.length > 0) - ) { - setHasMapState(true); - } - } - checkForMapState(); - }, [map]); + const hasMapState = + mapState && + (Object.values(mapState.tokens).length > 0 || + mapState.drawActions.length > 0); const expandButton = ( { e.preventDefault(); e.stopPropagation(); - setHasMapState(false); setIsTileMenuOpen(false); onMapReset(map.id); }} diff --git a/src/components/map/MapTiles.js b/src/components/map/MapTiles.js index bc2dc7a..5babba3 100644 --- a/src/components/map/MapTiles.js +++ b/src/components/map/MapTiles.js @@ -9,6 +9,7 @@ import MapTile from "./MapTile"; function MapTiles({ maps, selectedMap, + selectedMapState, onMapSelect, onMapAdd, onMapRemove, @@ -56,7 +57,10 @@ function MapTiles({ { + ref.current = value; + }, [value]); + return ref.current; +} + +export default usePrevious; diff --git a/src/modals/SelectMapModal.js b/src/modals/SelectMapModal.js index 1cc6370..b0e5ddb 100644 --- a/src/modals/SelectMapModal.js +++ b/src/modals/SelectMapModal.js @@ -10,6 +10,8 @@ import MapSettings from "../components/map/MapSettings"; import AuthContext from "../contexts/AuthContext"; +import usePrevious from "../helpers/usePrevious"; + import { maps as defaultMaps } from "../maps"; const defaultMapSize = 22; @@ -40,6 +42,8 @@ function SelectMapModal({ }) { const { userId } = useContext(AuthContext); + const wasOpen = usePrevious(isOpen); + const [imageLoading, setImageLoading] = useState(false); // The map selected in the modal @@ -80,10 +84,18 @@ function SelectMapModal({ (a, b) => a.timestamp - b.timestamp ); setMaps(sortedMaps); + if (selectedMap) { + const map = await db.table("maps").get(selectedMap.id); + const state = await db.table("states").get(selectedMap.id); + setSelectedMap(map); + setSelectedMapState(state); + } } - loadMaps(); - }, [userId]); + if (!wasOpen && isOpen) { + loadMaps(); + } + }, [userId, isOpen, wasOpen, selectedMap]); const fileInputRef = useRef(); @@ -169,9 +181,9 @@ function SelectMapModal({ } } - function handleMapSelect(map) { + async function handleMapSelect(map) { + setSelectedMapState(await db.table("states").get(map.id)); setSelectedMap(map); - db.table("states").get(map.id).then(setSelectedMapState); } async function handleMapReset(id) { @@ -260,7 +272,8 @@ function SelectMapModal({ maps={maps} onMapAdd={openImageDialog} onMapRemove={handleMapRemove} - selectedMap={selectedMap && selectedMap.id} + selectedMap={selectedMap} + selectedMapState={selectedMapState} onMapSelect={handleMapSelect} onMapReset={handleMapReset} onSubmit={handleSubmit}