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:
khannurien
@@ -1,5 +1,6 @@
|
||||
/**
|
||||
* A dump's page.
|
||||
* The page of a dump, with its preview, comments, related dumps and the
|
||||
* playlists holding it.
|
||||
*
|
||||
* @module
|
||||
*/
|
||||
@@ -46,17 +47,19 @@ import { Markdown } from "../components/editor/Markdown.tsx";
|
||||
import { CommentThread } from "../components/comment/CommentThread.tsx";
|
||||
import { Tooltip } from "../components/shared/Tooltip.tsx";
|
||||
|
||||
/** The page's state: loading, failed, or loaded with the dump. */
|
||||
type DumpState =
|
||||
| { status: "loading" }
|
||||
| { status: "error"; error: string }
|
||||
| { status: "loaded"; dump: Dump };
|
||||
|
||||
/**
|
||||
* Renders `/dumps/:selectedDump`, for anyone who may see the dump: its preview,
|
||||
* title (editable in place by its poster), note, poster, categories and votes,
|
||||
* the playlists holding it, related dumps and the comment thread, kept live by
|
||||
* the socket.
|
||||
* Renders `/dumps/:selectedDump`, for anyone who may see the dump: a private
|
||||
* dump answers 404 to anyone but its poster. The dump comes from
|
||||
* `GET /api/dumps/:dumpId`, or from the navigation's state when `DumpEdit` or
|
||||
* a title edit here just saved it. Its comments, related dumps and playlists
|
||||
* come from their own endpoints, and `WSContext`'s events keep them current.
|
||||
* The poster and moderators can edit the title in place, and get a link to
|
||||
* `DumpEdit`.
|
||||
*/
|
||||
export function Dump(): React.JSX.Element {
|
||||
const { selectedDump } = useParams();
|
||||
@@ -146,8 +149,7 @@ export function Dump(): React.JSX.Element {
|
||||
|
||||
useEffect(() => {
|
||||
if (!lastDumpEvent) return;
|
||||
// Subscribing to the WS-pushed dump-update stream — setState here mirrors
|
||||
// external state into local state, no synchronous alternative.
|
||||
// Mirrors the socket's edits, which only an effect can observe.
|
||||
// eslint-disable-next-line react-hooks/set-state-in-effect
|
||||
setDumpState((prev) => {
|
||||
if (prev.status !== "loaded" || prev.dump.id !== lastDumpEvent.id) {
|
||||
@@ -157,7 +159,6 @@ export function Dump(): React.JSX.Element {
|
||||
});
|
||||
}, [lastDumpEvent]);
|
||||
|
||||
// Fetch comments when dump loads
|
||||
useEffect(() => {
|
||||
if (!selectedDump) return;
|
||||
const controller = new AbortController();
|
||||
@@ -172,11 +173,11 @@ export function Dump(): React.JSX.Element {
|
||||
})
|
||||
.catch(() => {});
|
||||
return () => controller.abort();
|
||||
// connectionEpoch: re-fetch on reconnect to backfill comments missed while
|
||||
// the socket was down.
|
||||
// connectionEpoch refetches on reconnect, for the comments missed while the
|
||||
// socket was down.
|
||||
}, [selectedDump, authFetch, connectionEpoch]);
|
||||
|
||||
// Fetch related dumps (backlinks) when dump loads
|
||||
// The dumps that link to this one, or that it links to.
|
||||
useEffect(() => {
|
||||
if (!selectedDump) return;
|
||||
const controller = new AbortController();
|
||||
@@ -193,8 +194,7 @@ export function Dump(): React.JSX.Element {
|
||||
return () => controller.abort();
|
||||
}, [selectedDump, authFetch]);
|
||||
|
||||
// Fetch the collections this dump appears in (public ones, plus the
|
||||
// viewer's own private ones — the server does the filtering)
|
||||
// The server leaves out the private playlists of others.
|
||||
useEffect(() => {
|
||||
if (!selectedDump) return;
|
||||
const controller = new AbortController();
|
||||
@@ -211,12 +211,12 @@ export function Dump(): React.JSX.Element {
|
||||
})
|
||||
.catch(() => {});
|
||||
return () => controller.abort();
|
||||
// lastPlaylistEvent: adding/removing this dump, flipping a collection's
|
||||
// visibility or deleting it all change the list — playlist events are rare
|
||||
// enough to just refetch on any of them.
|
||||
// Any playlist event may change the list, and they are rare enough to
|
||||
// refetch on each.
|
||||
}, [selectedDump, authFetch, lastPlaylistEvent]);
|
||||
|
||||
// Scroll to and highlight a comment when navigating to #comment-{id}
|
||||
// A notification links to `#comment-<id>`. Rerun when the comments arrive,
|
||||
// since the element doesn't exist before.
|
||||
useEffect(() => {
|
||||
if (!location.hash.startsWith("#comment-")) return;
|
||||
const id = location.hash.slice(1);
|
||||
@@ -231,15 +231,14 @@ export function Dump(): React.JSX.Element {
|
||||
return () => clearTimeout(timer);
|
||||
}, [comments, location.hash]);
|
||||
|
||||
// React to WS comment events
|
||||
const loadedDumpId = dumpState.status === "loaded" ? dumpState.dump.id : null;
|
||||
useEffect(() => {
|
||||
if (
|
||||
!lastCommentEvent || !loadedDumpId ||
|
||||
lastCommentEvent.dumpId !== loadedDumpId
|
||||
) return;
|
||||
// Subscribing to the WS-pushed comment-event stream — setState here
|
||||
// mirrors external state into local state, no synchronous alternative.
|
||||
// A comment of this user's arrives both from the socket and from
|
||||
// CommentThread's callbacks below, hence the duplicate checks.
|
||||
if (lastCommentEvent.type === "created" && lastCommentEvent.comment) {
|
||||
// eslint-disable-next-line react-hooks/set-state-in-effect
|
||||
setComments((prev) => {
|
||||
@@ -338,8 +337,8 @@ export function Dump(): React.JSX.Element {
|
||||
}
|
||||
const updatedDump = deserializeDump(apiResponse.data);
|
||||
setTitleEditing(false);
|
||||
// The page stays mounted across the slug change below, so it has to be
|
||||
// told about the new title itself.
|
||||
// The page stays mounted across the slug change below, and would keep
|
||||
// the old title.
|
||||
setDumpState({ status: "loaded", dump: updatedDump });
|
||||
if (updatedDump.slug !== dump.slug) {
|
||||
navigate(dumpUrl(updatedDump), {
|
||||
@@ -357,7 +356,6 @@ export function Dump(): React.JSX.Element {
|
||||
return (
|
||||
<PageShell>
|
||||
<div className="dump-detail">
|
||||
{/* Post header */}
|
||||
<div className="dump-post-header">
|
||||
<div className="dump-header-block">
|
||||
<div className="dump-header-left">
|
||||
@@ -506,7 +504,6 @@ export function Dump(): React.JSX.Element {
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Main content */}
|
||||
<div className="dump-rich-content">
|
||||
{dump.kind === "file"
|
||||
? <FilePreview dump={dump} global />
|
||||
@@ -532,7 +529,6 @@ export function Dump(): React.JSX.Element {
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="dump-actions">
|
||||
{canEdit && (
|
||||
<Link to={`${dumpUrl(dump)}/edit`}>
|
||||
@@ -544,7 +540,6 @@ export function Dump(): React.JSX.Element {
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Related (backlinks) */}
|
||||
{relatedDumps.length > 0 && (
|
||||
<section className="related-section">
|
||||
<h2 className="related-section-title">
|
||||
@@ -566,7 +561,6 @@ export function Dump(): React.JSX.Element {
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* In collections (playlists containing this dump) */}
|
||||
{collections.length > 0 && (
|
||||
<section className="related-section collections-section">
|
||||
<h2 className="related-section-title">
|
||||
@@ -580,7 +574,6 @@ export function Dump(): React.JSX.Element {
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* Comments */}
|
||||
<CommentThread
|
||||
dumpId={dump.id}
|
||||
comments={comments}
|
||||
|
||||
Reference in New Issue
Block a user