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

v4: every live update reaches every page that shows what it changed — the client kept each kind of event in one "latest" slot, so two arriving before a render lost the first (two notifications of one dump going public showed one); they now go through a subscription, useWSEvent, and each reaches every subscriber. A playlist made private sent its new title and description to everyone, and kept them on a visitor's page; playlists now follow the dumps' rule, broadcastChange: others get playlist_deleted, and playlist_created when it goes public again. A dump deleted or turned private sends its playlists' dumps again, so their counts and pages follow. Comments on a private dump reach its poster's other tabs. Reading the notifications clears the bell in every tab (notifications_read), and a category change makes every client fetch the categories again (categories_changed). The dump page gives way to a notice when its dump is deleted or made private. A profile gains the user's new dumps, the followed feed those of the users followed and the playlists followed, the search results follow edits and deletions, the index's category feed drops a dump edited out of it, and a renamed user's name follows on cards and comments. After a reconnection, every live list fetches the pages it holds again (usePagedList's resync), and the playlist, the profile, the dump, the categories and the follows are fetched again. The position memory of usePositionAwareSync is now inside the list sync hooks, so a returning item is put back without depending on the order the hooks are called.

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
khannurien
2026-10-10 07:34:49 +00:00
parent 1c5a449d84
commit 308a8299f3
53 changed files with 1941 additions and 1044 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
src/test/contexts/ws/WSProvider.test.tsx
View File

@@ -1,10 +1,16 @@
import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
import { act, renderHook } from "@testing-library/react";
import { type ReactNode, useContext } from "react";
import { type ReactNode, useContext, useState } from "react";
import { AuthProvider } from "../../../contexts/auth/AuthProvider.tsx";
import { WSProvider } from "../../../contexts/ws/WSProvider.tsx";
import { AvatarOverrideContext } from "../../../contexts/ws/AvatarOverrideContext.ts";
import { useWS, useWSChat, useWSPresence } from "../../../hooks/ws/useWS.ts";
import {
useWS,
useWSChat,
useWSEvent,
useWSPresence,
} from "../../../hooks/ws/useWS.ts";
import type { WSEvents } from "../../../contexts/ws/WSContext.ts";
import { useAuth } from "../../../hooks/auth/useAuth.ts";
import { FakeWebSocket } from "../../ws.ts";
import { defaultRoutes } from "../../render.tsx";
@@ -30,6 +36,14 @@ function wrapper({ children }: { children: ReactNode }) {
);
}
/** Every event of `kind` the provider emitted, oldest first. */
function useEvents<K extends keyof WSEvents>(kind: K): WSEvents[K][] {
// One array for the hook's life, which the subscription fills.
const [received] = useState<WSEvents[K][]>(() => []);
useWSEvent(kind, (event) => received.push(event));
return received;
}
function setup({ signedIn = true } = {}) {
if (signedIn) storeSession(me);
defaultRoutes({ session: signedIn ? me : null });
@@ -38,11 +52,25 @@ function setup({ signedIn = true } = {}) {
ws: { ...useWS(), ...useWSChat(), ...useWSPresence() },
auth: useAuth(),
avatars: useContext(AvatarOverrideContext),
events: {
vote: useEvents("vote"),
dump: useEvents("dump"),
playlist: useEvents("playlist"),
comment: useEvents("comment"),
user: useEvents("user"),
notification: useEvents("notification"),
categories: useEvents("categories"),
},
}),
{ wrapper },
);
const socket = FakeWebSocket.last;
return { hook, socket, ws: () => hook.result.current.ws };
return {
hook,
socket,
ws: () => hook.result.current.ws,
events: () => hook.result.current.events,
};
}
beforeEach(() =>
@@ -227,7 +255,7 @@ describe("votes", () => {
});
test("votes_update from another tab of mine syncs myVotes", () => {
const { socket, ws } = setup();
const { socket, ws, events } = setup();
socket.welcome();
socket.receive({
type: "votes_update",
@@ -237,7 +265,7 @@ describe("votes", () => {
action: "cast",
});
expect(ws().myVotes.has("d9")).toBe(true);
expect(ws().lastVoteEvent).toEqual({
expect(events().vote.at(-1)).toEqual({
dumpId: "d9",
voterId: "user-me",
action: "cast",
@@ -397,7 +425,7 @@ describe("dumps, playlists, comments, users", () => {
});
test("an update refreshes a live entry but doesn't make it an arrival", () => {
const { socket, ws } = setup();
const { socket, ws, events } = setup();
socket.welcome();
socket.receive({
type: "dump_created",
@@ -415,7 +443,11 @@ describe("dumps, playlists, comments, users", () => {
"a",
"two",
]]);
expect(ws().lastDumpEvent?.id).toBe("old");
expect(events().dump.map((e) => [e.type, e.dump.id])).toEqual([
["created", "a"],
["updated", "a"],
["updated", "old"],
]);
});
test("deletion removes from the live buffer", () => {
@@ -435,23 +467,23 @@ describe("dumps, playlists, comments, users", () => {
});
test("playlist events", () => {
const { socket, ws } = setup();
const { socket, ws, events } = setup();
socket.welcome();
const p = makePlaylist({ id: "p" });
socket.receive({ type: "playlist_created", playlist: wire(p) });
expect(ws().lastPlaylistEvent).toMatchObject({
expect(events().playlist.at(-1)).toMatchObject({
type: "created",
playlistId: "p",
});
socket.receive({ type: "playlist_updated", playlist: wire(p) });
expect(ws().lastPlaylistEvent?.type).toBe("updated");
expect(events().playlist.at(-1)?.type).toBe("updated");
socket.receive({
type: "playlist_dumps_updated",
playlistId: "p",
dumpIds: ["x"],
dumpCount: 2,
});
expect(ws().lastPlaylistEvent).toEqual({
expect(events().playlist.at(-1)).toEqual({
type: "dumps_updated",
playlistId: "p",
dumpIds: ["x"],
@@ -459,27 +491,50 @@ describe("dumps, playlists, comments, users", () => {
});
socket.receive({ type: "playlist_deleted", playlistId: "p", userId: "u" });
expect(ws().deletedPlaylistIds.has("p")).toBe(true);
expect(ws().lastPlaylistEvent).toEqual({
expect(events().playlist.at(-1)).toEqual({
type: "deleted",
playlistId: "p",
userId: "u",
});
// Going public again, after going private, is an arrival.
socket.receive({ type: "playlist_created", playlist: wire(p) });
expect(ws().deletedPlaylistIds.has("p")).toBe(false);
});
test("events arriving together all reach their subscribers", () => {
const { socket, events } = setup();
socket.welcome();
// Two messages in one task, as from one network read: a single state
// slot would keep only the last until the next render.
act(() => {
for (const id of ["n1", "n2"]) {
socket.onmessage?.(
new MessageEvent("message", {
data: JSON.stringify({
type: "notification_created",
notification: wire(makeNotification({ id })),
}),
}),
);
}
});
expect(events().notification.map((n) => n.id)).toEqual(["n1", "n2"]);
});
test("comment events", () => {
const { socket, ws } = setup();
const { socket, events } = setup();
socket.welcome();
const c = makeComment({ id: "c", dumpId: "d" });
socket.receive({ type: "comment_created", comment: wire(c) });
expect(ws().lastCommentEvent).toMatchObject({
expect(events().comment.at(-1)).toMatchObject({
type: "created",
dumpId: "d",
});
expect(ws().lastCommentEvent?.comment?.createdAt).toBeInstanceOf(Date);
expect(events().comment.at(-1)?.comment?.createdAt).toBeInstanceOf(Date);
socket.receive({ type: "comment_updated", comment: wire(c) });
expect(ws().lastCommentEvent?.type).toBe("updated");
expect(events().comment.at(-1)?.type).toBe("updated");
socket.receive({ type: "comment_deleted", commentId: "c", dumpId: "d" });
expect(ws().lastCommentEvent).toEqual({
expect(events().comment.at(-1)).toEqual({
type: "deleted",
dumpId: "d",
commentId: "c",
@@ -487,7 +542,7 @@ describe("dumps, playlists, comments, users", () => {
});
test("user_updated overrides that user's avatar everywhere", () => {
const { socket, hook } = setup();
const { socket, hook, events } = setup();
socket.welcome();
const u = makeUser({
id: "u1",
@@ -499,7 +554,7 @@ describe("dumps, playlists, comments, users", () => {
hasAvatar: true,
version: 5000,
});
expect(hook.result.current.ws.lastUserEvent?.user.id).toBe("u1");
expect(events().user.at(-1)?.user.id).toBe("u1");
});
test("presence updates", () => {
@@ -514,18 +569,32 @@ describe("dumps, playlists, comments, users", () => {
});
describe("notifications", () => {
test("a new one bumps the count and is remembered", () => {
const { socket, ws } = setup();
test("a new one bumps the count and is passed on", () => {
const { socket, ws, events } = setup();
socket.welcome({ unreadNotificationCount: 1 });
socket.receive({
type: "notification_created",
notification: wire(makeNotification({ id: "n" })),
});
expect(ws().unreadNotificationCount).toBe(2);
expect(ws().lastNotification?.id).toBe("n");
expect(events().notification.map((n) => n.id)).toEqual(["n"]);
act(() => ws().clearUnreadNotifications());
expect(ws().unreadNotificationCount).toBe(0);
});
test("reading them in another tab clears the count here", () => {
const { socket, ws } = setup();
socket.welcome({ unreadNotificationCount: 3 });
socket.receive({ type: "notifications_read" });
expect(ws().unreadNotificationCount).toBe(0);
});
test("a category change is passed on", () => {
const { socket, events } = setup();
socket.welcome();
socket.receive({ type: "categories_changed" });
expect(events().categories).toEqual([null]);
});
});
describe("chat", () => {