Moved map and token changes to observable

src/contexts/MapDataContext.js

@@ -136,9 +136,6 @@ export function MapDataProvider({ children }) {
         .slice(0, cacheDeleteCount)
         .map((map) => map.id);
       database.table("maps").where("id").anyOf(idsToDelete).delete();
-      setMaps((prevMaps) => {
-        return prevMaps.filter((map) => !idsToDelete.includes(map.id));
-      });
     }
   }, [database, userId]);
 
@@ -179,14 +176,6 @@ export function MapDataProvider({ children }) {
     async (id) => {
       const state = { ...defaultMapState, mapId: id };
       await database.table("states").put(state);
-      setMapStates((prevMapStates) => {
-        const newStates = [...prevMapStates];
-        const i = newStates.findIndex((state) => state.mapId === id);
-        if (i > -1) {
-          newStates[i] = state;
-        }
-        return newStates;
-      });
       return state;
     },
     [database]
@@ -202,14 +191,6 @@ export function MapDataProvider({ children }) {
         const map = (await getMapFromDB(id)) || {};
         await database.table("maps").put({ ...map, id, ...update });
       }
-      setMaps((prevMaps) => {
-        const newMaps = [...prevMaps];
-        const i = newMaps.findIndex((map) => map.id === id);
-        if (i > -1) {
-          newMaps[i] = { ...newMaps[i], ...update };
-        }
-        return newMaps;
-      });
     },
     [database, getMapFromDB]
   );
@@ -219,16 +200,6 @@ export function MapDataProvider({ children }) {
       await Promise.all(
         ids.map((id) => database.table("maps").update(id, update))
       );
-      setMaps((prevMaps) => {
-        const newMaps = [...prevMaps];
-        for (let id of ids) {
-          const i = newMaps.findIndex((map) => map.id === id);
-          if (i > -1) {
-            newMaps[i] = { ...newMaps[i], ...update };
-          }
-        }
-        return newMaps;
-      });
     },
     [database]
   );
@@ -236,14 +207,6 @@ export function MapDataProvider({ children }) {
   const updateMapState = useCallback(
     async (id, update) => {
       await database.table("states").update(id, update);
-      setMapStates((prevMapStates) => {
-        const newStates = [...prevMapStates];
-        const i = newStates.findIndex((state) => state.mapId === id);
-        if (i > -1) {
-          newStates[i] = { ...newStates[i], ...update };
-        }
-        return newStates;
-      });
     },
     [database]
   );
@@ -256,16 +219,6 @@ export function MapDataProvider({ children }) {
   const putMap = useCallback(
     async (map) => {
       await database.table("maps").put(map);
-      setMaps((prevMaps) => {
-        const newMaps = [...prevMaps];
-        const i = newMaps.findIndex((m) => m.id === map.id);
-        if (i > -1) {
-          newMaps[i] = { ...newMaps[i], ...map };
-        } else {
-          newMaps.unshift(map);
-        }
-        return newMaps;
-      });
       if (map.owner !== userId) {
         await updateCache();
       }
@@ -288,6 +241,16 @@ export function MapDataProvider({ children }) {
             const state = { ...defaultMapState, mapId: map.id };
             setMaps((prevMaps) => [map, ...prevMaps]);
             setMapStates((prevStates) => [state, ...prevStates]);
+          } else if (change.type === 2) {
+            const map = change.obj;
+            setMaps((prevMaps) => {
+              const newMaps = [...prevMaps];
+              const i = newMaps.findIndex((m) => m.id === map.id);
+              if (i > -1) {
+                newMaps[i] = map;
+              }
+              return newMaps;
+            });
           } else if (change.type === 3) {
             // Deleted
             const id = change.key;
@@ -303,6 +266,20 @@ export function MapDataProvider({ children }) {
             });
           }
         }
+        if (change.table === "states") {
+          if (change.type === 2) {
+            // Update map state
+            const state = change.obj;
+            setMapStates((prevMapStates) => {
+              const newStates = [...prevMapStates];
+              const i = newStates.findIndex((s) => s.mapId === state.mapId);
+              if (i > -1) {
+                newStates[i] = state;
+              }
+              return newStates;
+            });
+          }
+        }
       }
     }
 

src/contexts/TokenDataContext.js

@@ -106,9 +106,6 @@ export function TokenDataProvider({ children }) {
         .slice(0, cacheDeleteCount)
         .map((token) => token.id);
       database.table("tokens").where("id").anyOf(idsToDelete).delete();
-      setTokens((prevTokens) => {
-        return prevTokens.filter((token) => !idsToDelete.includes(token.id));
-      });
     }
   }, [database, userId]);
 
@@ -140,14 +137,6 @@ export function TokenDataProvider({ children }) {
     async (id, update) => {
       const change = { ...update, lastModified: Date.now() };
       await database.table("tokens").update(id, change);
-      setTokens((prevTokens) => {
-        const newTokens = [...prevTokens];
-        const i = newTokens.findIndex((token) => token.id === id);
-        if (i > -1) {
-          newTokens[i] = { ...newTokens[i], ...change };
-        }
-        return newTokens;
-      });
     },
     [database]
   );
@@ -158,16 +147,6 @@ export function TokenDataProvider({ children }) {
       await Promise.all(
         ids.map((id) => database.table("tokens").update(id, change))
       );
-      setTokens((prevTokens) => {
-        const newTokens = [...prevTokens];
-        for (let id of ids) {
-          const i = newTokens.findIndex((token) => token.id === id);
-          if (i > -1) {
-            newTokens[i] = { ...newTokens[i], ...change };
-          }
-        }
-        return newTokens;
-      });
     },
     [database]
   );
@@ -175,16 +154,6 @@ export function TokenDataProvider({ children }) {
   const putToken = useCallback(
     async (token) => {
       await database.table("tokens").put(token);
-      setTokens((prevTokens) => {
-        const newTokens = [...prevTokens];
-        const i = newTokens.findIndex((t) => t.id === token.id);
-        if (i > -1) {
-          newTokens[i] = { ...newTokens[i], ...token };
-        } else {
-          newTokens.unshift(token);
-        }
-        return newTokens;
-      });
       if (token.owner !== userId) {
         await updateCache();
       }
@@ -227,13 +196,24 @@ export function TokenDataProvider({ children }) {
       return;
     }
 
-    function handleMapChanges(changes) {
+    function handleTokenChanges(changes) {
       for (let change of changes) {
         if (change.table === "tokens") {
           if (change.type === 1) {
             // Created
             const token = change.obj;
             setTokens((prevTokens) => [token, ...prevTokens]);
+          } 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;
+            });
           } else if (change.type === 3) {
             // Deleted
             const id = change.key;
@@ -246,10 +226,10 @@ export function TokenDataProvider({ children }) {
       }
     }
 
-    database.on("changes", handleMapChanges);
+    database.on("changes", handleTokenChanges);
 
     return () => {
-      database.on("changes").unsubscribe(handleMapChanges);
+      database.on("changes").unsubscribe(handleTokenChanges);
     };
   }, [database, databaseStatus]);