fix(settings): tag deletion hangs (@fehmer)

Author: fehmer

frontend/src/ts/collections/results.ts

@@ -32,9 +32,9 @@ import {
   saveLocalTagPB,
 } from "./tags";
 import { isAuthenticated } from "../states/core";
-import { createEffectOn } from "../hooks/effects";
 import { getLastResult, setLastResult } from "../states/snapshot";
 import { applyIdWorkaround } from "./utils/misc";
+import { createEffectOn } from "../hooks/effects";
 
 export type ResultsQueryState = {
   difficulty: SnapshotResult<Mode>["difficulty"][];
@@ -260,6 +260,9 @@ type ActionType = {
   insertLocalResult: {
     result: SnapshotResult<Mode>;
   };
+  deleteLocalTag: {
+    tagId: string;
+  };
 };
 
 const actions = {
@@ -313,12 +316,29 @@ const actions = {
   }),
   insertLocalResult: createOptimisticAction<ActionType["insertLocalResult"]>({
     onMutate: ({ result }) => {
+      console.log("### insertLocalResult mutate");
       resultsCollection.insert(result);
     },
     mutationFn: async ({ result }) => {
+      console.log("### insertLocalResult mutationFn");
       resultsCollection.utils.writeInsert(normalizeResult(result));
     },
   }),
+  deleteLocalTag: createOptimisticAction<ActionType["deleteLocalTag"]>({
+    onMutate: ({ tagId }) => {
+      for (const result of [...resultsCollection.values()].filter((it) =>
+        it.tags.includes(tagId),
+      )) {
+        resultsCollection.utils.writeUpdate({
+          ...result,
+          tags: result.tags.filter((it) => it !== tagId),
+        });
+      }
+    },
+    mutationFn: async () => {
+      return true;
+    },
+  }),
 };
 // --- Public API ---
 export async function updateTags(
@@ -382,6 +402,17 @@ export async function insertLocalResult(
   await transaction.isPersisted.promise;
 }
 
+export async function deleteLocalTag(
+  params: ActionType["deleteLocalTag"],
+): Promise<void> {
+  if (!resultsCollection.isReady()) {
+    //not loaded yet, don't need to update
+    return;
+  }
+  const transtaction = actions.deleteLocalTag(params);
+  await transtaction.isPersisted.promise;
+}
+
 // oxlint-disable-next-line typescript/explicit-function-return-type
 export function buildResultsQuery(state: ResultsQueryState) {
   const applyMode2Filter = <T extends "time" | "words">(
@@ -622,21 +653,6 @@ function buildSettingsResultsQuery(
   return query;
 }
 
-export function deleteLocalTag(tagId: string): void {
-  resultsCollection.utils.writeBatch(() => {
-    for (const result of [...resultsCollection.values()]) {
-      if (!result.tags.includes(tagId)) {
-        continue;
-      }
-
-      resultsCollection.utils.writeUpdate({
-        ...result,
-        tags: result.tags.filter((it) => it !== tagId),
-      });
-    }
-  });
-}
-
 export function isResultsReady(): boolean {
   return resultsCollection.isReady();
 }

frontend/src/ts/modals/edit-tag.ts

@@ -106,7 +106,7 @@ const actionModals: Record<Action, SimpleModal> = {
         };
       }
 
-      deleteLocalTag(tagId);
+      await deleteLocalTag({ tagId });
       void Settings.update();
 
       return { status: "success", message: `Tag removed` };