refactor: solid edit result tags modal (@fehmer)

frontend/src/html/popups.html

@@ -147,13 +147,6 @@
     <button class="submit">set</button>
   </div>
 </dialog>
-<dialog id="editResultTagsModal" class="modalWrapper hidden">
-  <div class="modal">
-    <div class="title">Edit result tags</div>
-    <div class="buttons"></div>
-    <button class="saveButton">save</button>
-  </div>
-</dialog>
 
 <dialog id="commandLine" class="modalWrapper hidden">
   <div class="modal">

frontend/src/styles/popups.scss

@@ -292,17 +292,6 @@ body.darkMode {
   }
 }
 
-#editResultTagsModal {
-  .modal {
-    max-width: 600px;
-    .buttons {
-      display: grid;
-      gap: 0.5rem;
-      grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
-    }
-  }
-}
-
 #streakHourOffsetModal {
   .modal {
     max-width: 500px;

frontend/src/ts/components/modals/EditResultTagsModal.tsx

@@ -0,0 +1,99 @@
+import { createEffect, createSignal, For } from "solid-js";
+
+import { updateTags } from "../../collections/results";
+import { useTagsLiveQuery } from "../../collections/tags";
+import { getSelectedResult } from "../../states/edit-result-tags";
+import { hideLoaderBar, showLoaderBar } from "../../states/loader-bar";
+import { hideModal } from "../../states/modals";
+import {
+  showErrorNotification,
+  showSuccessNotification,
+} from "../../states/notifications";
+import { updateTagsAfterEdit } from "../../test/result";
+import { areUnsortedArraysEqual } from "../../utils/arrays";
+import { createErrorMessage } from "../../utils/error";
+import { AnimatedModal } from "../common/AnimatedModal";
+import { Button } from "../common/Button";
+
+export function EditResultTagsModal() {
+  const [selectedTagIds, setSelectedTagIds] = createSignal<Set<string>>(
+    new Set([]),
+  );
+
+  const tags = useTagsLiveQuery();
+
+  createEffect(() => {
+    const resultTags = getSelectedResult()?.tags ?? [];
+    const knownTagIds = new Set(tags().map((tag) => tag._id));
+    const filtered = resultTags.filter((id) => knownTagIds.has(id));
+    setSelectedTagIds(new Set(filtered));
+  });
+
+  return (
+    <AnimatedModal
+      id="EditResultTags"
+      title="Edit result tags"
+      modalClass="max-w-xl"
+    >
+      <div class="grid grid-cols-[repeat(auto-fit,minmax(10rem,1fr))] gap-2">
+        <For each={tags()}>
+          {(tag) => (
+            <Button
+              text={tag.name}
+              class="w-full"
+              active={selectedTagIds().has(tag._id)}
+              onClick={() => {
+                const current = new Set(selectedTagIds());
+                if (current.has(tag._id)) {
+                  current.delete(tag._id);
+                } else {
+                  current.add(tag._id);
+                }
+                setSelectedTagIds(current);
+              }}
+            />
+          )}
+        </For>
+      </div>
+      <Button
+        class="w-full"
+        text="save"
+        onClick={() => {
+          const selected = getSelectedResult();
+          if (selected === null) return;
+          const currentTagIds = selected.tags ?? [];
+          const newTagIds = [...selectedTagIds()];
+
+          if (areUnsortedArraysEqual(currentTagIds, newTagIds)) {
+            hideModal("EditResultTags");
+            return;
+          }
+
+          showLoaderBar();
+
+          void updateTags({
+            resultId: selected._id,
+            currentTagIds,
+            newTagIds,
+            afterUpdate: ({ tagPbs }) => {
+              if (selected.source === "resultPage") {
+                updateTagsAfterEdit(newTagIds, tagPbs);
+              }
+            },
+          })
+            .then(() =>
+              showSuccessNotification("Tags updated", { durationMs: 2000 }),
+            )
+            .catch((e: unknown) => {
+              const message = createErrorMessage(e, "Failed to update tags");
+              showErrorNotification(message);
+            })
+            .finally(() => {
+              hideLoaderBar();
+              hideModal("EditResultTags");
+            });
+        }}
+      />
+    </AnimatedModal>
+  );
+}

frontend/src/ts/components/modals/Modals.tsx

@@ -6,6 +6,7 @@ import { CookiesModal } from "./CookiesModal";
 import { CustomTestDurationModal } from "./CustomTestDurationModal";
 import { CustomTextModal } from "./CustomTextModal";
 import { CustomWordAmountModal } from "./CustomWordAmountModal";
+import { EditResultTagsModal } from "./EditResultTagsModal";
 import { LastSignedOutResultModal } from "./LastSignedOutResultModal";
 import { MobileTestConfigModal } from "./MobileTestConfigModal";
 import { AddPresetModal } from "./preset/AddPresetModal";
@@ -40,6 +41,7 @@ export function Modals(): JSXElement {
       <EditPresetModal />
       <ViewApeKeyModal />
       <LastSignedOutResultModal />
+      <EditResultTagsModal />
     </>
   );
 }

frontend/src/ts/components/pages/account/Table.tsx

@@ -6,8 +6,8 @@ import { Accessor, createMemo, createSignal, JSXElement, Show } from "solid-js";
 
 import { type TagItem, useTagsLiveQuery } from "../../../collections/tags";
 import { SnapshotResult } from "../../../constants/default-snapshot";
-import * as EditResultTagsModal from "../../../modals/edit-result-tags";
 import { getFormatting } from "../../../states/core";
+import { showEditResultTagsModal } from "../../../states/edit-result-tags";
 import { showModal } from "../../../states/modals";
 import { showNoticeNotification } from "../../../states/notifications";
 import { cn } from "../../../utils/cn";
@@ -261,11 +261,11 @@ function getColumns<M extends Mode>({
                 );
                 return;
               }
-              EditResultTagsModal.show(
-                info.row.original._id,
-                info.getValue(),
-                "accountPage",
-              );
+
+              showEditResultTagsModal({
+                _id: info.row.original._id,
+                tags: info.getValue(),
+              });
             }}
           />
         );

frontend/src/ts/event-handlers/test.ts

@@ -1,5 +1,4 @@
 import { Config } from "../config/store";
-import * as EditResultTagsModal from "../modals/edit-result-tags";
 import { __nonReactive } from "../collections/tags";
 import {
   showNoticeNotification,
@@ -12,6 +11,7 @@ import { navigate } from "../controllers/route-controller";
 import { getMode2 } from "../utils/misc";
 import { qs } from "../utils/dom";
 import { getCurrentQuote } from "../states/test";
+import { showEditResultTagsModal } from "../states/edit-result-tags";
 
 const testPage = qs(".pageTest");
 
@@ -25,7 +25,7 @@ testPage?.onChild("click", ".tags .editTagsButton", () => {
         "data-active-tag-ids",
       ) ?? "";
     const tags = activeTagIds === "" ? [] : activeTagIds.split(",");
-    EditResultTagsModal.show(resultid, tags, "resultPage");
+    showEditResultTagsModal({ _id: resultid, tags, source: "resultPage" });
   }
 });
 

frontend/src/ts/states/edit-result-tags.ts

@@ -0,0 +1,23 @@
+import { Result } from "@monkeytype/schemas/results";
+import { Mode } from "@monkeytype/schemas/shared";
+import { createSignal } from "solid-js";
+import { showModal } from "./modals";
+import { showErrorNotification } from "./notifications";
+
+type IdAndTags = Pick<Result<Mode>, "_id" | "tags"> & { source?: "resultPage" };
+const [getSelectedResult, setSelectedResult] = createSignal<IdAndTags | null>(
+  null,
+);
+
+export { getSelectedResult };
+
+export function showEditResultTagsModal(options: IdAndTags): void {
+  if (options._id === "") {
+    showErrorNotification(
+      "Failed to show edit result tags modal: result id is empty",
+    );
+    return;
+  }
+  setSelectedResult(options);
+  showModal("EditResultTags");
+}

frontend/src/ts/states/modals.ts

@@ -31,7 +31,8 @@ export type ModalId =
   | "EditPresetModal"
   | "EditProfile"
   | "ViewApeKey"
-  | "LastSignedOutResult";
+  | "LastSignedOutResult"
+  | "EditResultTags";
 
 export type ModalVisibility = {
   visible: boolean;