v3: comments say what the code can't — the documentation pass wanted JSDoc on every export and every field of an exported interface, which filled the code with restatements ("The dump.", "Whether it is loading.", "The props of X.", "Renders the X.") and module docs that told a reader nothing ("The hot and new feeds, and the props every main feed of the index takes."); some were wrong as well as vague. Every comment in api/, shared/ and src/ is rewritten under one rule, now stated in the README's "Comments" section: every module and export still has a JSDoc, and it gives context (who uses it and where), usage (what a caller must know: a precondition, what it leaves to the caller, a side effect) or its place in the chain (where its input comes from, where its output goes); a field, parameter, private function or local gets one only when it adds to its parent's, and context about a whole type goes on the type; a type's doc is phrased from the value's side ("Returned to Y by X when Z", "Passed to Y by X"); full sentences, as short as they can be, no label-colon-list; // goes wherever the code isn't obvious and says why, and the section banners and narration go. Every claim was checked against the code, which turned up some forty comments that were wrong: DumpCard's claimed it was only used by the hot and new feeds, the WebSocket welcome claimed to be a socket's first message (presence comes first), UpdateUserRequest said null removes a description (it keeps it), deletedDumpIds leaves out that it also holds dumps made private, THEME_COLOR claimed to mirror index.html's, and the like. The routers' JSDoc now says where they are mounted and what becomes of a thrown APIException. doc-lint.ts lets a field without a doc through; a module or export without one still fails. No code changes; 204 backend and 628 frontend tests pass, and doc:lint, deno check, deno lint and tsc are clean.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
@@ -1,5 +1,6 @@
|
||||
/**
|
||||
* The search results page.
|
||||
* The page that shows the results of a search, in a tab for dumps, one for
|
||||
* users and one for playlists.
|
||||
*
|
||||
* @module
|
||||
*/
|
||||
@@ -30,12 +31,10 @@ import type { Wire } from "../../shared/api.ts";
|
||||
import { DEFAULT_PAGE_SIZE, SEARCH_URL } from "../config/api.ts";
|
||||
import { friendlyFetchError } from "../utils/shared/api.ts";
|
||||
|
||||
/** The result tabs. */
|
||||
const SEARCH_TABS = ["dumps", "users", "playlists"] as const;
|
||||
/** One of the {@link SEARCH_TABS}. */
|
||||
type Tab = (typeof SEARCH_TABS)[number];
|
||||
|
||||
/** The page's state: idle, loading, failed, or loaded with the results. */
|
||||
// Only the dumps are paged: the API answers at most 20 users and playlists.
|
||||
type SearchState =
|
||||
| { status: "idle" }
|
||||
| { status: "loading" }
|
||||
@@ -55,8 +54,10 @@ type SearchState =
|
||||
};
|
||||
|
||||
/**
|
||||
* Renders `/search?q=` and `/search/~/:searchTab`, for anyone: the dumps (a
|
||||
* page at a time), users and playlists matching the query, one tab each.
|
||||
* Renders `/search?q=` and `/search/~/:searchTab`, for anyone. The results come
|
||||
* from `GET /api/search`, signed in when the viewer is, so they find their own
|
||||
* private dumps and playlists too. The dumps load a page at a time as the
|
||||
* "dumps" tab scrolls. A new `q` aborts the search under way.
|
||||
*/
|
||||
export function Search(): React.JSX.Element {
|
||||
useDocumentTitle(t`Search`);
|
||||
@@ -71,9 +72,8 @@ export function Search(): React.JSX.Element {
|
||||
const abortRef = useRef<AbortController | null>(null);
|
||||
|
||||
const fetchSearch = useCallback(async (query: string, page: number) => {
|
||||
// Deferred to a microtask so callers invoking this directly from an
|
||||
// effect body don't trip the synchronous-setState-in-effect check —
|
||||
// same timing for the user, just not in the same tick.
|
||||
// Deferred: the set-state-in-effect lint rule forbids setting state
|
||||
// synchronously in the effect that calls this.
|
||||
if (!query.trim()) {
|
||||
queueMicrotask(() => setState({ status: "idle" }));
|
||||
return;
|
||||
@@ -163,9 +163,7 @@ export function Search(): React.JSX.Element {
|
||||
}, [token]);
|
||||
|
||||
useEffect(() => {
|
||||
// fetchSearch is async; calling it directly is flagged as a synchronous
|
||||
// setState regardless of its own internal deferral, so defer the call
|
||||
// itself by a microtask too — same timing for the user.
|
||||
// The lint rule flags the call itself, whatever fetchSearch defers inside.
|
||||
queueMicrotask(() => fetchSearch(q, 1));
|
||||
return () => abortRef.current?.abort();
|
||||
}, [q, fetchSearch]);
|
||||
|
||||
Reference in New Issue
Block a user