create-feedbax 0.1.0 → 0.2.1

package/template/src/post-detail-content.test.tsx

@@ -0,0 +1,233 @@
+// @vitest-environment jsdom
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import {
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from "@testing-library/react";
+import { afterEach, expect, it, vi } from "vitest";
+import { PostDetailContent } from "./post-detail-content";
+import { saveDeviceProfile } from "./browser-post-state";
+
+const post = {
+  slug: "comment-cache",
+  title: "Comment cache",
+  description: "Feedback",
+  type: "Feature Request" as const,
+  status: "Planned" as const,
+  createdAt: new Date(),
+  updatedAt: new Date(),
+};
+const author = { kind: "participant" as const, displayName: "Ama" };
+afterEach(() => {
+  cleanup();
+  localStorage.clear();
+  vi.restoreAllMocks();
+});
+
+it.each(["edit", "delete"] as const)(
+  "preserves a confirmed Comment %s when another page arrives",
+  async (action) => {
+    saveDeviceProfile(localStorage, { name: "Ama", email: "ama@example.com" });
+    localStorage.setItem(
+      "feedbax:comment-capabilities",
+      JSON.stringify({
+        "comment-1": {
+          capability: "capability",
+          expiresAt: Date.now() + 60000,
+        },
+      }),
+    );
+    let state: "original" | "edit" | "delete" = "original";
+    const loadComments = vi.fn(async (_slug: string, cursor?: string) =>
+      cursor
+        ? {
+            items: [
+              {
+                id: "thread-2",
+                comments: [
+                  {
+                    id: "comment-2",
+                    body: "Second page",
+                    author,
+                    createdAt: new Date(),
+                  },
+                ],
+              },
+            ],
+          }
+        : {
+            items:
+              state === "delete"
+                ? []
+                : [
+                    {
+                      id: "thread-1",
+                      comments: [
+                        {
+                          id: "comment-1",
+                          body:
+                            state === "edit"
+                              ? "Corrected message"
+                              : "Original message",
+                          author,
+                          createdAt: new Date(),
+                        },
+                      ],
+                    },
+                  ],
+            nextCursor: "next",
+          },
+    );
+    const mutateComment = vi.fn(async () => {
+      state = action;
+    });
+    vi.spyOn(window, "confirm").mockReturnValue(true);
+    const client = new QueryClient({
+      defaultOptions: { queries: { retry: false } },
+    });
+    render(
+      <QueryClientProvider client={client}>
+        <PostDetailContent
+          post={post}
+          loadComments={loadComments}
+          mutateComment={mutateComment}
+        />
+      </QueryClientProvider>,
+    );
+    expect(await screen.findByText("Original message")).toBeTruthy();
+    fireEvent.click(
+      await screen.findByRole("button", {
+        name: action === "edit" ? "Edit" : "Delete",
+      }),
+    );
+    if (action === "edit") {
+      fireEvent.change(screen.getByRole("textbox", { name: "Comment text" }), {
+        target: { value: "Corrected message" },
+      });
+      fireEvent.click(screen.getByRole("button", { name: "Save" }));
+    }
+    await waitFor(() => expect(mutateComment).toHaveBeenCalledOnce());
+    await waitFor(() =>
+      expect(screen.queryByText("Original message")).toBeNull(),
+    );
+    const more = await screen.findByRole("button", {
+      name: "Load more",
+    });
+    await waitFor(() => expect(more.hasAttribute("disabled")).toBe(false));
+    fireEvent.click(more);
+    expect(await screen.findByText("Second page")).toBeTruthy();
+    expect(screen.queryByText("Original message")).toBeNull();
+    expect(screen.queryAllByText("Corrected message")).toHaveLength(
+      action === "edit" ? 1 : 0,
+    );
+  },
+);
+
+it("removes a Comment resolved in Notion when the shared query refreshes", async () => {
+  let visible = true;
+  const loadComments = vi.fn(async () => ({
+    items: visible
+      ? [
+          {
+            id: "thread-1",
+            comments: [
+              {
+                id: "comment-1",
+                body: "Resolved in Notion",
+                author,
+                createdAt: new Date(),
+              },
+            ],
+          },
+        ]
+      : [],
+  }));
+  const client = new QueryClient({
+    defaultOptions: { queries: { retry: false } },
+  });
+  render(
+    <QueryClientProvider client={client}>
+      <PostDetailContent post={post} loadComments={loadComments} />
+    </QueryClientProvider>,
+  );
+  expect(await screen.findByText("Resolved in Notion")).toBeTruthy();
+  visible = false;
+  void client.invalidateQueries({
+    queryKey: ["public-post-comments", post.slug],
+  });
+  await waitFor(() =>
+    expect(screen.queryByText("Resolved in Notion")).toBeNull(),
+  );
+  expect(screen.getByText("No comments yet")).toBeTruthy();
+});
+
+it("keeps private edit capabilities out of the shared public Comment cache", async () => {
+  saveDeviceProfile(localStorage, { name: "Ama", email: "ama@example.com" });
+  const confirmed = {
+    id: "comment-1",
+    discussionId: "thread-1",
+    body: "Public message",
+    author,
+    createdAt: new Date(),
+    commentCapability: "private-edit-capability",
+    commentCapabilityExpiresAt: Date.now() + 60000,
+  };
+  let submitted = false;
+  const loadComments = vi.fn(async () => ({
+    items: submitted
+      ? [
+          {
+            id: "thread-1",
+            comments: [
+              {
+                id: confirmed.id,
+                body: confirmed.body,
+                author,
+                createdAt: confirmed.createdAt,
+              },
+            ],
+          },
+        ]
+      : [],
+  }));
+  const client = new QueryClient({
+    defaultOptions: { queries: { retry: false } },
+  });
+  const snapshots: string[] = [];
+  const unsubscribe = client.getQueryCache().subscribe((event) => {
+    snapshots.push(JSON.stringify(event.query.state.data));
+  });
+  render(
+    <QueryClientProvider client={client}>
+      <PostDetailContent
+        post={post}
+        loadComments={loadComments}
+        submitComment={async () => {
+          submitted = true;
+          return confirmed;
+        }}
+      />
+    </QueryClientProvider>,
+  );
+  fireEvent.change(await screen.findByLabelText("Add a comment"), {
+    target: { value: confirmed.body },
+  });
+  fireEvent.click(screen.getByRole("button", { name: "Post comment" }));
+  expect(await screen.findByText(confirmed.body)).toBeTruthy();
+  await waitFor(() =>
+    expect(localStorage.getItem("feedbax:comment-capabilities")).toContain(
+      confirmed.commentCapability,
+    ),
+  );
+  const cached = JSON.stringify(
+    client.getQueryData(["public-post-comments", post.slug]),
+  );
+  expect(cached).toContain(confirmed.body);
+  expect(cached).not.toContain("commentCapability");
+  expect(cached).not.toContain(confirmed.commentCapability);
+  expect(snapshots.join("\n")).not.toContain(confirmed.commentCapability);
+  unsubscribe();
+});

package/template/src/post-detail-content.tsx

@@ -0,0 +1,162 @@
+import type { CommentThreadPage, CreatedComment } from "@feedbax/feedback";
+import { type ComponentProps, useMemo } from "react";
+import {
+  type InfiniteData,
+  useInfiniteQuery,
+  useQueryClient,
+} from "@tanstack/react-query";
+import { mergeCommentThreads } from "./comment-thread-page";
+import { PublicPostDetail } from "./public-post-detail";
+import {
+  publicPostCommentsQuery,
+  type FetchPostComments,
+} from "./post-detail-query";
+import feedbax from "./feedbax";
+
+type Props = Omit<
+  ComponentProps<typeof PublicPostDetail>,
+  "comments" | "loadMore"
+> & { loadComments?: FetchPostComments };
+type Pages = InfiniteData<CommentThreadPage, string | undefined>;
+const emptyComments: FetchPostComments = async () => ({ items: [] });
+
+export function PostDetailContent(props: Props) {
+  return <PostDiscussion key={props.post.slug} {...props} />;
+}
+
+function PostDiscussion({ loadComments, ...props }: Props) {
+  const client = useQueryClient();
+  const options = publicPostCommentsQuery(
+    props.post.slug,
+    loadComments ?? emptyComments,
+  );
+  const query = useInfiniteQuery({
+    ...options,
+    enabled:
+      (props.features ?? feedbax.features).comments && Boolean(loadComments),
+  });
+  const comments = useMemo(
+    () => ({
+      items:
+        query.data?.pages.reduce(
+          (current, page) => mergeCommentThreads(current, page.items),
+          [] as CommentThreadPage["items"],
+        ) ?? [],
+    }),
+    [query.data],
+  );
+  function updatePages(update: (pages: Pages) => Pages) {
+    client.setQueryData<Pages>(options.queryKey, (current) =>
+      update(current ?? { pages: [{ items: [] }], pageParams: [undefined] }),
+    );
+  }
+  return (
+    <PublicPostDetail
+      {...props}
+      comments={comments}
+      commentsLoading={query.isFetching}
+      commentsLoadError={query.isError}
+      retryComments={() => {
+        if (query.isFetchNextPageError) void query.fetchNextPage();
+        else void query.refetch();
+      }}
+      loadMore={
+        query.hasNextPage && !query.isError
+          ? async () => {
+              await query.fetchNextPage();
+            }
+          : undefined
+      }
+      submitComment={
+        props.submitComment
+          ? async (input) => {
+              await client.cancelQueries({ queryKey: options.queryKey });
+              try {
+                const confirmed = await props.submitComment!(input);
+                updatePages((current) => upsertComment(current, confirmed));
+                return confirmed;
+              } finally {
+                void client.invalidateQueries({ queryKey: options.queryKey });
+              }
+            }
+          : undefined
+      }
+      mutateComment={
+        props.mutateComment
+          ? async (input) => {
+              await client.cancelQueries({ queryKey: options.queryKey });
+              try {
+                const result = await props.mutateComment!(input);
+                updatePages((current) => ({
+                  ...current,
+                  pages: current.pages.map((page) => ({
+                    ...page,
+                    items: page.items
+                      .map((thread) => ({
+                        ...thread,
+                        comments: thread.comments.flatMap((comment) =>
+                          comment.id !== input.commentId
+                            ? [comment]
+                            : input.action === "delete"
+                              ? []
+                              : [{ ...comment, body: input.body! }],
+                        ),
+                      }))
+                      .filter((thread) => thread.comments.length > 0),
+                  })),
+                }));
+                return result;
+              } finally {
+                void client.invalidateQueries({ queryKey: options.queryKey });
+              }
+            }
+          : undefined
+      }
+    />
+  );
+}
+
+function upsertComment(current: Pages, comment: CreatedComment): Pages {
+  // Cache only the public projection; browser edit capabilities stay outside it.
+  const publicComment = {
+    id: comment.id,
+    body: comment.body,
+    ...(comment.images?.length
+      ? {
+          images: comment.images.map((image) => ({
+            id: image.id,
+            src: image.src,
+            contentType: image.contentType,
+            bytes: image.bytes,
+          })),
+        }
+      : {}),
+    createdAt: comment.createdAt,
+    author:
+      comment.author.kind === "participant"
+        ? {
+            kind: "participant" as const,
+            displayName: comment.author.displayName,
+            ...(comment.author.verified ? { verified: true } : {}),
+          }
+        : {
+            kind: "product-team" as const,
+            displayName: comment.author.displayName,
+          },
+  };
+  const thread = { id: comment.discussionId, comments: [publicComment] };
+  const present = current.pages.some((page) =>
+    page.items.some((item) => item.id === thread.id),
+  );
+  return {
+    ...current,
+    pages: current.pages.map((page, index) => ({
+      ...page,
+      items:
+        (index === 0 && !present) ||
+        page.items.some((item) => item.id === thread.id)
+          ? mergeCommentThreads(page.items, [thread])
+          : page.items,
+    })),
+  };
+}

package/template/src/post-detail-overlay.test.tsx

@@ -0,0 +1,114 @@
+// @vitest-environment jsdom
+
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import {
+  Link,
+  Outlet,
+  RouterProvider,
+  createMemoryHistory,
+  createRootRoute,
+  createRoute,
+  createRouter,
+} from "@tanstack/react-router";
+import { afterEach, expect, it, vi } from "vitest";
+
+import { PostDetailOverlay } from "./post-detail-overlay";
+
+afterEach(() => {
+  cleanup();
+  vi.unstubAllGlobals();
+});
+
+it("masks a Post detail over its originating route and Back restores that route", async () => {
+  const history = createMemoryHistory({ initialEntries: ["/?query=search"] });
+  const router = createTestRouter(history);
+
+  render(
+    <QueryClientProvider client={new QueryClient()}>
+      <RouterProvider router={router} />
+    </QueryClientProvider>,
+  );
+  const origin = await screen.findByRole("link", { name: "Open Post" });
+  origin.focus();
+  fireEvent.click(origin);
+
+  expect(
+    await screen.findByRole("dialog", { name: "Post details" }),
+  ).toBeTruthy();
+  expect(document.body.textContent).toContain("Feed remains visible");
+  expect(history.location.pathname).toBe("/p/masked-post");
+
+  fireEvent.click(screen.getByRole("button", { name: "Close" }));
+  await vi.waitFor(() => expect(history.location.pathname).toBe("/"));
+  expect(history.location.search).toBe("?query=search");
+  await vi.waitFor(() => expect(screen.queryByRole("dialog")).toBeNull());
+  await vi.waitFor(() => expect(document.activeElement).toBe(origin));
+});
+
+it("uses a Drawer on mobile and follows browser Back and Forward history", async () => {
+  vi.stubGlobal("matchMedia", (query: string) => ({
+    matches: query === "(max-width: 720px)",
+    media: query,
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+  }));
+  const history = createMemoryHistory({ initialEntries: ["/?query=search"] });
+  const router = createTestRouter(history);
+
+  render(
+    <QueryClientProvider client={new QueryClient()}>
+      <RouterProvider router={router} />
+    </QueryClientProvider>,
+  );
+  fireEvent.click(await screen.findByRole("link", { name: "Open Post" }));
+
+  const drawer = await screen.findByRole("dialog", { name: "Post details" });
+  expect(drawer.closest('[data-slot="drawer-popup"]')).toBeTruthy();
+  history.back();
+  await vi.waitFor(() => expect(screen.queryByRole("dialog")).toBeNull());
+  expect(history.location.search).toBe("?query=search");
+
+  history.forward();
+  expect(
+    await screen.findByRole("dialog", { name: "Post details" }),
+  ).toBeTruthy();
+  expect(history.location.pathname).toBe("/p/masked-post");
+});
+
+function createTestRouter(history: ReturnType<typeof createMemoryHistory>) {
+  const root = createRootRoute({
+    component: () => (
+      <>
+        <Outlet />
+        <PostDetailOverlay renderDetail={(slug) => <article>{slug}</article>} />
+      </>
+    ),
+  });
+  const index = createRoute({
+    getParentRoute: () => root,
+    path: "/",
+    component: () => (
+      <main>
+        Feed remains visible
+        <Link
+          to="."
+          state={{ postDetailOverlay: { slug: "masked-post" } }}
+          mask={{
+            to: "/p/$slug",
+            params: { slug: "masked-post" },
+            unmaskOnReload: true,
+          }}
+        >
+          Open Post
+        </Link>
+      </main>
+    ),
+  });
+  const post = createRoute({
+    getParentRoute: () => root,
+    path: "/p/$slug",
+    component: () => <main>Full page</main>,
+  });
+  return createRouter({ history, routeTree: root.addChildren([index, post]) });
+}

package/template/src/post-detail-overlay.tsx

@@ -0,0 +1,67 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@feedbax/ui/components/dialog";
+import {
+  Drawer,
+  DrawerContent,
+  DrawerDescription,
+  DrawerHeader,
+  DrawerTitle,
+} from "@feedbax/ui/components/drawer";
+import { useRouter, useRouterState } from "@tanstack/react-router";
+import { type ReactNode } from "react";
+import { useMediaQuery } from "./use-media-query";
+
+declare module "@tanstack/react-router" {
+  interface HistoryState {
+    postDetailOverlay?: { slug: string };
+  }
+}
+
+export function PostDetailOverlay({
+  renderDetail,
+}: {
+  renderDetail: (slug: string) => ReactNode;
+}) {
+  const router = useRouter();
+  const request = useRouterState({
+    select: (state) => state.location.state.postDetailOverlay,
+  });
+  const mobile = useMediaQuery("(max-width: 720px)");
+  const close = (open: boolean) => {
+    if (!open) router.history.back();
+  };
+
+  if (!request) return null;
+  const detail = renderDetail(request.slug);
+
+  if (mobile) {
+    return (
+      <Drawer open onOpenChange={close}>
+        <DrawerContent className="post-detail-drawer">
+          <DrawerHeader className="sr-only">
+            <DrawerTitle>Post details</DrawerTitle>
+            <DrawerDescription>View and manage this Post.</DrawerDescription>
+          </DrawerHeader>
+          {detail}
+        </DrawerContent>
+      </Drawer>
+    );
+  }
+
+  return (
+    <Dialog open onOpenChange={close}>
+      <DialogContent className="post-detail-dialog">
+        <DialogHeader className="sr-only">
+          <DialogTitle>Post details</DialogTitle>
+          <DialogDescription>View and manage this Post.</DialogDescription>
+        </DialogHeader>
+        {detail}
+      </DialogContent>
+    </Dialog>
+  );
+}

package/template/src/post-detail-query.ts

@@ -0,0 +1,34 @@
+import type { CommentThreadPage, PublicPost } from "@feedbax/feedback";
+import { infiniteQueryOptions, queryOptions } from "@tanstack/react-query";
+
+export const publicPostQueryKey = ["public-post"] as const;
+export type FetchPostComments = (
+  slug: string,
+  cursor?: string,
+) => Promise<CommentThreadPage>;
+
+export function publicPostQuery(
+  slug: string,
+  loadPost: (slug: string) => Promise<PublicPost | undefined>,
+) {
+  return queryOptions({
+    queryKey: [...publicPostQueryKey, slug],
+    queryFn: async () => (await loadPost(slug)) ?? null,
+    staleTime: 30_000,
+    retry: false,
+  });
+}
+
+export function publicPostCommentsQuery(
+  slug: string,
+  loadComments: FetchPostComments,
+) {
+  return infiniteQueryOptions({
+    queryKey: ["public-post-comments", slug],
+    initialPageParam: undefined as string | undefined,
+    queryFn: ({ pageParam }) => loadComments(slug, pageParam),
+    getNextPageParam: (page) => page.nextCursor,
+    staleTime: 0,
+    retry: false,
+  });
+}