From dbc3cd83e77b686a9c8397c9369764883370aeb1 Mon Sep 17 00:00:00 2001
From: Mitchell McCaffrey <mitchemmc@gmail.com>
Date: Tue, 19 May 2020 16:33:23 +1000
Subject: [PATCH] Fix performance issue from changing map state

---
 src/components/map/Map.js             |  1 +
 src/components/map/MapControls.js     |  2 ++
 src/components/map/SelectMapButton.js | 14 ++++++++++++--
 src/routes/Game.js                    |  8 ++++----
 4 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/components/map/Map.js b/src/components/map/Map.js
index 9754c37..f259128 100644
--- a/src/components/map/Map.js
+++ b/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}
diff --git a/src/components/map/MapControls.js b/src/components/map/MapControls.js
index 7399798..608e220 100644
--- a/src/components/map/MapControls.js
+++ b/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}
         />
       ),
     },
diff --git a/src/components/map/SelectMapButton.js b/src/components/map/SelectMapButton.js
index 536323f..fb8c81f 100644
--- a/src/components/map/SelectMapButton.js
+++ b/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() {
diff --git a/src/routes/Game.js b/src/routes/Game.js
index 390f0ff..298e581 100644
--- a/src/routes/Game.js
+++ b/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);