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

Fixed settings update delay

Browse Source
This commit is contained in:
Mitchell McCaffrey 2020-04-26 20:48:01 +10:00
parent 079f3704d4
commit 3112890fd3
2 changed files with 5 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/map/MapSettings.js
View File

@ -1,11 +1,8 @@
import React, { useEffect, useState } from "react";
import React from "react";
import { Flex, Box, Label, Input, Checkbox, IconButton } from "theme-ui";
import ExpandMoreIcon from "../../icons/ExpandMoreIcon";
import useDebounce from "../../helpers/useDebounce";
import usePrevious from "../../helpers/usePrevious";
function MapSettings({
map,
mapState,
@ -25,23 +22,6 @@ function MapSettings({
}
}
// Create a local state for the map name to debounce calls to settings change
// and avoid performance issues with db access
const [localMapName, setLocalMapName] = useState("");
const prevMap = usePrevious(map);
useEffect(() => {
// Check map changed
if (map && (!prevMap || map.id !== prevMap.id)) {
setLocalMapName(map.name);
}
}, [map]);
const debouncedLocalMapName = useDebounce(localMapName, 100);
useEffect(() => {
if (map) {
onSettingsChange("name", debouncedLocalMapName);
}
}, [debouncedLocalMapName]);
return (
<Flex sx={{ flexDirection: "column" }}>
<Flex>
@ -115,8 +95,8 @@ function MapSettings({
<Label htmlFor="name">Name</Label>
<Input
name="name"
value={localMapName}
onChange={(e) => setLocalMapName(e.target.value)}
value={(map && map.name) || ""}
onChange={(e) => onSettingsChange("name", e.target.value)}
disabled={map === null || map.type === "default"}
my={1}
/>

4
src/modals/SelectMapModal.js
View File

@ -244,7 +244,7 @@ function SelectMapModal({
const [showMoreSettings, setShowMoreSettings] = useState(false);
async function handleMapSettingsChange(key, value) {
await db.table("maps").update(selectedMap.id, { [key]: value });
db.table("maps").update(selectedMap.id, { [key]: value });
const newMap = { ...selectedMap, [key]: value };
setMaps((prevMaps) => {
const newMaps = [...prevMaps];
@ -258,7 +258,7 @@ function SelectMapModal({
}
async function handleMapStateSettingsChange(key, value) {
await db.table("states").update(selectedMap.id, { [key]: value });
db.table("states").update(selectedMap.id, { [key]: value });
setSelectedMapState((prevState) => ({ ...prevState, [key]: value }));
}