create-feedbax 0.1.0 → 0.2.1

package/template/src/server.ts

@@ -0,0 +1,151 @@
+import { handleImageRequest } from "./images-runtime";
+import {
+  handleParticipationRequest,
+  synchronizeConnectedUpdates,
+} from "./participation-runtime";
+import { handleConnectedRequest } from "./connected-runtime";
+import { configuredTurnstileSecret } from "./turnstile-configuration";
+import { createPortalServerEntry } from "./portal-server-entry";
+import { createConfiguredTrustedFeedbackHandler } from "./trusted-feedback-runtime";
+import { env } from "cloudflare:workers";
+import { createConfiguredFeedbackModule } from "./feedback-runtime";
+import { createPortalVoteHandler } from "./portal-voting";
+import { createCloudflareTurnstileVerifier } from "./cloudflare-turnstile";
+import feedbax from "./feedbax";
+import { ActionablePortalFailure } from "./safe-public-failure";
+import { VoteEligibilityError } from "@feedbax/feedback";
+import {
+  createPortalCommentMutationRequestHandler,
+  createPortalCommentRequestHandler,
+} from "./portal-comments";
+
+const application = createPortalServerEntry({
+  connectedHandler: async (request) =>
+    (await handleImageRequest(request)) ??
+    (await handleParticipationRequest(request)) ??
+    handleConnectedRequest(request),
+  commentHandler: (request) => {
+    const turnstileSecret = configuredTurnstileSecret(env.TURNSTILE_SECRET_KEY);
+    return createPortalCommentRequestHandler({
+      feedback: createConfiguredFeedbackModule(),
+      commentsEnabled: feedbax.features.comments,
+      rateLimiter: env.PORTAL_SUBMISSIONS_RATE_LIMITER,
+      rateLimitKey:
+        request.headers.get("CF-Connecting-IP") ?? "unknown-participant-ip",
+      ...(turnstileSecret
+        ? {
+            turnstileVerifier: createCloudflareTurnstileVerifier({
+              secretKey: turnstileSecret,
+            }),
+            participationSigningSecret: env.PARTICIPATION_SIGNING_SECRET,
+          }
+        : {}),
+      participationSigningSecret: env.PARTICIPATION_SIGNING_SECRET,
+    })(request);
+  },
+  commentMutationHandler: (request) =>
+    createPortalCommentMutationRequestHandler({
+      feedback: createConfiguredFeedbackModule(),
+      commentsEnabled: feedbax.features.comments,
+      rateLimiter: env.PORTAL_SUBMISSIONS_RATE_LIMITER,
+      rateLimitKey:
+        request.headers.get("CF-Connecting-IP") ?? "unknown-participant-ip",
+      ...(configuredTurnstileSecret(env.TURNSTILE_SECRET_KEY)
+        ? {
+            turnstileVerifier: createCloudflareTurnstileVerifier({
+              secretKey: configuredTurnstileSecret(env.TURNSTILE_SECRET_KEY)!,
+            }),
+          }
+        : {}),
+      participationSigningSecret: env.PARTICIPATION_SIGNING_SECRET,
+    })(request),
+  voteHandler: async (request) => {
+    try {
+      const turnstileSecret = configuredTurnstileSecret(
+        env.TURNSTILE_SECRET_KEY,
+      );
+      const result = await createPortalVoteHandler({
+        feedback: createConfiguredFeedbackModule(),
+        votingEnabled: feedbax.features.voting,
+        rateLimiter: env.PORTAL_SUBMISSIONS_RATE_LIMITER,
+        rateLimitKey:
+          request.headers.get("CF-Connecting-IP") ?? "unknown-participant-ip",
+        ...(turnstileSecret
+          ? {
+              turnstileVerifier: createCloudflareTurnstileVerifier({
+                secretKey: turnstileSecret,
+              }),
+              participationSigningSecret: env.PARTICIPATION_SIGNING_SECRET,
+            }
+          : {}),
+      })(await request.json());
+      return Response.json(result);
+    } catch (error) {
+      const actionable =
+        error instanceof ActionablePortalFailure ||
+        error instanceof VoteEligibilityError;
+      return Response.json(
+        {
+          error: actionable
+            ? error.message
+            : "Public feedback mutation is temporarily unavailable.",
+          code:
+            error instanceof ActionablePortalFailure
+              ? (error.code ?? "action_failed")
+              : error instanceof VoteEligibilityError
+                ? "ineligible_post"
+                : "temporarily_unavailable",
+        },
+        {
+          status:
+            error instanceof ActionablePortalFailure &&
+            error.code === "rate_limited"
+              ? 429
+              : actionable
+                ? 400
+                : 503,
+        },
+      );
+    }
+  },
+  trustedFeedbackHandler: async (request) => {
+    try {
+      return await createConfiguredTrustedFeedbackHandler()(request);
+    } catch {
+      return Response.json(
+        { error: "Trusted submission is unavailable." },
+        { status: 503 },
+      );
+    }
+  },
+});
+
+export default {
+  ...application,
+  async scheduled() {
+    if (!feedbax.connected) return;
+    if (feedbax.connected.processing === "standard") {
+      await synchronizeConnectedUpdates();
+      return;
+    }
+    if (!env.FEEDBAX_UPDATES)
+      throw new Error(
+        "Bind the Connected processing queue as FEEDBAX_UPDATES.",
+      );
+    await env.FEEDBAX_UPDATES.send("feedbax-connected-tick-v1");
+  },
+  async queue(
+    batch: import("@cloudflare/workers-types").MessageBatch<unknown>,
+  ) {
+    if (!feedbax.connected || feedbax.connected.processing === "standard")
+      throw new Error("Queue delivery requires small Connected processing.");
+    for (const message of batch.messages) {
+      if (message.body !== "feedbax-connected-tick-v1") {
+        message.ack();
+        continue;
+      }
+      await synchronizeConnectedUpdates();
+      message.ack();
+    }
+  },
+};

package/template/src/similar-posts.tsx

@@ -0,0 +1,45 @@
+import type { PublicPostPage } from "@feedbax/feedback";
+import { useEffect, useRef, useState } from "react";
+
+import { getPublicPostPage } from "./public-feedback-server-function";
+
+export const similarPostMinimumTitleLength = 4;
+
+export function SimilarPosts({ title }: { title: string }) {
+  const [posts, setPosts] = useState<PublicPostPage["items"]>([]);
+  const requestSequence = useRef(0);
+
+  useEffect(() => {
+    const query = title.trim();
+    const sequence = ++requestSequence.current;
+    if (query.length < similarPostMinimumTitleLength) {
+      setPosts([]);
+      return;
+    }
+    const timeout = window.setTimeout(() => {
+      void getPublicPostPage({ data: { search: query, sort: "top" } })
+        .then((page) => {
+          if (sequence === requestSequence.current)
+            setPosts(page.items.slice(0, 3));
+        })
+        .catch(() => {
+          if (sequence === requestSequence.current) setPosts([]);
+        });
+    }, 300);
+    return () => window.clearTimeout(timeout);
+  }, [title]);
+
+  if (!posts.length) return null;
+  return (
+    <aside aria-label="Potentially related Posts">
+      <p className="feedback-eyebrow">Potentially related</p>
+      <ul>
+        {posts.map((post) => (
+          <li key={post.slug}>
+            <a href={`/p/${encodeURIComponent(post.slug)}`}>{post.title}</a>
+          </li>
+        ))}
+      </ul>
+    </aside>
+  );
+}

package/template/src/submit-route.test.tsx

@@ -0,0 +1,134 @@
+// @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, describe, expect, it, vi } from "vitest";
+
+import { CreatePostOverlay } from "./create-post-overlay";
+import { PostCreationSkeleton } from "./post-creation-flow";
+import { renderToStaticMarkup } from "react-dom/server";
+
+const mutations = {
+  submitPost: vi.fn(),
+  editDraftPost: vi.fn(),
+  withdrawDraftPost: vi.fn(),
+};
+
+afterEach(() => {
+  cleanup();
+  vi.restoreAllMocks();
+  vi.unstubAllGlobals();
+});
+
+describe("/submit", () => {
+  it("opens from the feed at the canonical URL without discarding the feed", async () => {
+    const history = createMemoryHistory({ initialEntries: ["/"] });
+    const router = createSubmitRouter(history);
+
+    renderSubmitRouter(router);
+    fireEvent.click(await screen.findByRole("link", { name: "Create Post" }));
+
+    expect(
+      await screen.findByRole("dialog", { name: "Create a Post" }),
+    ).toBeTruthy();
+    expect(document.body.textContent).toContain("Posts");
+    expect(history.location.pathname).toBe("/submit");
+  });
+
+  it("renders a complete creation page when entered directly", async () => {
+    const history = createMemoryHistory({ initialEntries: ["/submit"] });
+    const router = createSubmitRouter(history);
+
+    renderSubmitRouter(router);
+
+    expect(await screen.findByRole("main")).toBeTruthy();
+    expect(screen.getByRole("heading", { name: "Create a Post" })).toBeTruthy();
+    expect(screen.queryByRole("dialog")).toBeNull();
+  });
+
+  it("uses a Drawer on mobile and Back restores the feed route", async () => {
+    vi.stubGlobal("matchMedia", (query: string) => ({
+      matches: query === "(max-width: 720px)",
+      media: query,
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+    }));
+    const history = createMemoryHistory({ initialEntries: ["/"] });
+    const router = createSubmitRouter(history);
+
+    renderSubmitRouter(router);
+    fireEvent.click(await screen.findByRole("link", { name: "Create Post" }));
+
+    const drawer = await screen.findByRole("dialog", { name: "Create a Post" });
+    expect(drawer.closest('[data-slot="drawer-popup"]')).toBeTruthy();
+    history.back();
+    await vi.waitFor(() => expect(history.location.pathname).toBe("/"));
+    await vi.waitFor(() => expect(screen.queryByRole("dialog")).toBeNull());
+  });
+
+  it("has a contextual creation skeleton for routed loading", () => {
+    const html = renderToStaticMarkup(<PostCreationSkeleton />);
+
+    expect(html).toContain('aria-label="Loading Post creation"');
+    expect(html).toContain('aria-busy="true"');
+    expect(html).toContain("Loading Post creation…");
+  });
+});
+
+function renderSubmitRouter(router: ReturnType<typeof createSubmitRouter>) {
+  render(
+    <QueryClientProvider client={new QueryClient()}>
+      <RouterProvider router={router} />
+    </QueryClientProvider>,
+  );
+}
+
+function createSubmitRouter(history: ReturnType<typeof createMemoryHistory>) {
+  const root = createRootRoute({
+    component: () => (
+      <>
+        <Outlet />
+        <CreatePostOverlay mutations={mutations} />
+      </>
+    ),
+  });
+  const index = createRoute({
+    getParentRoute: () => root,
+    path: "/",
+    component: () => (
+      <main>
+        <h1>Posts</h1>
+        <Link
+          to="/"
+          state={{ createPostOverlay: true }}
+          mask={{ to: "/submit", unmaskOnReload: true }}
+        >
+          Create Post
+        </Link>
+      </main>
+    ),
+  });
+  const submit = createRoute({
+    getParentRoute: () => root,
+    path: "/submit",
+    component: () => (
+      <main>
+        <h1>Create a Post</h1>
+      </main>
+    ),
+  });
+
+  return createRouter({
+    history,
+    routeTree: root.addChildren([index, submit]),
+  });
+}