Fix performance issue from changing map state

src/components/map/Map.js

@@ -286,6 +286,7 @@ function Map({
       onMapChange={onMapChange}
       onMapStateChange={onMapStateChange}
       currentMap={map}
+      currentMapState={mapState}
       onSelectedToolChange={setSelectedToolId}
       selectedToolId={selectedToolId}
       toolSettings={toolSettings}

src/components/map/MapControls.js

@@ -22,6 +22,7 @@ function MapContols({
   onMapChange,
   onMapStateChange,
   currentMap,
+  currentMapState,
   selectedToolId,
   onSelectedToolChange,
   toolSettings,
@@ -73,6 +74,7 @@ function MapContols({
           onMapChange={onMapChange}
           onMapStateChange={onMapStateChange}
           currentMap={currentMap}
+          currentMapState={currentMapState}
         />
       ),
     },

src/components/map/SelectMapButton.js

@@ -1,12 +1,22 @@
-import React, { useState } from "react";
+import React, { useState, useContext } from "react";
 import { IconButton } from "theme-ui";
 
 import SelectMapModal from "../../modals/SelectMapModal";
 import SelectMapIcon from "../../icons/SelectMapIcon";
 
-function SelectMapButton({ onMapChange, onMapStateChange, currentMap }) {
+import MapDataContext from "../../contexts/MapDataContext";
+
+function SelectMapButton({
+  onMapChange,
+  onMapStateChange,
+  currentMap,
+  currentMapState,
+}) {
   const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const { updateMapState } = useContext(MapDataContext);
   function openModal() {
+    currentMapState && updateMapState(currentMapState.mapId, currentMapState);
     setIsModalOpen(true);
   }
   function closeModal() {

src/routes/Game.js

@@ -17,7 +17,6 @@ import AuthModal from "../modals/AuthModal";
 
 import AuthContext from "../contexts/AuthContext";
 import DatabaseContext from "../contexts/DatabaseContext";
-import MapDataContext from "../contexts/MapDataContext";
 
 function Game() {
   const { database } = useContext(DatabaseContext);
@@ -70,7 +69,6 @@ function Game() {
     }
   }
 
-  const { updateMapState } = useContext(MapDataContext);
   // Sync the map state to the database after 500ms of inactivity
   const debouncedMapState = useDebounce(mapState, 500);
   useEffect(() => {
@@ -81,9 +79,11 @@ function Game() {
       map.owner === userId &&
       database
     ) {
-      updateMapState(debouncedMapState.mapId, debouncedMapState);
+      database
+        .table("states")
+        .update(debouncedMapState.mapId, debouncedMapState);
     }
-  }, [map, debouncedMapState, userId, database, updateMapState]);
+  }, [map, debouncedMapState, userId, database]);
 
   function handleMapChange(newMap, newMapState) {
     setMapState(newMapState);