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

Author: fehmer

frontend/src/ts/collections/results.ts

@@ -24,16 +24,16 @@ import { queryOptions } from "@tanstack/solid-query";
 import { Accessor } from "solid-js";
 import Ape from "../ape";
 import { SnapshotResult } from "../constants/default-snapshot";
+import { createEffectOn } from "../hooks/effects";
 import { queryClient } from "../queries";
 import { baseKey } from "../queries/utils/keys";
+import { isAuthenticated } from "../states/core";
+import { getLastResult, setLastResult } from "../states/snapshot";
 import {
-  __nonReactive as tagsNonReactive,
   reconcileLocalTagPB,
   saveLocalTagPB,
+  __nonReactive as tagsNonReactive,
 } from "./tags";
-import { isAuthenticated } from "../states/core";
-import { createEffectOn } from "../hooks/effects";
-import { getLastResult, setLastResult } from "../states/snapshot";
 import { applyIdWorkaround } from "./utils/misc";
 
 export type ResultsQueryState = {
@@ -260,6 +260,9 @@ type ActionType = {
   insertLocalResult: {
     result: SnapshotResult<Mode>;
   };
+  deleteLocalTag: {
+    tagId: string;
+  };
 };
 
 const actions = {
@@ -319,6 +322,21 @@ const actions = {
       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 +400,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 +651,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` };