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

Optimise token database sync and add loading indicator for multiple token hiding

Browse Source
This commit is contained in:
Mitchell McCaffrey 2021-06-14 15:18:07 +10:00
parent 0fbd837449
commit 1e26193457
4 changed files with 72 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/map/MapTiles.js
View File

@ -20,21 +20,25 @@ function MapTiles({ mapsById, onMapEdit, onMapSelect, subgroup }) {
function renderTile(group) {
if (group.type === "item") {
const map = mapsById[group.id];
const isSelected = selectedGroupIds.includes(group.id);
const canEdit =
isSelected && selectMode === "single" && selectedGroupIds.length === 1;
return (
<MapTile
key={map.id}
map={map}
isSelected={isSelected}
onSelect={onGroupSelect}
onEdit={onMapEdit}
onDoubleClick={() => canEdit && onMapSelect(group.id)}
canEdit={canEdit}
badges={[`${map.grid.size.x}x${map.grid.size.y}`]}
/>
);
if (map) {
const isSelected = selectedGroupIds.includes(group.id);
const canEdit =
isSelected &&
selectMode === "single" &&
selectedGroupIds.length === 1;
return (
<MapTile
key={map.id}
map={map}
isSelected={isSelected}
onSelect={onGroupSelect}
onEdit={onMapEdit}
onDoubleClick={() => canEdit && onMapSelect(group.id)}
canEdit={canEdit}
badges={[`${map.grid.size.x}x${map.grid.size.y}`]}
/>
);
}
} else {
const isSelected = selectedGroupIds.includes(group.id);
const items = getGroupItems(group);

9
src/components/token/TokenEditBar.js
View File

@ -48,7 +48,14 @@ function TokenEditBar({ disabled, onLoad }) {
async function handleTokensHide(hideInSidebar) {
const selectedTokens = getSelectedTokens();
const selectedTokenIds = selectedTokens.map((token) => token.id);
updateTokensHidden(selectedTokenIds, hideInSidebar);
// Show loading indicator if hiding more than 10 tokens
if (selectedTokenIds.length > 10) {
onLoad(true);
await updateTokensHidden(selectedTokenIds, hideInSidebar);
onLoad(false);
} else {
updateTokensHidden(selectedTokenIds, hideInSidebar);
}
}
/**

38
src/components/token/TokenTiles.js
View File

@ -21,24 +21,28 @@ function TokenTiles({ tokensById, onTokenEdit, subgroup }) {
function renderTile(group) {
if (group.type === "item") {
const token = tokensById[group.id];
const isSelected = selectedGroupIds.includes(group.id);
const canEdit =
isSelected && selectMode === "single" && selectedGroupIds.length === 1;
if (token) {
const isSelected = selectedGroupIds.includes(group.id);
const canEdit =
isSelected &&
selectMode === "single" &&
selectedGroupIds.length === 1;
return (
<TokenTile
key={token.id}
token={token}
isSelected={isSelected}
onSelect={onGroupSelect}
onTokenEdit={onTokenEdit}
canEdit={canEdit}
badges={[
`${token.defaultSize}x`,
<TokenHiddenBadge hidden={token.hideInSidebar} />,
]}
/>
);
return (
<TokenTile
key={token.id}
token={token}
isSelected={isSelected}
onSelect={onGroupSelect}
onTokenEdit={onTokenEdit}
canEdit={canEdit}
badges={[
`${token.defaultSize}x`,
<TokenHiddenBadge hidden={token.hideInSidebar} />,
]}
/>
);
}
} else {
const isSelected = selectedGroupIds.includes(group.id);
const items = getGroupItems(group);

37
src/contexts/TokenDataContext.js
View File

@ -115,30 +115,24 @@ export function TokenDataProvider({ children }) {
}
function handleTokenChanges(changes) {
// Pool token changes together to call a single state update at the end
let tokensCreated = [];
let tokensUpdated = {};
let tokensDeleted = [];
for (let change of changes) {
if (change.table === "tokens") {
if (change.type === 1) {
// Created
const token = change.obj;
setTokens((prevTokens) => [token, ...prevTokens]);
tokensCreated.push(token);
} else if (change.type === 2) {
// Updated
const token = change.obj;
setTokens((prevTokens) => {
const newTokens = [...prevTokens];
const i = newTokens.findIndex((t) => t.id === token.id);
if (i > -1) {
newTokens[i] = token;
}
return newTokens;
});
tokensUpdated[token.id] = token;
} else if (change.type === 3) {
// Deleted
const id = change.key;
setTokens((prevTokens) => {
const filtered = prevTokens.filter((token) => token.id !== id);
return filtered;
});
tokensDeleted.push(id);
}
}
if (change.table === "groups") {
@ -149,6 +143,23 @@ export function TokenDataProvider({ children }) {
}
}
}
const tokensUpdatedArray = Object.values(tokensUpdated);
if (
tokensCreated.length > 0 ||
tokensUpdatedArray.length > 0 ||
tokensDeleted.length > 0
) {
setTokens((prevTokens) => {
let newTokens = [...tokensCreated, ...prevTokens];
for (let token of tokensUpdatedArray) {
const tokenIndex = newTokens.findIndex((t) => t.id === token.id);
if (tokenIndex > -1) {
newTokens[tokenIndex] = token;
}
}
return newTokens.filter((token) => !tokensDeleted.includes(token.id));
});
}
}
database.on("changes", handleTokenChanges);