vincent/gerbeur
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v4: the followed feed's two views are pages — "From people" and "From playlists" on a feed's "follow" tab were a state of the page, which a reload, Back or a shared link lost, while a profile's same split is /@name/follow/playlists. They are now /follow and /follow/playlists, and /music/follow/playlists in a category, feedPath taking the view as userPath does (FOLLOW_VIEWS); picking a category keeps it. Their dumps come from GET /api/dumps?follow=users|playlists, signed in, which the feed's word for it names, instead of GET /api/me/feed?from=; an unknown category is a 404 there, as on the rest of the feed, rather than an empty list.

Browse Source 
A feed's tab, as a profile's, a search's or the community page's, now takes the place of the current history entry, since it is a view of the same page; picking a category, another page, still adds one.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
khannurien
2026-10-09 22:09:12 +00:00
parent 53ceb6bcbc
commit 6dfba07341
13 changed files with 244 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
API.md
View File

@@ -22,26 +22,26 @@ has one word, the same as in pages.
## Pages
| Path | Views | Access | Page |
| ------------------------------------------------------- | ------------------------------------------------------------------------------- | -------------------------------------- | ------------------------------ |
| `/` | `/hot`, `/new`, `/journal`, `/follow`; the bare `/` is the viewer's default tab | anyone, `/follow` signed in | `Index` |
| `/<category>` | `/<category>/hot`, `/new`, `/journal`, `/follow` | anyone | `Index` |
| `/@<name>` | the overview: dumps beside upvoted | anyone | `UserPublicProfile` |
| `/@<name>/dumps`, `/upvoted`, `/playlists`, `/invitees` | | anyone | `UserPublicProfile` |
| `/@<name>/follow` | `/@<name>/follow/playlists`; the bare tab lists users | anyone | `UserPublicProfile` |
| `/@<name>/manage` | | `user:manage`, on others' profiles | `UserPublicProfile` |
| `/@<name>/dumps/<slug>` | | anyone; a private dump, its poster | `Dump` |
| `/@<name>/dumps/<slug>/edit` | | its poster, `dump:moderate` | `DumpEdit` |
| `/@<name>/playlists/<slug>` | | anyone; a private playlist, its owner | `PlaylistDetail` |
| `/search?q=` | `/search/users?q=`, `/search/playlists?q=` | anyone | `Search` |
| `/notifications` | | signed in | `Notifications` |
| `/community` | `/community/monthly`; the bare path is the week | signed in | `Community` |
| `/settings` | | signed in | `Settings` |
| `/manage` | | `category:manage`, `federation:manage` | `Manage` |
| `/login`, `/register?token=` | `/login?next=<path>` comes back to a page | signed out | `UserLogin`, `UserRegister` |
| `/authorize?client_id=…` | | signed in, else via `/login?next=` | `Authorize` |
| `/federation/callback?code=&state=` | | anyone | `FederationCallback` |
| `/reset-password?token=`, `/unsubscribe?token=` | | anyone | `ResetPassword`, `Unsubscribe` |
| Path | Views | Access | Page |
| ------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------- | ------------------------------ |
| `/` | `/hot`, `/new`, `/journal`, `/follow`, `/follow/playlists`; the bare `/` is the viewer's default tab, the bare `/follow` the users followed | anyone, `/follow` signed in | `Index` |
| `/<category>` | `/<category>/hot`, `/new`, `/journal`, `/follow`, `/follow/playlists` | anyone, `/follow` signed in | `Index` |
| `/@<name>` | the overview: dumps beside upvoted | anyone | `UserPublicProfile` |
| `/@<name>/dumps`, `/upvoted`, `/playlists`, `/invitees` | | anyone | `UserPublicProfile` |
| `/@<name>/follow` | `/@<name>/follow/playlists`; the bare tab lists users | anyone | `UserPublicProfile` |
| `/@<name>/manage` | | `user:manage`, on others' profiles | `UserPublicProfile` |
| `/@<name>/dumps/<slug>` | | anyone; a private dump, its poster | `Dump` |
| `/@<name>/dumps/<slug>/edit` | | its poster, `dump:moderate` | `DumpEdit` |
| `/@<name>/playlists/<slug>` | | anyone; a private playlist, its owner | `PlaylistDetail` |
| `/search?q=` | `/search/users?q=`, `/search/playlists?q=` | anyone | `Search` |
| `/notifications` | | signed in | `Notifications` |
| `/community` | `/community/monthly`; the bare path is the week | signed in | `Community` |
| `/settings` | | signed in | `Settings` |
| `/manage` | | `category:manage`, `federation:manage` | `Manage` |
| `/login`, `/register?token=` | `/login?next=<path>` comes back to a page | signed out | `UserLogin`, `UserRegister` |
| `/authorize?client_id=…` | | signed in, else via `/login?next=` | `Authorize` |
| `/federation/callback?code=&state=` | | anyone | `FederationCallback` |
| `/reset-password?token=`, `/unsubscribe?token=` | | anyone | `ResetPassword`, `Unsubscribe` |
`/?share_url=` opens the create form on a link shared from Android,
`/?chat=open` opens the chat over any page, and `#comment-<id>` scrolls a dump's
@@ -105,8 +105,6 @@ thumbnail, waveform, cover or attachment takes the owner's media token as
- `GET /api/me/follow` — signed in. The ids of the users and playlists followed.
- `PUT`, `DELETE /api/me/follow/users/:id`, `/api/me/follow/playlists/:id` —
signed in. Follows or stops following.
- `GET /api/me/feed?from=users|playlists&category=` — signed in. The dumps of
what the caller follows.
- `GET /api/me/notifications` — signed in. The caller's notifications.
- `POST /api/me/notifications/read` — signed in. Marks them all read.
- `GET /api/me/grants` — signed in. The other instances the caller's account
@@ -140,6 +138,9 @@ there: those endpoints answer it 400.
- `POST /api/dumps` — signed in. Posts a link (JSON) or a file (multipart).
- `GET /api/dumps` — anyone. The feed; `?category=<slug>` narrows it, and
`?url=` answers the dumps of the same link instead.
- `GET /api/dumps?follow=users|playlists` — signed in. The feed's `follow` tab:
the dumps of the users, or of the playlists, the caller follows; `?category=`
narrows it too.
- `GET /api/dumps/:id` — anyone who may see it. A dump.
- `GET /api/dumps/:id/voters`, `/related`, `/playlists` — the same. Who upvoted
it, the dumps linked to or from it, the playlists holding it.

40
api/routes/dumps.ts
View File

@@ -12,6 +12,12 @@
* dumps the caller may see, newest first.
* - `GET /api/dumps?category=&page=&limit=` — optional sign-in. The same, in
* the category with that slug; 404 when there is none.
* - `GET /api/dumps?follow=users&category=&page=&limit=` — signed in. The
* index's "follow" tab: a page of the public dumps of the users the caller
* follows, newest first, optionally in one category.
* - `GET /api/dumps?follow=playlists&category=&page=&limit=` — signed in. Its
* `/follow/playlists` view: a page of the public dumps in the public
* playlists the caller follows, most recently added first.
* - `GET /api/dumps?url=` — optional sign-in. Answers the dumps already
* pointing at the same thing as `url`, for the create form's duplicate hint.
* - `GET /api/dumps/:dumpId` — optional sign-in. Answers a dump.
@@ -50,7 +56,7 @@ import { toPublicUser } from "../model/user.ts";
import { authMiddleware } from "../middleware/auth.ts";
import { can } from "../lib/permissions.ts";
import { parseOptionalAuth } from "../lib/auth.ts";
import { parsePagination } from "../lib/pagination.ts";
import { type Page, parsePagination } from "../lib/pagination.ts";
import {
createFileDump,
createUrlDump,
@@ -61,7 +67,15 @@ import {
refreshDumpMetadata,
updateDump,
} from "../services/dump-service.ts";
import { listDumpsByCategory } from "../services/category-service.ts";
import {
getCategoryBySlug,
listDumpsByCategory,
} from "../services/category-service.ts";
import {
getFollowedPlaylistsDumpFeed,
getFollowedUsersDumpFeed,
} from "../services/follow-service.ts";
import { FOLLOW_VIEWS, type FollowView } from "../../shared/paths.ts";
import { getDumpVoters } from "../services/vote-service.ts";
import { getRelatedDumps } from "../services/backlink-service.ts";
import { getPlaylistsForDump } from "../services/playlist-service.ts";
@@ -174,9 +188,25 @@ router.get("/", async (ctx) => {
}
const { page, limit } = parsePagination(params);
const category = params.get("category");
const { items, hasMore } = category
? listDumpsByCategory(category, page, limit, requestingUserId)
: listDumps(page, limit, requestingUserId);
const follow = params.get("follow");
let feed: Page<Dump>;
if (follow !== null) {
if (!requestingUserId) throw new APIException(401, "Missing token");
if (!(FOLLOW_VIEWS as readonly string[]).includes(follow)) {
throw new APIException(400, "follow must be users or playlists");
}
const categoryId = category
? getCategoryBySlug("dump", category).id
: undefined;
feed = (follow as FollowView) === "users"
? getFollowedUsersDumpFeed(requestingUserId, page, limit, categoryId)
: getFollowedPlaylistsDumpFeed(requestingUserId, page, limit, categoryId);
} else {
feed = category
? listDumpsByCategory(category, page, limit, requestingUserId)
: listDumps(page, limit, requestingUserId);
}
const { items, hasMore } = feed;
const responseBody: APIResponse<PaginatedData<Dump>> = {
success: true,
data: { items, hasMore },

43
api/routes/follows.ts
View File

@@ -1,6 +1,8 @@
/**
* Serves what the caller follows, and the index's "follow" tab built from it.
* What another user follows is served by `routes/users.ts`.
* Serves what the caller follows, and follows or stops following for them.
* The dumps of what they follow, the index's "follow" tab, are
* `GET /api/dumps?follow=`'s (`routes/dumps.ts`), and what another user
* follows is `routes/users.ts`'s.
*
* - `GET /api/me/follow` — signed in. Answers the ids of the users and
* playlists they follow.
@@ -10,35 +12,21 @@
* playlist.
* - `DELETE /api/me/follow/playlists/:playlistId` — signed in. Stops following
* a playlist.
* - `GET /api/me/feed?from=users&page=&limit=&category=` — signed in. Answers
* a page of the public dumps of the users they follow, newest first,
* optionally in one category.
* - `GET /api/me/feed?from=playlists&page=&limit=&category=` — signed in.
* Answers a page of the public dumps in the public playlists they follow,
* most recently added first, optionally in one category.
*
* @module
*/
import { Router } from "@oak/oak";
import { authMiddleware } from "../middleware/auth.ts";
import { APIException } from "../lib/api-exception.ts";
import type { APIResponse, PaginatedData } from "../../shared/api.ts";
import type { Dump } from "../../shared/dump.ts";
import type { APIResponse } from "../../shared/api.ts";
import type { FollowStatus } from "../../shared/follow.ts";
import { type Page, parsePagination } from "../lib/pagination.ts";
import {
followPlaylist,
followUser,
getFollowedPlaylistsDumpFeed,
getFollowedUsersDumpFeed,
getFollowStatus,
unfollowPlaylist,
unfollowUser,
} from "../services/follow-service.ts";
import { resolveCategoryFilter } from "../services/category-service.ts";
const EMPTY_FEED: Page<Dump> = { items: [], hasMore: false };
/**
* Mounted by `api/main.ts` behind the error, Open Graph and CORS middleware.
@@ -72,25 +60,4 @@ router.delete("/follow/playlists/:playlistId", authMiddleware, (ctx) => {
ctx.response.status = 204;
});
router.get("/feed", authMiddleware, (ctx) => {
const params = ctx.request.url.searchParams;
const from = params.get("from");
if (from !== "users" && from !== "playlists") {
throw new APIException(400, "from must be users or playlists");
}
const { page, limit } = parsePagination(params);
const categoryId = resolveCategoryFilter("dump", params);
const userId = ctx.state.user.userId;
const { items, hasMore } = categoryId === "missing"
? EMPTY_FEED
: from === "users"
? getFollowedUsersDumpFeed(userId, page, limit, categoryId)
: getFollowedPlaylistsDumpFeed(userId, page, limit, categoryId);
const body: APIResponse<PaginatedData<Dump>> = {
success: true,
data: { items, hasMore },
};
ctx.response.body = body;
});
export default router;

4
api/services/category-service.ts
View File

@@ -131,8 +131,8 @@ export function getCategoryIdBySlug(
* Returns the id of the category of `kind` whose slug the `name` parameter of
* `params`, `?category=` by default, gives, undefined without one, or
* "missing" when it names none, so that the list comes back empty rather than
* unfiltered. The follows routes filter the index's "followed" tab with it,
* the users routes a profile's lists, and the search route its results.
* unfiltered. The users routes filter a profile's lists with it, and the
* search route its results.
*/
export function resolveCategoryFilter(
kind: CategoryKind,

23
api/test/routes/follows.test.ts
View File

@@ -137,25 +137,28 @@ test("followed-users feed: public dumps of the people I follow, newest first", a
insertDump({ userId: stranger.id, title: "stranger" });
await put(`/api/me/follow/users/${followed.id}`, { auth: me.auth });
const feed = await get<PaginatedData<Dump>>("/api/me/feed?from=users", {
const feed = await get<PaginatedData<Dump>>("/api/dumps?follow=users", {
auth: me.auth,
});
assertEquals(titles(feed), ["new", "old"]);
assertEquals(feed.data.items[0].categoryIds, [music]);
assertEquals(
titles(
await get("/api/me/feed?from=users&category=music", { auth: me.auth }),
await get("/api/dumps?follow=users&category=music", { auth: me.auth }),
),
["new"],
);
// An unknown category filters everything out rather than nothing.
// As on the whole feed, an unknown category is a 404.
assertEquals(
(await get<PaginatedData<Dump>>("/api/me/feed?from=users&category=nope", {
auth: me.auth,
})).data,
{ items: [], hasMore: false },
(await get("/api/dumps?follow=users&category=nope", { auth: me.auth }))
.status,
404,
);
assertEquals((await get("/api/me/feed?from=users")).status, 401);
assertEquals(
(await get("/api/dumps?follow=dumps", { auth: me.auth })).status,
400,
);
assertEquals((await get("/api/dumps?follow=users")).status, 401);
});
test("followed-playlists feed: each dump once, public playlists only", async () => {
@@ -174,7 +177,7 @@ test("followed-playlists feed: each dump once, public playlists only", async ()
await post(`/api/playlists/${p.id}/dumps/${d.id}`, { auth: owner.auth });
}
await post(`/api/playlists/${p1.id}/dumps/${priv.id}`, { auth: owner.auth });
const feed = await get<PaginatedData<Dump>>("/api/me/feed?from=playlists", {
const feed = await get<PaginatedData<Dump>>("/api/dumps?follow=playlists", {
auth: me.auth,
});
assertEquals(titles(feed), ["shared"]);
@@ -183,7 +186,7 @@ test("followed-playlists feed: each dump once, public playlists only", async ()
// A playlist gone private drops out of the feed.
db.prepare(`UPDATE playlists SET is_public = 0;`).run();
assertEquals(
(await get<PaginatedData<Dump>>("/api/me/feed?from=playlists", {
(await get<PaginatedData<Dump>>("/api/dumps?follow=playlists", {
auth: me.auth,
})).data
.items.length,

20
shared/paths.ts
View File

@@ -46,8 +46,10 @@ export const PROFILE_TABS = [
export type ProfileTab = (typeof PROFILE_TABS)[number];
/**
* The views of a profile's `follow` tab: the users followed at
* `/@name/follow`, the playlists at `/@name/follow/playlists`.
* The views of a `follow` tab, of what is followed: the users, at the bare
* tab, or the playlists. A profile's lists them, `/@name/follow` and
* `/@name/follow/playlists`, and a feed's shows their dumps, `/follow` and
* `/follow/playlists`.
*/
export const FOLLOW_VIEWS = ["users", "playlists"] as const;
/** One of the {@link FOLLOW_VIEWS}. */
@@ -112,11 +114,19 @@ export function playlistPath(playlist: OwnedItem): string {
/**
* Returns the path of a feed: every dump's at the root, or a category's at
* `/<slug>`, on `tab`, or on the viewer's default tab without one.
* `/<slug>`, on `tab`, or on the viewer's default tab without one. The
* `follow` tab takes a `view`, the users followed by default.
*/
export function feedPath(categorySlug?: string, tab?: FeedTab): string {
export function feedPath(
categorySlug?: string,
tab?: FeedTab,
view?: FollowView,
): string {
const base = categorySlug ? `/${seg(categorySlug)}` : "";
return tab ? `${base}/${tab}` : base || "/";
if (!tab) return base || "/";
return tab === "follow" && view && view !== FOLLOW_VIEWS[0]
? `${base}/${tab}/${view}`
: `${base}/${tab}`;
}
/**

6
shared/test/paths.test.ts
View File

@@ -24,6 +24,12 @@ Deno.test("builders: one hierarchy, default views bare", () => {
assertEquals(feedPath(undefined, "hot"), "/hot");
assertEquals(feedPath("music"), "/music");
assertEquals(feedPath("music", "follow"), "/music/follow");
assertEquals(feedPath("music", "follow", "users"), "/music/follow");
assertEquals(
feedPath(undefined, "follow", "playlists"),
"/follow/playlists",
);
assertEquals(feedPath(undefined, "new", "playlists"), "/new");
assertEquals(searchPath(), "/search");
assertEquals(searchPath("users", "a b"), "/search/users?q=a%20b");
assertEquals(searchPath("dumps", "x"), "/search?q=x");

32
src/App.tsx
View File

@@ -5,8 +5,9 @@
* more segment, and a default view the bare path, with no redirect.
*
* - `/` is the feed of every dump on the viewer's default tab, and `/hot`,
* `/new`, `/journal` and `/follow` its tabs (`Index`). `/?share_url=` opens
* the create form on a shared link.
* `/new`, `/journal` and `/follow` its tabs (`Index`), `/follow/playlists`
* the dumps of the playlists followed. `/?share_url=` opens the create form
* on a shared link.
* - `/search` and `/search/:searchTab` are the search results (`Search`).
* - `/register` and `/login` sign up and sign in (`UserRegister`,
* `UserLogin`), signed out only, `/login?next=` coming back to a page.
@@ -28,7 +29,7 @@
* signed in only), and their playlists at `playlists/:slug`
* (`PlaylistDetail`).
* - `/:categorySlug` and `/:categorySlug/:feedTab` are a dump category's feed
* (`Index`).
* (`Index`), with its `/follow/playlists` too.
* - Any other path is `NotFound`.
*
* The pages not marked are open to anyone. Every page is loaded with its
@@ -49,7 +50,12 @@ import {
import { RestrictedGuest } from "./pages/RestrictedGuest.tsx";
import { RestrictedLoggedIn } from "./pages/RestrictedLoggedIn.tsx";
import { FEED_TABS, type FeedTab } from "../shared/paths.ts";
import {
FEED_TABS,
type FeedTab,
FOLLOW_VIEWS,
type FollowView,
} from "../shared/paths.ts";
import { AuthProvider } from "./contexts/auth/AuthProvider.tsx";
import { PlayerProvider } from "./contexts/player/PlayerProvider.tsx";
@@ -132,18 +138,21 @@ const NotFound = lazy(() =>
/**
* Renders a feed, of every dump or of `categorySlug`'s, on the tab the path's
* segment after the scope names, or the viewer's default one on the bare
* path. Every feed path renders it at the same place in the tree, and the key
* keeps `Index` mounted on a change of tab, which sorts on the client, and
* remounts it on a change of category, so that it refetches.
* path, and the `follow` tab on the view the next segment names. Every feed
* path renders it at the same place in the tree, and the key keeps `Index`
* mounted on a change of tab, which sorts on the client, and remounts it on a
* change of category, so that it refetches.
*/
function Feed({ categorySlug }: { categorySlug?: string }) {
const { pathname } = useLocation();
const segments = pathname.split("/").filter(Boolean);
const rest = segments.slice(categorySlug ? 1 : 0);
const feedTab = rest[0];
const [feedTab, view, ...more] = segments.slice(categorySlug ? 1 : 0);
if (
rest.length > 1 ||
(feedTab && !(FEED_TABS as readonly string[]).includes(feedTab))
more.length > 0 ||
(feedTab && !(FEED_TABS as readonly string[]).includes(feedTab)) ||
(view !== undefined &&
(feedTab !== "follow" || view === FOLLOW_VIEWS[0] ||
!(FOLLOW_VIEWS as readonly string[]).includes(view)))
) {
return <NotFound />;
}
@@ -152,6 +161,7 @@ function Feed({ categorySlug }: { categorySlug?: string }) {
key={categorySlug ?? ""}
categorySlug={categorySlug}
feedTab={feedTab as FeedTab | undefined}
followView={view as FollowView | undefined}
/>
);
}

31
src/components/feed/FeedTabBar.tsx
View File

@@ -9,7 +9,12 @@ import { useNavigate } from "react-router";
import { Trans } from "@lingui/react/macro";
import { useAuth } from "../../hooks/auth/useAuth.ts";
import { useViewerDefaultFeedTab } from "../../hooks/feed/useDefaultFeedTab.ts";
import { feedPath, type FeedTab } from "../../../shared/paths.ts";
import {
feedPath,
type FeedTab,
FOLLOW_VIEWS,
type FollowView,
} from "../../../shared/paths.ts";
import { TabBar } from "../shared/TabBar.tsx";
import { CategorySwitcher } from "../category/CategorySwitcher.tsx";
@@ -19,22 +24,34 @@ export interface FeedTabBarProps {
categorySlug?: string;
/** The tab shown, the viewer's default one on a bare path. */
tab: FeedTab;
/** The view of the "follow" tab, which picking a category keeps. */
followView?: FollowView;
}
/**
* Renders the "hot", "new" and "journal" tabs, and "followed" for a signed-in
* user. A tab leads to the same scope: `/new` for every dump, `/music/new` for
* a category, and the viewer's default tab to the bare `/` or `/music`.
* Picking a category keeps the tab, from `/music/new` to `/cinema/new`.
* a category, and the viewer's default tab to the bare `/` or `/music`. A tab
* is a view of the same page, so it takes the place of the current history
* entry, while picking a category, another page, adds one and keeps the tab
* and its view, from `/music/follow/playlists` to `/cinema/follow/playlists`.
* `Index` renders it twice, in the header and below it, and CSS shows one by
* screen width.
*/
export function FeedTabBar(
{ categorySlug, tab }: FeedTabBarProps,
{ categorySlug, tab, followView }: FeedTabBarProps,
): React.JSX.Element {
const { user } = useAuth();
const navigate = useNavigate();
const defaultTab = useViewerDefaultFeedTab();
// The default tab is the bare path, but a view of it other than its default
// needs the tab's segment before its own.
const pathOf = (slug: string | undefined, t: FeedTab, view?: FollowView) =>
feedPath(
slug,
t === defaultTab && (!view || view === FOLLOW_VIEWS[0]) ? undefined : t,
view,
);
const tabs = [
{ key: "hot" as FeedTab, label: <Trans>Hot</Trans> },
@@ -49,14 +66,12 @@ export function FeedTabBar(
<TabBar
tabs={tabs}
activeTab={tab}
onChange={(t) =>
navigate(feedPath(categorySlug, t === defaultTab ? undefined : t))}
onChange={(t) => navigate(pathOf(categorySlug, t), { replace: true })}
leading={
<CategorySwitcher
kind="dump"
categorySlug={categorySlug}
onSelect={(slug) =>
navigate(feedPath(slug, tab === defaultTab ? undefined : tab))}
onSelect={(slug) => navigate(pathOf(slug, tab, followView))}
/>
}
/>

57
src/components/feed/FollowedFeed.tsx
View File

@@ -5,7 +5,8 @@
* @module
*/
import { useCallback, useState } from "react";
import { useCallback } from "react";
import { useNavigate } from "react-router";
import { TabBar } from "../shared/TabBar.tsx";
import { t } from "@lingui/core/macro";
import { Trans } from "@lingui/react/macro";
@@ -26,20 +27,20 @@ import {
} from "../../utils/shared/deserialize.ts";
import type { Dump } from "../../../shared/dump.ts";
import { canLoadMore, pageUrl, readPage } from "../../utils/feed/pagedList.ts";
type FollowedSection = "users" | "playlists";
import { feedPath, type FollowView } from "../../../shared/paths.ts";
import { useViewerDefaultFeedTab } from "../../hooks/feed/useDefaultFeedTab.ts";
/**
* Returns one section's feed, from `GET /api/me/feed?from=<section>`, and the
* call that loads its next page. A section cached like the index's feed starts
* loaded and isn't fetched.
* Returns one view's feed, from `GET /api/dumps?follow=<view>`, and the call
* that loads its next page. A view cached like the index's feed starts loaded
* and isn't fetched.
*/
function useFollowedSection(
section: FollowedSection,
function useFollowedView(
section: FollowView,
categorySlug: string | undefined,
): { state: DumpFeedState; loadMore: () => void } {
const { user, authFetch } = useAuth();
const url = `${API_URL}/api/me/feed?from=${section}${
const url = `${API_URL}/api/dumps?follow=${section}${
categorySlug ? `&category=${encodeURIComponent(categorySlug)}` : ""
}`;
@@ -108,22 +109,26 @@ function FollowedSubFeed(
* signed-in user only. Unlike the other tabs, it loads its own dumps.
*/
export interface FollowedFeedProps {
/** Scopes both sections to a category. */
/** Scopes both views to a category. */
categorySlug?: string;
/** The view the path names: `/follow`, or `/follow/playlists`. */
view: FollowView;
}
/**
* Renders the "followed" tab in two sections, "from people" and "from
* playlists", from `GET /api/me/feed?from=users` and
* `GET /api/me/feed?from=playlists`. Both load at once, and each keeps its own
* pages, cached like the index's feed.
* Renders the "follow" tab in two views, "from people" at `/follow` and "from
* playlists" at `/follow/playlists`, from `GET /api/dumps?follow=users` and
* `GET /api/dumps?follow=playlists`. Both load at once, so switching is
* instant, and each keeps its own pages, cached like the index's feed.
* Switching takes the place of the current history entry, as a tab does.
*/
export function FollowedFeed(
{ categorySlug }: FollowedFeedProps,
{ categorySlug, view }: FollowedFeedProps,
): React.JSX.Element {
const users = useFollowedSection("users", categorySlug);
const playlists = useFollowedSection("playlists", categorySlug);
const [section, setSection] = useState<FollowedSection>("users");
const users = useFollowedView("users", categorySlug);
const playlists = useFollowedView("playlists", categorySlug);
const navigate = useNavigate();
const defaultTab = useViewerDefaultFeedTab();
return (
<div className="followed-feed">
@@ -132,12 +137,20 @@ export function FollowedFeed(
{ key: "users", label: <Trans>From people</Trans> },
{ key: "playlists", label: <Trans>From playlists</Trans> },
]}
activeTab={section}
onChange={setSection}
activeTab={view}
onChange={(v) =>
navigate(
feedPath(
categorySlug,
defaultTab === "follow" && v === "users" ? undefined : "follow",
v,
),
{ replace: true },
)}
innerClassName="followed-sub-nav"
/>
{section === "users" && (
{view === "users" && (
<FollowedSubFeed
state={users.state}
emptyMessage={t`Follow some users to see their dumps here.`}
@@ -145,7 +158,7 @@ export function FollowedFeed(
/>
)}
{section === "playlists" && (
{view === "playlists" && (
<FollowedSubFeed
state={playlists.state}
emptyMessage={t`Follow some public playlists to see their dumps here.`}

25
src/pages/Index.tsx
View File

@@ -11,7 +11,7 @@ import { Navigate, useLocation } from "react-router";
import { AppHeader } from "../components/layout/AppHeader.tsx";
import { PresenceRow } from "../components/feed/PresenceRow.tsx";
import { FeedTabBar } from "../components/feed/FeedTabBar.tsx";
import { type FeedTab } from "../../shared/paths.ts";
import { type FeedTab, type FollowView } from "../../shared/paths.ts";
import { useViewerDefaultFeedTab } from "../hooks/feed/useDefaultFeedTab.ts";
import { API_URL } from "../config/api.ts";
@@ -44,11 +44,14 @@ export interface IndexProps {
categorySlug?: string;
/** The tab the path names, or none for the viewer's default one. */
feedTab?: FeedTab;
/** The view of the "follow" tab the path names, the users without one. */
followView?: FollowView;
}
/**
* Renders `/`, `/:feedTab`, `/:categorySlug` and `/:categorySlug/:feedTab`,
* for anyone, the "follow" tab for a signed-in user only. The feed comes from
* for anyone, the "follow" tab, and its `/follow/playlists`, for a signed-in
* user only. The feed comes from
* `GET /api/dumps`, or `GET /api/dumps?category=`, a page at a time,
* and the "hot", "new" and "journal" tabs share it. `WSContext` adds the dumps
* posted since, the live vote counts, and who's online. The router keys the
@@ -57,7 +60,7 @@ export interface IndexProps {
* Android (`?share_url=`).
*/
export function Index(
{ categorySlug, feedTab }: IndexProps,
{ categorySlug, feedTab, followView = "users" }: IndexProps,
): React.JSX.Element {
const location = useLocation();
const justDeletedId = (location.state as { deletedDumpId?: string } | null)
@@ -195,7 +198,11 @@ export function Index(
fitWithin=".app-header-center"
fitBeside=".feed-sort"
/>
<FeedTabBar categorySlug={categorySlug} tab={tab} />
<FeedTabBar
categorySlug={categorySlug}
tab={tab}
followView={followView}
/>
</div>
}
disableNew={dumpsState.status === "error"}
@@ -203,7 +210,11 @@ export function Index(
/>
<div className="index-below-header">
<FeedTabBar categorySlug={categorySlug} tab={tab} />
<FeedTabBar
categorySlug={categorySlug}
tab={tab}
followView={followView}
/>
<PresenceRow fitWithin=".index-below-header" fitBeside=".feed-sort" />
</div>
@@ -211,7 +222,9 @@ export function Index(
<DumpFeed order={tab} {...mainFeedProps} />
)}
{tab === "journal" && <JournalFeed {...mainFeedProps} />}
{tab === "follow" && user && <FollowedFeed categorySlug={categorySlug} />}
{tab === "follow" && user && (
<FollowedFeed categorySlug={categorySlug} view={followView} />
)}
</div>
);
}

15
src/test/components/feed/FeedTabBar.test.tsx
View File

@@ -65,4 +65,19 @@ describe("FeedTabBar", () => {
await user.click(screen.getByRole("button", { name: "Hot" }));
expect(currentPath()).toBe("/hot");
});
test("a category keeps the follow tab's view", async () => {
const user = userEvent.setup();
renderWithContexts(
<FeedTabBar categorySlug="music" tab="follow" followView="playlists" />,
{
session: makeSession(),
route: "/music/follow/playlists",
categories,
},
);
await user.click(screen.getByRole("button", { name: "Music" }));
await user.click(screen.getByRole("option", { name: "Cinema" }));
expect(currentPath()).toBe("/cinema/follow/playlists");
});
});

50
src/test/pages/Index.test.tsx
View File

@@ -3,7 +3,11 @@ import { act, screen, waitFor, within } from "@testing-library/react";
import { userEvent } from "@testing-library/user-event";
import { useLocation } from "react-router";
import { Index } from "../../pages/Index.tsx";
import { FEED_TABS, type FeedTab } from "../../../shared/paths.ts";
import {
FEED_TABS,
type FeedTab,
type FollowView,
} from "../../../shared/paths.ts";
import { calls, fail, route } from "../fetch.ts";
import {
makeCategory,
@@ -22,14 +26,16 @@ const music = makeCategory({ id: "c-music", slug: "music", name: "Music" });
/** Reads a feed's path as `App`'s routes do. */
function Scoped() {
const { pathname } = useLocation();
const [first, second] = pathname.split("/").filter(Boolean);
const isTab = (FEED_TABS as readonly string[]).includes(first ?? "");
const categorySlug = first && !isTab ? first : undefined;
const segments = pathname.split("/").filter(Boolean);
const isTab = (FEED_TABS as readonly string[]).includes(segments[0] ?? "");
const categorySlug = isTab ? undefined : segments[0];
const [feedTab, followView] = segments.slice(isTab ? 0 : 1);
return (
<Index
key={categorySlug ?? ""}
categorySlug={categorySlug}
feedTab={(isTab ? first : second) as FeedTab | undefined}
feedTab={feedTab as FeedTab | undefined}
followView={followView as FollowView | undefined}
/>
);
}
@@ -96,7 +102,7 @@ describe("Index feeds", () => {
});
test('a default tab stored as v3\'s "followed" is "follow" now', async () => {
route("GET /api/me/feed", () => page([]));
route("GET /api/dumps", () => page([]));
localStorage.setItem("default-feed-tab", "followed");
setup("/", { session: makeSession() });
expect(
@@ -273,13 +279,16 @@ describe("Index feeds", () => {
});
describe("Followed feed", () => {
test("from people and from playlists", async () => {
const followCalls = () =>
calls("GET /api/dumps").filter((r) => r.url.searchParams.has("follow"));
test("from people at /follow, from playlists at /follow/playlists", async () => {
const session = makeSession();
route(
"GET /api/me/feed",
"GET /api/dumps",
(req) =>
page(
req.url.searchParams.get("from") === "users"
req.url.searchParams.get("follow") === "users"
? [makeDump({ title: "By a friend" })]
: [],
),
@@ -287,20 +296,25 @@ describe("Followed feed", () => {
const { user } = setup("/follow", { session });
await screen.findByText("By a friend");
await user.click(screen.getByRole("button", { name: "From playlists" }));
expect(currentPath()).toBe("/follow/playlists");
expect(
screen.getByText("Follow some public playlists to see their dumps here."),
).toBeInTheDocument();
const [feed] = calls("GET /api/me/feed");
const [feed] = followCalls();
expect(feed.headers.get("Authorization")).toBe(`Bearer ${session.token}`);
await user.click(screen.getByRole("button", { name: "From people" }));
expect(currentPath()).toBe("/follow");
});
test("a category narrows it", async () => {
route("GET /api/me/feed", () => page([]));
setup("/music/follow", { session: makeSession() });
await screen.findByText("Follow some users to see their dumps here.");
test("its view is in the path, a category's too", async () => {
route("GET /api/dumps", () => page([]));
setup("/music/follow/playlists", { session: makeSession() });
await screen.findByText(
"Follow some public playlists to see their dumps here.",
);
expect(
calls("GET /api/me/feed").map((r) => [
r.url.searchParams.get("from"),
followCalls().map((r) => [
r.url.searchParams.get("follow"),
r.url.searchParams.get("category"),
]).sort(),
).toEqual([["playlists", "music"], ["users", "music"]]);
@@ -308,9 +322,9 @@ describe("Followed feed", () => {
test("a server error reads as one, not as a lost connection", async () => {
route(
"GET /api/me/feed",
"GET /api/dumps",
(req) =>
req.url.searchParams.get("from") === "users"
req.url.searchParams.get("follow") === "users"
? fail("Internal error", 500)
: page([]),
);