v3: code quality pass, various bug fixes

src/pages/Dump.tsx

@@ -57,13 +57,16 @@ export function Dump() {
 
   useEffect(() => {
     if (!selectedDump) return;
+    const controller = new AbortController();
 
     if (preloaded) {
-      fetch(`${API_URL}/api/users/by-id/${preloaded.userId}`)
+      fetch(`${API_URL}/api/users/by-id/${preloaded.userId}`, {
+        signal: controller.signal,
+      })
         .then((r) => r.json())
         .then((r) => r.success && setOp(deserializePublicUser(r.data)))
         .catch(() => {});
-      return;
+      return () => controller.abort();
     }
 
     setDumpState({ status: "loading" });
@@ -73,6 +76,7 @@ export function Dump() {
       try {
         const res = await fetch(`${API_URL}/api/dumps/${selectedDump}`, {
           cache: "no-store",
+          signal: controller.signal,
           headers: token ? { Authorization: `Bearer ${token}` } : {},
         });
         const apiResponse = await res.json();
@@ -82,14 +86,18 @@ export function Dump() {
         const dump: Dump = deserializeDump(apiResponse.data);
         setDumpState({ status: "loaded", dump });
 
-        fetch(`${API_URL}/api/users/by-id/${dump.userId}`)
+        fetch(`${API_URL}/api/users/by-id/${dump.userId}`, {
+          signal: controller.signal,
+        })
           .then((r) => r.json())
           .then((r) => r.success && setOp(deserializePublicUser(r.data)))
           .catch(() => {});
       } catch (err) {
+        if ((err as Error).name === "AbortError") return;
         setDumpState({ status: "error", error: friendlyFetchError(err) });
       }
     })();
+    return () => controller.abort();
   }, [selectedDump, preloaded]);
 
   useEffect(() => {
@@ -105,7 +113,9 @@ export function Dump() {
   // Fetch comments when dump loads
   useEffect(() => {
     if (!selectedDump) return;
+    const controller = new AbortController();
     fetch(`${API_URL}/api/dumps/${selectedDump}/comments`, {
+      signal: controller.signal,
       headers: token ? { Authorization: `Bearer ${token}` } : {},
     })
       .then((r) => r.json())
@@ -115,6 +125,7 @@ export function Dump() {
         }
       })
       .catch(() => {});
+    return () => controller.abort();
   }, [selectedDump, token]);
 
   // Scroll to and highlight a comment when navigating to #comment-{id}
@@ -133,8 +144,11 @@ export function Dump() {
   }, [comments, location.hash]);
 
   // React to WS comment events
+  // Note: selectedDump may be a slug, but lastCommentEvent.dumpId is always a UUID.
+  // Compare against the loaded dump's actual ID.
+  const loadedDumpId = dumpState.status === "loaded" ? dumpState.dump.id : null;
   useEffect(() => {
-    if (!lastCommentEvent || lastCommentEvent.dumpId !== selectedDump) return;
+    if (!lastCommentEvent || !loadedDumpId || lastCommentEvent.dumpId !== loadedDumpId) return;
     if (lastCommentEvent.type === "created" && lastCommentEvent.comment) {
       setComments((prev) => {
         if (prev.some((c) => c.id === lastCommentEvent.comment!.id)) {
@@ -161,7 +175,7 @@ export function Dump() {
         )
       );
     }
-  }, [lastCommentEvent, selectedDump]);
+  }, [lastCommentEvent, loadedDumpId]);
 
   if (dumpState.status === "loading") {
     return (