605 lines
20 KiB
TypeScript
605 lines
20 KiB
TypeScript
/**
|
|
* Renders a dump's page, with its preview, comments, related dumps and the
|
|
* playlists holding it.
|
|
*
|
|
* @module
|
|
*/
|
|
|
|
import { useEffect, useState } from "react";
|
|
import { Link, useLocation, useNavigate, useParams } from "react-router";
|
|
import { t } from "@lingui/core/macro";
|
|
import { Trans } from "@lingui/react/macro";
|
|
import { dumpThumbnailUrl, dumpUrl } from "../utils/shared/urls.ts";
|
|
import { can } from "../utils/auth/permissions.ts";
|
|
import { AddToPlaylistModal } from "../components/playlist/AddToPlaylistModal.tsx";
|
|
|
|
import { API_URL } from "../config/api.ts";
|
|
import { VALIDATION } from "../../shared/validation.ts";
|
|
|
|
import type { Comment } from "../../shared/comment.ts";
|
|
import type { Dump, UpdateDumpRequest } from "../../shared/dump.ts";
|
|
import type { Playlist } from "../../shared/playlist.ts";
|
|
import type { PublicUser } from "../../shared/user.ts";
|
|
import type { Wire } from "../../shared/api.ts";
|
|
import {
|
|
deserializeComment,
|
|
deserializeDump,
|
|
deserializePlaylist,
|
|
deserializePublicUser,
|
|
} from "../utils/shared/deserialize.ts";
|
|
import { friendlyFetchError, parseAPIResponse } from "../utils/shared/api.ts";
|
|
|
|
import { useAuth } from "../hooks/auth/useAuth.ts";
|
|
import { useCategories } from "../hooks/category/useCategories.ts";
|
|
import { useDocumentTitle } from "../hooks/shared/useDocumentTitle.ts";
|
|
import { relativeTime } from "../utils/shared/relativeTime.ts";
|
|
import { useHeightTransition } from "../hooks/shared/useHeightTransition.ts";
|
|
import { useWS } from "../hooks/ws/useWS.ts";
|
|
import { Avatar } from "../components/shared/Avatar.tsx";
|
|
import { RichContentCard } from "../components/dump/RichContentCard.tsx";
|
|
import { FilePreview } from "../components/dump/FilePreview.tsx";
|
|
import { VoteButton } from "../components/social/VoteButton.tsx";
|
|
import { DumpCardList } from "../components/dump/DumpCardList.tsx";
|
|
import { PlaylistCardList } from "../components/playlist/PlaylistCardList.tsx";
|
|
import { PageShell } from "../components/layout/PageShell.tsx";
|
|
import { PageError } from "../components/layout/PageError.tsx";
|
|
import { Markdown } from "../components/editor/Markdown.tsx";
|
|
import { CommentThread } from "../components/comment/CommentThread.tsx";
|
|
import { Tooltip } from "../components/shared/Tooltip.tsx";
|
|
|
|
type DumpState =
|
|
| { status: "loading" }
|
|
| { status: "error"; error: string }
|
|
| { status: "loaded"; dump: Dump };
|
|
|
|
/**
|
|
* 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();
|
|
const location = useLocation();
|
|
const navigate = useNavigate();
|
|
// Taken once, since it stays in the history entry, where a reload or Back
|
|
// would show that snapshot forever. It is cleared from there below.
|
|
const [handedOver] = useState(
|
|
() => (location.state as { dump?: Dump } | null)?.dump ?? null,
|
|
);
|
|
const preloaded = handedOver &&
|
|
(handedOver.id === selectedDump || handedOver.slug === selectedDump)
|
|
? handedOver
|
|
: null;
|
|
useEffect(() => {
|
|
if (!(location.state as { dump?: Dump } | null)?.dump) return;
|
|
navigate(`${location.pathname}${location.search}${location.hash}`, {
|
|
replace: true,
|
|
state: null,
|
|
});
|
|
}, [location, navigate]);
|
|
|
|
const [dumpState, setDumpState] = useState<DumpState>(
|
|
preloaded ? { status: "loaded", dump: preloaded } : { status: "loading" },
|
|
);
|
|
const [op, setOp] = useState<PublicUser | null>(null);
|
|
const [playlistModalOpen, setPlaylistModalOpen] = useState(false);
|
|
|
|
useDocumentTitle(
|
|
dumpState.status === "loaded"
|
|
? dumpState.dump.title
|
|
: dumpState.status === "error"
|
|
? null
|
|
: undefined,
|
|
);
|
|
|
|
const [comments, setComments] = useState<Comment[]>([]);
|
|
const [relatedDumps, setRelatedDumps] = useState<Dump[]>([]);
|
|
const [collections, setCollections] = useState<Playlist[]>([]);
|
|
|
|
const [titleEditing, setTitleEditing] = useState(false);
|
|
const headerRightRef = useHeightTransition<HTMLDivElement>(titleEditing);
|
|
const [titleDraft, setTitleDraft] = useState("");
|
|
const [titleSaving, setTitleSaving] = useState(false);
|
|
const [titleError, setTitleError] = useState<string | null>(null);
|
|
|
|
const { user, mediaToken, authFetch } = useAuth();
|
|
const { byId } = useCategories();
|
|
const {
|
|
voteCounts,
|
|
myVotes,
|
|
castVote,
|
|
removeVote,
|
|
lastDumpEvent,
|
|
lastCommentEvent,
|
|
lastPlaylistEvent,
|
|
connectionEpoch,
|
|
} = useWS();
|
|
|
|
useEffect(() => {
|
|
if (!selectedDump) return;
|
|
const controller = new AbortController();
|
|
|
|
if (preloaded) {
|
|
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 () => controller.abort();
|
|
}
|
|
|
|
(async () => {
|
|
setDumpState({ status: "loading" });
|
|
setOp(null);
|
|
try {
|
|
const res = await authFetch(`${API_URL}/api/dumps/${selectedDump}`, {
|
|
cache: "no-store",
|
|
signal: controller.signal,
|
|
});
|
|
const apiResponse = parseAPIResponse<Wire<Dump>>(await res.json());
|
|
if (!apiResponse.success) {
|
|
throw new Error(apiResponse.error.message);
|
|
}
|
|
const dump: Dump = deserializeDump(apiResponse.data);
|
|
setDumpState({ status: "loaded", dump });
|
|
|
|
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, authFetch]);
|
|
|
|
useEffect(() => {
|
|
if (!lastDumpEvent) return;
|
|
// 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) {
|
|
return prev;
|
|
}
|
|
return { status: "loaded", dump: lastDumpEvent };
|
|
});
|
|
}, [lastDumpEvent]);
|
|
|
|
useEffect(() => {
|
|
if (!selectedDump) return;
|
|
const controller = new AbortController();
|
|
authFetch(`${API_URL}/api/dumps/${selectedDump}/comments`, {
|
|
signal: controller.signal,
|
|
})
|
|
.then((r) => r.json())
|
|
.then((body) => {
|
|
if (body.success) {
|
|
setComments((body.data as Wire<Comment>[]).map(deserializeComment));
|
|
}
|
|
})
|
|
.catch(() => {});
|
|
return () => controller.abort();
|
|
// connectionEpoch refetches on reconnect, for the comments missed while the
|
|
// socket was down.
|
|
}, [selectedDump, authFetch, connectionEpoch]);
|
|
|
|
// The dumps that link to this one, or that it links to.
|
|
useEffect(() => {
|
|
if (!selectedDump) return;
|
|
const controller = new AbortController();
|
|
authFetch(`${API_URL}/api/dumps/${selectedDump}/related`, {
|
|
signal: controller.signal,
|
|
})
|
|
.then((r) => r.json())
|
|
.then((body) => {
|
|
if (body.success) {
|
|
setRelatedDumps((body.data as Wire<Dump>[]).map(deserializeDump));
|
|
}
|
|
})
|
|
.catch(() => {});
|
|
return () => controller.abort();
|
|
}, [selectedDump, authFetch]);
|
|
|
|
// The server leaves out the private playlists of others.
|
|
useEffect(() => {
|
|
if (!selectedDump) return;
|
|
const controller = new AbortController();
|
|
authFetch(`${API_URL}/api/dumps/${selectedDump}/playlists`, {
|
|
signal: controller.signal,
|
|
})
|
|
.then((r) => r.json())
|
|
.then((body) => {
|
|
if (body.success) {
|
|
setCollections(
|
|
(body.data as Wire<Playlist>[]).map(deserializePlaylist),
|
|
);
|
|
}
|
|
})
|
|
.catch(() => {});
|
|
return () => controller.abort();
|
|
// Any playlist event may change the list, and they are rare enough to
|
|
// refetch on each.
|
|
}, [selectedDump, authFetch, lastPlaylistEvent]);
|
|
|
|
// 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);
|
|
const el = document.getElementById(id);
|
|
if (!el) return;
|
|
el.scrollIntoView({ behavior: "smooth", block: "start" });
|
|
el.classList.add("comment-node--highlight");
|
|
const timer = setTimeout(
|
|
() => el.classList.remove("comment-node--highlight"),
|
|
2000,
|
|
);
|
|
return () => clearTimeout(timer);
|
|
}, [comments, location.hash]);
|
|
|
|
const loadedDumpId = dumpState.status === "loaded" ? dumpState.dump.id : null;
|
|
useEffect(() => {
|
|
if (
|
|
!lastCommentEvent || !loadedDumpId ||
|
|
lastCommentEvent.dumpId !== loadedDumpId
|
|
) return;
|
|
// 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) => {
|
|
if (prev.some((c) => c.id === lastCommentEvent.comment!.id)) {
|
|
return prev;
|
|
}
|
|
return [...prev, lastCommentEvent.comment!];
|
|
});
|
|
} else if (
|
|
lastCommentEvent.type === "deleted" && lastCommentEvent.commentId
|
|
) {
|
|
setComments((prev) =>
|
|
prev.map((c) =>
|
|
c.id === lastCommentEvent.commentId
|
|
? { ...c, deleted: true, body: "" }
|
|
: c
|
|
)
|
|
);
|
|
} else if (
|
|
lastCommentEvent.type === "updated" && lastCommentEvent.comment
|
|
) {
|
|
setComments((prev) =>
|
|
prev.map((c) =>
|
|
c.id === lastCommentEvent.comment!.id ? lastCommentEvent.comment! : c
|
|
)
|
|
);
|
|
}
|
|
}, [lastCommentEvent, loadedDumpId]);
|
|
|
|
if (dumpState.status === "loading") {
|
|
return (
|
|
<PageShell>
|
|
<p className="page-loading">
|
|
<Trans>Loading dump…</Trans>
|
|
</p>
|
|
</PageShell>
|
|
);
|
|
}
|
|
|
|
if (dumpState.status === "error") {
|
|
return (
|
|
<PageError
|
|
message={dumpState.error}
|
|
actions={
|
|
<>
|
|
<button
|
|
className="btn-border"
|
|
type="button"
|
|
onClick={() => globalThis.location.reload()}
|
|
>
|
|
<Trans>Retry</Trans>
|
|
</button>
|
|
<button
|
|
className="btn-border"
|
|
type="button"
|
|
onClick={() => navigate("/")}
|
|
>
|
|
<Trans>← Back to all dumps</Trans>
|
|
</button>
|
|
</>
|
|
}
|
|
/>
|
|
);
|
|
}
|
|
|
|
const { dump } = dumpState;
|
|
const canEdit = !!user &&
|
|
(dump.userId === user.id || can(user, "dump:moderate"));
|
|
const dumpCategories = (dump.categoryIds ?? [])
|
|
.map((id) => byId.get(id))
|
|
.filter((c) => c !== undefined);
|
|
|
|
const startTitleEdit = () => {
|
|
setTitleDraft(dump.title);
|
|
setTitleError(null);
|
|
setTitleEditing(true);
|
|
};
|
|
|
|
const handleTitleSave = async () => {
|
|
const trimmed = titleDraft.trim();
|
|
if (!trimmed || trimmed.length > VALIDATION.DUMP_TITLE_MAX) return;
|
|
|
|
setTitleSaving(true);
|
|
setTitleError(null);
|
|
try {
|
|
const res = await authFetch(`${API_URL}/api/dumps/${dump.id}`, {
|
|
method: "PUT",
|
|
body: JSON.stringify(
|
|
{ title: trimmed } satisfies UpdateDumpRequest,
|
|
),
|
|
});
|
|
const apiResponse = parseAPIResponse<Wire<Dump>>(await res.json());
|
|
if (!apiResponse.success) {
|
|
setTitleError(apiResponse.error.message);
|
|
return;
|
|
}
|
|
const updatedDump = deserializeDump(apiResponse.data);
|
|
setTitleEditing(false);
|
|
// 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), {
|
|
replace: true,
|
|
state: { dump: updatedDump },
|
|
});
|
|
}
|
|
} catch (err) {
|
|
setTitleError(friendlyFetchError(err));
|
|
} finally {
|
|
setTitleSaving(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<PageShell>
|
|
<div className="dump-detail">
|
|
<div className="dump-post-header">
|
|
<div className="dump-header-block">
|
|
<div className="dump-header-left">
|
|
<VoteButton
|
|
dumpId={dump.id}
|
|
count={voteCounts[dump.id] ?? dump.voteCount}
|
|
voted={myVotes.has(dump.id)}
|
|
disabled={!user}
|
|
onCast={castVote}
|
|
onRemove={removeVote}
|
|
/>
|
|
{user && (
|
|
<button
|
|
type="button"
|
|
className="btn-add-playlist"
|
|
onClick={() => setPlaylistModalOpen(true)}
|
|
>
|
|
<Trans>+ Playlist</Trans>
|
|
</button>
|
|
)}
|
|
</div>
|
|
<div className="dump-header-right" ref={headerRightRef}>
|
|
{titleEditing
|
|
? (
|
|
<div className="dump-title-editor animate-in">
|
|
<input
|
|
type="text"
|
|
className="dump-title-input"
|
|
value={titleDraft}
|
|
onChange={(e) => setTitleDraft(e.target.value)}
|
|
onKeyDown={(e) => {
|
|
if (e.key === "Enter") {
|
|
e.preventDefault();
|
|
handleTitleSave();
|
|
} else if (e.key === "Escape") {
|
|
setTitleEditing(false);
|
|
}
|
|
}}
|
|
maxLength={VALIDATION.DUMP_TITLE_MAX}
|
|
disabled={titleSaving}
|
|
autoFocus
|
|
/>
|
|
<button
|
|
type="button"
|
|
className="btn-primary"
|
|
onClick={handleTitleSave}
|
|
disabled={titleSaving || !titleDraft.trim()}
|
|
>
|
|
{titleSaving
|
|
? <Trans>Saving…</Trans>
|
|
: <Trans>Save</Trans>}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="form-cancel"
|
|
onClick={() => setTitleEditing(false)}
|
|
disabled={titleSaving}
|
|
>
|
|
<Trans>Cancel</Trans>
|
|
</button>
|
|
{titleError && (
|
|
<p className="dump-title-error">{titleError}</p>
|
|
)}
|
|
</div>
|
|
)
|
|
: (
|
|
<div
|
|
className={`dump-title-view${
|
|
canEdit ? " dump-title-view--editable" : ""
|
|
}`}
|
|
onClick={canEdit ? startTitleEdit : undefined}
|
|
// Reachable from the keyboard too; not a button, so the
|
|
// title inside stays a heading.
|
|
tabIndex={canEdit ? 0 : undefined}
|
|
title={canEdit ? t`Edit title` : undefined}
|
|
onKeyDown={canEdit
|
|
? (e) => {
|
|
if (e.key === "Enter" || e.key === " ") {
|
|
e.preventDefault();
|
|
startTitleEdit();
|
|
}
|
|
}
|
|
: undefined}
|
|
>
|
|
<h1 className="dump-title">{dump.title}</h1>
|
|
{canEdit && (
|
|
<span className="dump-title-edit-btn" aria-hidden>
|
|
✎
|
|
</span>
|
|
)}
|
|
</div>
|
|
)}
|
|
<div className="dump-op">
|
|
<Avatar
|
|
userId={dump.userId}
|
|
username={op?.username ?? "?"}
|
|
hasAvatar={!!op?.avatarMime}
|
|
size={22}
|
|
/>
|
|
{op
|
|
? (
|
|
<Link to={`/users/${op.username}`} className="dump-op-link">
|
|
{op.username}
|
|
</Link>
|
|
)
|
|
: <span className="dump-op-link">…</span>}
|
|
<Tooltip text={dump.createdAt.toLocaleString()}>
|
|
<time
|
|
className="dump-card-date"
|
|
dateTime={dump.createdAt.toISOString()}
|
|
>
|
|
{relativeTime(dump.createdAt)}
|
|
</time>
|
|
</Tooltip>
|
|
{dump.updatedAt && (
|
|
<Tooltip text={t`Edited ${dump.updatedAt.toLocaleString()}`}>
|
|
<span className="dump-edited-label">
|
|
<Trans>edited {relativeTime(dump.updatedAt)}</Trans>
|
|
</span>
|
|
</Tooltip>
|
|
)}
|
|
{dump.isPrivate && (
|
|
<span className="dump-card-private-badge">
|
|
<Trans>private</Trans>
|
|
</span>
|
|
)}
|
|
</div>
|
|
{dumpCategories.length > 0 && (
|
|
<div className="dump-card-categories">
|
|
{dumpCategories.map((category) => (
|
|
<Link
|
|
key={category.id}
|
|
to={`/${category.slug}`}
|
|
className="dump-card-category-chip"
|
|
>
|
|
{category.name}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{dump.comment && (
|
|
<Markdown className="dump-comment">{dump.comment}</Markdown>
|
|
)}
|
|
</div>
|
|
|
|
<div className="dump-rich-content">
|
|
{dump.kind === "file"
|
|
? <FilePreview dump={dump} global />
|
|
: dump.richContent
|
|
? (
|
|
<RichContentCard
|
|
richContent={dump.richContent}
|
|
dumpHref={dumpUrl(dump)}
|
|
thumbnailOverrideUrl={dump.thumbnailMime
|
|
? dumpThumbnailUrl(dump, mediaToken)
|
|
: undefined}
|
|
/>
|
|
)
|
|
: (
|
|
<a
|
|
href={dump.url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="dump-url-link"
|
|
>
|
|
{dump.url}
|
|
</a>
|
|
)}
|
|
</div>
|
|
|
|
<div className="dump-actions">
|
|
{canEdit && (
|
|
<Link to={`${dumpUrl(dump)}/edit`}>
|
|
<Trans>Edit</Trans>
|
|
</Link>
|
|
)}
|
|
<Link to="/">
|
|
<Trans>← Back to all dumps</Trans>
|
|
</Link>
|
|
</div>
|
|
|
|
{relatedDumps.length > 0 && (
|
|
<section className="related-section">
|
|
<h2 className="related-section-title">
|
|
<Trans>Related</Trans>
|
|
</h2>
|
|
<DumpCardList dumps={relatedDumps} />
|
|
</section>
|
|
)}
|
|
|
|
{collections.length > 0 && (
|
|
<section className="related-section collections-section">
|
|
<h2 className="related-section-title">
|
|
<Trans>In collections</Trans>
|
|
</h2>
|
|
<PlaylistCardList playlists={collections} />
|
|
</section>
|
|
)}
|
|
|
|
<CommentThread
|
|
dumpId={dump.id}
|
|
comments={comments}
|
|
currentUser={user}
|
|
onCommentCreated={(c) =>
|
|
setComments((prev) =>
|
|
prev.some((x) => x.id === c.id) ? prev : [...prev, c]
|
|
)}
|
|
onCommentDeleted={(id) =>
|
|
setComments((prev) =>
|
|
prev.map((c) =>
|
|
c.id === id ? { ...c, deleted: true, body: "" } : c
|
|
)
|
|
)}
|
|
onCommentUpdated={(updated) =>
|
|
setComments((prev) =>
|
|
prev.map((c) => (c.id === updated.id ? updated : c))
|
|
)}
|
|
/>
|
|
</div>
|
|
{playlistModalOpen && (
|
|
<AddToPlaylistModal
|
|
dumpId={dump.id}
|
|
onClose={() => setPlaylistModalOpen(false)}
|
|
/>
|
|
)}
|
|
</PageShell>
|
|
);
|
|
}
|