v4: a /community page shows the site's week and month, from the same figures as the digests, and every recurring server task is a job of one scheduler — the digests' top dumps and community section (who joined, the new public playlists, the chat and the totals) existed only in emails. community-service.ts now gathers them for a period from listTopDumps, listNewUsers and listNewPublicPlaylists, each in its own service and returning the API's Dump, PublicUser and Playlist; the digest builds its sections from the same call, its email-only DumpRow and DUMP_COLS replaced by one Dump mapper that networkOf uses too, and links its community section to the page. The page, /community for the last week and /community/monthly for the month, signed in only and linked from the avatar menu, reads GET /api/community?period=, which serves figures kept in memory and recomputed every GERBEUR_COMMUNITY_REFRESH_MINUTES (15 by default). It shows the four figures, the top dumps and the new playlists as live cards, and the new members as UserCards, the follow tab's user row made shared. Its words are the emails' own: the messages both use are renamed from email.digest.* to digest.*, as digest.weekly.off was. api/lib/scheduler.ts's startJobs runs the digests, the community refresh, the WebSocket ping, the typing expiry and the rate-limit sweep, which main.ts starts, so none of them runs on import any more. PERIOD_MS moves to shared/settings.ts. community is reserved as a category slug, and migration 0022 renames a category that had it, with renameReservedCategories moved out of 0021 into reserved-slugs.ts. A group's dump or playlist cards now fill its column. 262 backend tests and 678 frontend tests pass, and deno check, tsc, eslint, doc:lint and i18n:compile --strict are clean; checked in screenshots in Smooth light at 1280 and 390px, Smooth dark with mocked playlists, Brutalist dark at 390px and Kanagawa dark at 1280px.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
khannurien
163
src/pages/Community.tsx
Normal file
163
src/pages/Community.tsx
Normal file
@@ -0,0 +1,163 @@
|
||||
/**
|
||||
* Renders the community page, `/community` for the last week and
|
||||
* `/community/monthly` for the last month, for a signed-in user: the site's
|
||||
* figures, its most upvoted dumps, who joined and the new public playlists.
|
||||
* The server recomputes them on a timer (`community-service.ts`), and the
|
||||
* digests send each reader the same sections, in the same words.
|
||||
*
|
||||
* @module
|
||||
*/
|
||||
|
||||
import { useCallback } from "react";
|
||||
import { i18n } from "@lingui/core";
|
||||
import { t } from "@lingui/core/macro";
|
||||
import { Trans } from "@lingui/react/macro";
|
||||
import { Trans as Message } from "@lingui/react";
|
||||
import type { Wire } from "../../shared/api.ts";
|
||||
import type { CommunityStats } from "../../shared/community.ts";
|
||||
import type { DigestCadence } from "../../shared/settings.ts";
|
||||
import { COMMUNITY_VIEWS, communityPath } from "../../shared/paths.ts";
|
||||
import { COMMUNITY_URL } from "../config/api.ts";
|
||||
import { useAuth } from "../hooks/auth/useAuth.ts";
|
||||
import { useDocumentTitle } from "../hooks/shared/useDocumentTitle.ts";
|
||||
import { useFetchState } from "../hooks/shared/useFetchState.ts";
|
||||
import { useTabParam } from "../hooks/shared/useTabParam.ts";
|
||||
import { expectOk } from "../utils/shared/api.ts";
|
||||
import { deserializeCommunityStats } from "../utils/shared/deserialize.ts";
|
||||
import { PageShell } from "../components/layout/PageShell.tsx";
|
||||
import { PageHeader } from "../components/layout/PageHeader.tsx";
|
||||
import { PageGroup } from "../components/layout/PageGroup.tsx";
|
||||
import { TabBar } from "../components/shared/TabBar.tsx";
|
||||
import { ListState } from "../components/shared/ListState.tsx";
|
||||
import { DumpCardList } from "../components/dump/DumpCardList.tsx";
|
||||
import { PlaylistCardList } from "../components/playlist/PlaylistCardList.tsx";
|
||||
import { UserCard } from "../components/social/UserCard.tsx";
|
||||
import { NotFound } from "./NotFound.tsx";
|
||||
|
||||
/** Checks whether `stats` has nothing to show at all. */
|
||||
function isQuiet(stats: CommunityStats): boolean {
|
||||
const { dumps, upvotes, comments } = stats.totals;
|
||||
return stats.top.length + stats.members.length + stats.playlists.length +
|
||||
stats.chatMessages + dumps + upvotes + comments === 0;
|
||||
}
|
||||
|
||||
/** Renders the period's four figures, each over its label. */
|
||||
function Figures({ stats }: { stats: CommunityStats }) {
|
||||
const { dumps, upvotes, comments } = stats.totals;
|
||||
const figures: [number, string][] = [
|
||||
[dumps, i18n._("digest.stat.dumps", { n: dumps })],
|
||||
[upvotes, i18n._("digest.count.upvotes", { n: upvotes })],
|
||||
[comments, i18n._("digest.count.comments", { n: comments })],
|
||||
[
|
||||
stats.chatMessages,
|
||||
i18n._("digest.stat.chat", { n: stats.chatMessages }),
|
||||
],
|
||||
];
|
||||
return (
|
||||
<dl className="page-card community-figures">
|
||||
{figures.map(([n, label]) => (
|
||||
<div key={label} className="community-figure">
|
||||
<dt className="community-figure-label">{label}</dt>
|
||||
<dd className="community-figure-value">{i18n.number(n)}</dd>
|
||||
</div>
|
||||
))}
|
||||
</dl>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders `/community` and `/community/:view`, from `GET /api/community`.
|
||||
* A view no period names is `NotFound`.
|
||||
*/
|
||||
export function Community(): React.JSX.Element {
|
||||
useDocumentTitle(i18n._("digest.community"));
|
||||
const { user, authFetch } = useAuth();
|
||||
const [period, setPeriod] = useTabParam<DigestCadence>(
|
||||
communityPath(),
|
||||
COMMUNITY_VIEWS,
|
||||
"weekly",
|
||||
);
|
||||
|
||||
const load = useCallback(
|
||||
async (signal: AbortSignal) => {
|
||||
const url = new URL(COMMUNITY_URL, location.origin);
|
||||
url.searchParams.set("period", period ?? "weekly");
|
||||
return deserializeCommunityStats(
|
||||
await expectOk<Wire<CommunityStats>>(
|
||||
await authFetch(url.toString(), { signal }),
|
||||
),
|
||||
);
|
||||
},
|
||||
[authFetch, period],
|
||||
);
|
||||
const { state } = useFetchState(period ?? undefined, load);
|
||||
|
||||
if (!period) return <NotFound />;
|
||||
const weekly = period === "weekly";
|
||||
|
||||
return (
|
||||
<PageShell narrow>
|
||||
<PageHeader icon="🏘️" title={<Message id="digest.community" />} />
|
||||
<TabBar
|
||||
tabs={[
|
||||
{ key: "weekly", label: <Trans>This week</Trans> },
|
||||
{ key: "monthly", label: <Trans>This month</Trans> },
|
||||
]}
|
||||
activeTab={period}
|
||||
onChange={setPeriod}
|
||||
/>
|
||||
<ListState
|
||||
state={state}
|
||||
isEmpty={({ data }) => isQuiet(data)}
|
||||
empty={
|
||||
<p className="empty-state">
|
||||
{weekly
|
||||
? t`Nothing happened this week.`
|
||||
: t`Nothing happened this month.`}
|
||||
</p>
|
||||
}
|
||||
>
|
||||
{({ data }) => (
|
||||
<>
|
||||
<Figures stats={data} />
|
||||
{data.top.length > 0 && (
|
||||
<PageGroup
|
||||
label={weekly
|
||||
? <Message id="digest.topWeek" />
|
||||
: <Message id="digest.topMonth" />}
|
||||
>
|
||||
<DumpCardList dumps={data.top} />
|
||||
</PageGroup>
|
||||
)}
|
||||
{data.members.length > 0 && (
|
||||
<PageGroup label={<Message id="digest.newMembers" />}>
|
||||
<ul className="user-card-list">
|
||||
{data.members.map((m) => (
|
||||
<UserCard
|
||||
key={m.id}
|
||||
user={m}
|
||||
note={m.invitedByUsername &&
|
||||
(m.invitedByUsername === user?.username
|
||||
? <Message id="digest.invitedByYou" />
|
||||
: (
|
||||
<Message
|
||||
id="digest.invitedBy"
|
||||
values={{ username: m.invitedByUsername }}
|
||||
/>
|
||||
))}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
</PageGroup>
|
||||
)}
|
||||
{data.playlists.length > 0 && (
|
||||
<PageGroup label={<Message id="digest.newPlaylists" />}>
|
||||
<PlaylistCardList playlists={data.playlists} />
|
||||
</PageGroup>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</ListState>
|
||||
</PageShell>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user