- 🔔
+
+ 🔔
+
Notifications
- {state.status === "loaded" && totalUnread > 0 && (
+ {totalUnread > 0 && (
- {totalUnread} new
+
)}
- {state.status === "loading" && (
-
- Loading…
-
- )}
- {state.status === "error" && (
-
- )}
-
- {state.status === "loaded" && items.length === 0 && (
-
-
🔕
-
- Nothing here yet.
-
-
-
- You'll be notified when someone follows your playlists, upvotes
- your dumps, or posts new content.
-
-
-
- )}
-
- {state.status === "loaded" && items.length > 0 &&
- groupByDate(items).map(({ label, items }) => (
-
-
- {label === "Today"
- ? t`Today`
- : label === "Yesterday"
- ? t`Yesterday`
- : t`Earlier`}
-
-
-
- ))}
-
- {state.status === "loaded" && state.data.hasMore && (
-
- )}
+
items.length === 0}
+ empty={
+
+
+ 🔕
+
+
+ Nothing here yet.
+
+
+
+ You'll be notified when someone follows your playlists,
+ upvotes your dumps, or posts new content.
+
+
+
+ }
+ >
+ {({ data }) => (
+ <>
+ {groupByDate(items).map((group) => (
+
+ {group.label}
+
+ {group.items.map((n) => (
+
+ ))}
+
+
+ ))}
+
+ >
+ )}
+
);
diff --git a/src/test/pages/Notifications.test.tsx b/src/test/pages/Notifications.test.tsx
index 533acfe2..16e5a227 100644
--- a/src/test/pages/Notifications.test.tsx
+++ b/src/test/pages/Notifications.test.tsx
@@ -1,5 +1,5 @@
-import { describe, expect, test } from "vitest";
-import { screen, waitFor } from "@testing-library/react";
+import { describe, expect, test, vi } from "vitest";
+import { act, screen, waitFor } from "@testing-library/react";
import { userEvent } from "@testing-library/user-event";
import { Notifications } from "../../pages/Notifications.tsx";
import type { Notification } from "../../../shared/notification.ts";
@@ -7,6 +7,7 @@ import { calls, deferred, fail, route } from "../fetch.ts";
import { makeNotification, makeSession, page, wire } from "../fixtures.ts";
import { renderApp } from "../render.tsx";
import { FakeWebSocket } from "../ws.ts";
+import { FakeIntersectionObserver } from "../setup.ts";
const me = makeSession({ id: "me" });
const DAY = 86_400_000;
@@ -21,14 +22,20 @@ function open(items: Notification[], { hasMore = false } = {}) {
);
route("POST /api/me/notifications/read", () => ({}));
const user = userEvent.setup();
- renderApp(