Fix performance issue from changing map state
This commit is contained in:
parent
7b98370e4c
commit
dbc3cd83e7
@ -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}
|
||||||
|
@ -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}
|
||||||
/>
|
/>
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
|
@ -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() {
|
||||||
|
@ -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);
|
||||||
|
Loading…
Reference in New Issue
Block a user