From 1e2619345782c9977108ce5766a9a88b3a9ded85 Mon Sep 17 00:00:00 2001
From: Mitchell McCaffrey <mitchemmc@gmail.com>
Date: Mon, 14 Jun 2021 15:18:07 +1000
Subject: [PATCH] Optimise token database sync and add loading indicator for
 multiple token hiding

---
 src/components/map/MapTiles.js       | 34 ++++++++++++++-----------
 src/components/token/TokenEditBar.js |  9 ++++++-
 src/components/token/TokenTiles.js   | 38 +++++++++++++++-------------
 src/contexts/TokenDataContext.js     | 37 +++++++++++++++++----------
 4 files changed, 72 insertions(+), 46 deletions(-)

diff --git a/src/components/map/MapTiles.js b/src/components/map/MapTiles.js
index 3adeba6..044575e 100644
--- a/src/components/map/MapTiles.js
+++ b/src/components/map/MapTiles.js
@@ -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);
diff --git a/src/components/token/TokenEditBar.js b/src/components/token/TokenEditBar.js
index a759739..1150269 100644
--- a/src/components/token/TokenEditBar.js
+++ b/src/components/token/TokenEditBar.js
@@ -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);
+    }
   }
 
   /**
diff --git a/src/components/token/TokenTiles.js b/src/components/token/TokenTiles.js
index 02d5059..e61277c 100644
--- a/src/components/token/TokenTiles.js
+++ b/src/components/token/TokenTiles.js
@@ -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);
diff --git a/src/contexts/TokenDataContext.js b/src/contexts/TokenDataContext.js
index 9c98490..72780f3 100644
--- a/src/contexts/TokenDataContext.js
+++ b/src/contexts/TokenDataContext.js
@@ -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);