Fix selectMapButton name and a bug with deleting a map that isn't the current one

src/components/map/Map.js

@@ -22,6 +22,7 @@ function Map({
   onMapTokenChange,
   onMapTokenRemove,
   onMapChange,
+  onMapStateChange,
   onMapDraw,
   onMapDrawUndo,
   onMapDrawRedo,
@@ -296,6 +297,8 @@ function Map({
         </Box>
         <MapControls
           onMapChange={onMapChange}
+          onMapStateChange={onMapStateChange}
+          currentMap={map}
           onToolChange={setSelectedTool}
           selectedTool={selectedTool}
           disabledTools={disabledTools}

src/components/map/MapControls.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useRef } from "react";
 import { Flex, Box, IconButton, Label } from "theme-ui";
 
-import SelectMapButton from "./SelectMapIcon";
+import SelectMapButton from "./SelectMapButton";
 import ExpandMoreIcon from "../../icons/ExpandMoreIcon";
 import PanToolIcon from "../../icons/PanToolIcon";
 import BrushToolIcon from "../../icons/BrushToolIcon";
@@ -22,6 +22,8 @@ import EraseAllIcon from "../../icons/EraseAllIcon";
 
 function MapControls({
   onMapChange,
+  onMapStateChange,
+  currentMap,
   onToolChange,
   selectedTool,
   disabledTools,
@@ -233,7 +235,11 @@ function MapControls({
           p={2}
           ref={expanedMenuRef}
         >
-          <SelectMapButton onMapChange={onMapChange} />
+          <SelectMapButton
+            onMapChange={onMapChange}
+            onMapStateChange={onMapStateChange}
+            currentMap={currentMap}
+          />
           {divider}
           <IconButton
             aria-label="Pan Tool"

src/components/map/SelectMapButton.js

@@ -4,7 +4,7 @@ import { IconButton } from "theme-ui";
 import SelectMapModal from "../../modals/SelectMapModal";
 import SelectMapIcon from "../../icons/SelectMapIcon";
 
-function SelectMapButton({ onMapChange }) {
+function SelectMapButton({ onMapChange, onMapStateChange, currentMap }) {
   const [isAddModalOpen, setIsAddModalOpen] = useState(false);
   function openModal() {
     setIsAddModalOpen(true);
@@ -13,10 +13,7 @@ function SelectMapButton({ onMapChange }) {
     setIsAddModalOpen(false);
   }
 
-  function handleDone(map, mapState) {
+  function handleDone() {
-    if (map) {
-      onMapChange(map, mapState);
-    }
     closeModal();
   }
 
@@ -33,6 +30,9 @@ function SelectMapButton({ onMapChange }) {
         isOpen={isAddModalOpen}
         onRequestClose={closeModal}
         onDone={handleDone}
+        onMapChange={onMapChange}
+        onMapStateChange={onMapStateChange}
+        currentMap={currentMap}
       />
     </>
   );

src/modals/SelectMapModal.js

@@ -18,10 +18,19 @@ const defaultMapState = {
   drawActions: [],
 };
 
-function SelectMapModal({ isOpen, onRequestClose, onDone }) {
+function SelectMapModal({
+  isOpen,
+  onRequestClose,
+  onDone,
+  onMapChange,
+  onMapStateChange,
+  // The map currently being view in the map screen
+  currentMap,
+}) {
   const [imageLoading, setImageLoading] = useState(false);
 
-  const [currentMap, setCurrentMap] = useState(null);
+  // The map selected in the modal
+  const [selectedMap, setSelectedMap] = useState(null);
   const [maps, setMaps] = useState([]);
   // Load maps from the database and ensure state is properly setup
   useEffect(() => {
@@ -121,48 +130,60 @@ function SelectMapModal({ isOpen, onRequestClose, onDone }) {
     await db.table("maps").add(map);
     await db.table("states").add({ ...defaultMapState, mapId: map.id });
     setMaps((prevMaps) => [map, ...prevMaps]);
-    setCurrentMap(map);
+    setSelectedMap(map);
     setGridX(map.gridX);
     setGridY(map.gridY);
   }
 
+  // Keep track of removed maps
   async function handleMapRemove(id) {
     await db.table("maps").delete(id);
     await db.table("states").delete(id);
     setMaps((prevMaps) => {
       const filtered = prevMaps.filter((map) => map.id !== id);
-      setCurrentMap(filtered[0]);
+      setSelectedMap(filtered[0]);
       return filtered;
     });
+    // Removed the map from the map screen if needed
+    if (currentMap.id === selectedMap.id) {
+      onMapChange(null);
+    }
   }
 
   function handleMapSelect(map) {
-    setCurrentMap(map);
+    setSelectedMap(map);
     setGridX(map.gridX);
     setGridY(map.gridY);
   }
 
   async function handleMapReset(id) {
-    await db.table("states").put({ ...defaultMapState, mapId: id });
+    const state = { ...defaultMapState, mapId: id };
+    await db.table("states").put(state);
+    // Reset the state of the current map if needed
+    if (currentMap.id === selectedMap.id) {
+      onMapStateChange(state);
+    }
   }
 
   async function handleSubmit(e) {
     e.preventDefault();
-    if (currentMap) {
+    if (selectedMap) {
       let currentMapState =
-        (await db.table("states").get(currentMap.id)) || defaultMapState;
+        (await db.table("states").get(selectedMap.id)) || defaultMapState;
-      onDone(currentMap, currentMapState);
+      onMapStateChange(currentMapState);
+      onMapChange(selectedMap);
+      onDone();
     }
-    onDone(null, null);
+    onDone();
   }
 
   async function handleGridXChange(e) {
     const newX = e.target.value;
-    await db.table("maps").update(currentMap.id, { gridX: newX });
+    await db.table("maps").update(selectedMap.id, { gridX: newX });
     setGridX(newX);
     setMaps((prevMaps) => {
       const newMaps = [...prevMaps];
-      const i = newMaps.findIndex((map) => map.id === currentMap.id);
+      const i = newMaps.findIndex((map) => map.id === selectedMap.id);
       if (i > -1) {
         newMaps[i].gridX = newX;
       }
@@ -172,11 +193,11 @@ function SelectMapModal({ isOpen, onRequestClose, onDone }) {
 
   async function handleGridYChange(e) {
     const newY = e.target.value;
-    await db.table("maps").update(currentMap.id, { gridY: newY });
+    await db.table("maps").update(selectedMap.id, { gridY: newY });
     setGridY(newY);
     setMaps((prevMaps) => {
       const newMaps = [...prevMaps];
-      const i = newMaps.findIndex((map) => map.id === currentMap.id);
+      const i = newMaps.findIndex((map) => map.id === selectedMap.id);
       if (i > -1) {
         newMaps[i].gridY = newY;
       }
@@ -232,7 +253,7 @@ function SelectMapModal({ isOpen, onRequestClose, onDone }) {
             maps={maps}
             onMapAdd={openImageDialog}
             onMapRemove={handleMapRemove}
-            selectedMap={currentMap && currentMap.id}
+            selectedMap={selectedMap && selectedMap.id}
             onMapSelect={handleMapSelect}
             onMapReset={handleMapReset}
           />
@@ -244,7 +265,7 @@ function SelectMapModal({ isOpen, onRequestClose, onDone }) {
                 name="gridX"
                 value={gridX}
                 onChange={handleGridXChange}
-                disabled={currentMap === null || currentMap.default}
+                disabled={selectedMap === null || selectedMap.default}
                 min={1}
               />
             </Box>
@@ -255,7 +276,7 @@ function SelectMapModal({ isOpen, onRequestClose, onDone }) {
                 name="gridY"
                 value={gridY}
                 onChange={handleGridYChange}
-                disabled={currentMap === null || currentMap.default}
+                disabled={selectedMap === null || selectedMap.default}
                 min={1}
               />
             </Box>

src/routes/Game.js

@@ -48,12 +48,17 @@ function Game() {
     }
   }, [debouncedMapState]);
 
-  function handleMapChange(newMap, newMapState) {
+  function handleMapChange(newMap) {
     setMap(newMap);
+    for (let peer of Object.values(peers)) {
+      peer.connection.send({ id: "map", data: newMap });
+    }
+  }
+
+  function handleMapStateChange(newMapState) {
     setMapState(newMapState);
     for (let peer of Object.values(peers)) {
       peer.connection.send({ id: "mapState", data: newMapState });
-      peer.connection.send({ id: "map", data: newMap });
     }
   }
 
@@ -169,7 +174,7 @@ function Game() {
     if (data.id === "map") {
       // If we have a file convert it to a url
       // TODO clear the file url of the previous map if it's a blob
-      if (data.data.file) {
+      if (data.data && data.data.file) {
         const file = new Blob([data.data.file]);
         const source = URL.createObjectURL(file);
         setMap({ ...data.data, file, source });
@@ -323,6 +328,7 @@ function Game() {
             onMapTokenChange={handleMapTokenChange}
             onMapTokenRemove={handleMapTokenRemove}
             onMapChange={handleMapChange}
+            onMapStateChange={handleMapStateChange}
             onMapDraw={handleMapDraw}
             onMapDrawUndo={handleMapDrawUndo}
             onMapDrawRedo={handleMapDrawRedo}