reload maps every time the select map modal is opened

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 = (
     <IconButton
@@ -81,7 +70,6 @@ function MapTile({
         onClick={(e) => {
           e.preventDefault();
           e.stopPropagation();
-          setHasMapState(false);
           setIsTileMenuOpen(false);
           onMapReset(map.id);
         }}

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({
           <MapTile
             key={map.id}
             map={map}
-            isSelected={map.id === selectedMap}
+            mapState={
+              selectedMap && map.id === selectedMap.id && selectedMapState
+            }
+            isSelected={selectedMap && map.id === selectedMap.id}
             onMapSelect={onMapSelect}
             onMapRemove={onMapRemove}
             onMapReset={onMapReset}

src/helpers/usePrevious.js

@@ -0,0 +1,11 @@
+import { useEffect, useRef } from "react";
+
+function usePrevious(value) {
+  const ref = useRef();
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+  return ref.current;
+}
+
+export default usePrevious;

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}