create-feedbax 0.2.0 → 0.2.1

package/template/src/server.ts

@@ -1,3 +1,9 @@
+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";
@@ -13,7 +19,11 @@ import {
   createPortalCommentRequestHandler,
 } from "./portal-comments";
 
-export default createPortalServerEntry({
+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({
@@ -109,3 +119,33 @@ export default createPortalServerEntry({
     }
   },
 });
+
+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/trusted-feedback-handler.test.ts

@@ -43,7 +43,7 @@ describe("trusted feedback Worker handler", () => {
 
     expect(response.status).toBe(308);
     expect(response.headers.get("location")).toBe(
-      "https://feedback.example.com/?types=%5B%22Bug+Report%22%5D&statuses=%5B%22New%22%5D&pageSize=25&sort=top&schema=1",
+      "https://feedback.example.com/?types=%5B%22Bug+Report%22%5D&statuses=%5B%22New%22%5D&pageSize=25&sort=top&schema=2",
     );
     expect(applicationHandler).not.toHaveBeenCalled();
   });

package/template/src/vote-toggle.tsx

@@ -1,3 +1,5 @@
+import { publicPostQueryKey } from "./post-detail-query";
+import { useConnectedIdentity } from "./components/connected-identity-provider";
 import { configuredTurnstileSiteKey } from "./turnstile-configuration";
 import type { PublicPost } from "@feedbax/feedback";
 import { ChevronUp } from "lucide-react";
@@ -27,10 +29,12 @@ export function VoteToggle({
   turnstileSiteKey?: string;
   requestTimeoutMs?: number;
 }) {
+  const identity = useConnectedIdentity();
   const queryClient = useContext(QueryClientContext);
   const [voted, setVoted] = useState(false);
   const [count, setCount] = useState(post.voteCount ?? 0);
   const [pending, setPending] = useState(false);
+  const [voteStateReady, setVoteStateReady] = useState(!identity.enabled);
   const [error, setError] = useState<string>();
   const [participationPass, setParticipationPass] = useState<string>();
   const form = useRef<HTMLFormElement>(null);
@@ -38,12 +42,34 @@ export function VoteToggle({
   const turnstileWidget = useRef<string | undefined>(undefined);
 
   useEffect(() => {
-    setVoted(readVotedPostSlugs(localStorage).has(post.slug));
+    if (!identity.enabled)
+      setVoted(readVotedPostSlugs(localStorage).has(post.slug));
     setCount(post.voteCount ?? 0);
     setParticipationPass(
       sessionStorage.getItem("feedbax:participation-pass") ?? undefined,
     );
-  }, [post.slug, post.voteCount]);
+  }, [post.slug, post.voteCount, identity.enabled]);
+  useEffect(() => {
+    if (!identity.enabled || !identity.displayName) return;
+    const controller = new AbortController();
+    setVoteStateReady(false);
+    fetch(`/internal/connected/votes?slug=${encodeURIComponent(post.slug)}`, {
+      signal: controller.signal,
+      cache: "no-store",
+    })
+      .then(async (response) => {
+        if (!response.ok)
+          throw new Error("Could not load your Vote. Refresh and try again.");
+        const state = await response.json();
+        setVoteStateReady(true);
+        setVoted(state.voted);
+        setCount(state.voteCount);
+      })
+      .catch((cause) => {
+        if (!controller.signal.aborted) setError(cause.message);
+      });
+    return () => controller.abort();
+  }, [identity.enabled, identity.displayName, post.slug]);
   useEffect(() => {
     const reconcile = (event: Event) => {
       const detail = (
@@ -95,6 +121,10 @@ export function VoteToggle({
   }, [participationPass, turnstileSiteKey]);
 
   async function toggle() {
+    if (identity.enabled && !identity.displayName) {
+      window.location.href = "/internal/identity/start";
+      return;
+    }
     const previous = { voted, count };
     const nextVoted = !voted;
     setVoted(nextVoted);
@@ -138,7 +168,8 @@ export function VoteToggle({
         throw new Error(result.error ?? "Vote failed. Try again.");
       }
       setCount(result.voteCount);
-      persistVotedPost(localStorage, post.slug, nextVoted);
+      if (!identity.enabled)
+        persistVotedPost(localStorage, post.slug, nextVoted);
       window.dispatchEvent(
         new CustomEvent(voteConfirmedEvent, {
           detail: {
@@ -151,6 +182,7 @@ export function VoteToggle({
       if (queryClient) {
         void Promise.all([
           queryClient.invalidateQueries({ queryKey: publicPostsQueryKey }),
+          queryClient.invalidateQueries({ queryKey: publicPostQueryKey }),
           queryClient.invalidateQueries({ queryKey: publicRoadmapQueryKey }),
         ]);
       }
@@ -177,17 +209,18 @@ export function VoteToggle({
   }
 
   return (
-    <form
-      ref={form}
-      className="vote-toggle"
-      onSubmit={(event) => event.preventDefault()}
-    >
+    <form ref={form} onSubmit={(event) => event.preventDefault()}>
       <button
         className="vote-toggle-button"
         type="button"
         aria-pressed={voted}
         aria-label={`${voted ? "Remove Vote" : "Add Vote"}, ${count} Votes`}
-        disabled={pending}
+        disabled={
+          pending ||
+          (identity.enabled &&
+            (!identity.ready ||
+              (Boolean(identity.displayName) && !voteStateReady)))
+        }
         onClick={toggle}
       >
         <ChevronUp aria-hidden="true" /> {count}