Atlas48/grungnet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix performance issue from changing map state

Browse Source
This commit is contained in:
Mitchell McCaffrey 2020-05-19 16:33:23 +10:00
parent 7b98370e4c
commit dbc3cd83e7
4 changed files with 19 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/map/Map.js
View File

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

2
src/components/map/MapControls.js
View File

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

14
src/components/map/SelectMapButton.js
View File

@ -1,12 +1,22 @@
import React, { useState } from "react"; import React, { useState, useContext } from "react";
import { IconButton } from "theme-ui"; import { IconButton } from "theme-ui";
import SelectMapModal from "../../modals/SelectMapModal"; import SelectMapModal from "../../modals/SelectMapModal";
import SelectMapIcon from "../../icons/SelectMapIcon"; 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 [isModalOpen, setIsModalOpen] = useState(false);
const { updateMapState } = useContext(MapDataContext);
function openModal() { function openModal() {
currentMapState && updateMapState(currentMapState.mapId, currentMapState);
setIsModalOpen(true); setIsModalOpen(true);
} }
function closeModal() { function closeModal() {

8
src/routes/Game.js
View File

@ -17,7 +17,6 @@ import AuthModal from "../modals/AuthModal";
import AuthContext from "../contexts/AuthContext"; import AuthContext from "../contexts/AuthContext";
import DatabaseContext from "../contexts/DatabaseContext"; import DatabaseContext from "../contexts/DatabaseContext";
import MapDataContext from "../contexts/MapDataContext";
function Game() { function Game() {
const { database } = useContext(DatabaseContext); 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 // Sync the map state to the database after 500ms of inactivity
const debouncedMapState = useDebounce(mapState, 500); const debouncedMapState = useDebounce(mapState, 500);
useEffect(() => { useEffect(() => {
@ -81,9 +79,11 @@ function Game() {
map.owner === userId && map.owner === userId &&
database 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) { function handleMapChange(newMap, newMapState) {
setMapState(newMapState); setMapState(newMapState);