fix(settings): tag deletion doesn't update results (@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 = {
@@ -313,11 +316,28 @@ const actions = {
   }),
   insertLocalResult: createOptimisticAction<ActionType["insertLocalResult"]>({
     onMutate: ({ result }) => {
-      resultsCollection.insert(result);
-    },
-    mutationFn: async ({ result }) => {
       resultsCollection.utils.writeInsert(normalizeResult(result));
     },
+    mutationFn: async () => {
+      //we don't sync the changes back to the backend here, it is done already
+      return;
+    },
+  }),
+  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 () => {
+      //we do not sync the changes back to the backend
+      return;
+    },
   }),
 };
 // --- Public API ---
@@ -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 transaction = actions.deleteLocalTag(params);
+  await transaction.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/components/pages/settings/custom-setting/Tags.tsx

@@ -1,6 +1,7 @@
 import { TagNameSchema } from "@monkeytype/schemas/users";
 import { JSXElement, For } from "solid-js";
 
+import { deleteLocalTag } from "../../../../collections/results";
 import {
   clearTagPBs,
   deleteTag,
@@ -112,6 +113,7 @@ export function Tags(): JSXElement {
                       execFn: async () => {
                         showLoaderBar();
                         await deleteTag({ tagId: tag._id });
+                        await deleteLocalTag({ tagId: tag._id });
                         hideLoaderBar();
                         return {
                           status: "success",