Read Droplet data in a Portal widget

import { createElement, useEffect, useState } from "react";
import { defineWidget, queryDropletData } from "@fluid-app/portal-sdk/widgets/worker";

export function MemberEchoCard() {
  const [text, setText] = useState("Loading member…");
  useEffect(() => {
    let current = true;
    setText("Loading member…");
    queryDropletData({ dropletUuid: "drp_acme_rewards", operation: "member.echo", params: {} })
      .then(result => {
        const member = result && typeof result === "object" && !Array.isArray(result) ? result.member : null;
        if (!member || typeof member.id !== "string" || typeof member.public_id !== "string" ||
            !(member.external_id === null || typeof member.external_id === "string")) {
          throw new Error("Unexpected Droplet result");
        }
        if (current) setText(JSON.stringify({ id: member.id, public_id: member.public_id, external_id: member.external_id }, null, 2));
      })
      .catch(() => { if (current) setText("Member data is unavailable"); });
    return () => { current = false; };
  }, []);
  return createElement("pre", { role: "status" }, text);
}

export const memberEchoWidget = defineWidget({
  name: "MemberEcho",
  component: MemberEchoCard,
  uses: [queryDropletData],
});

import { verifySignature } from "@fluid-app/droplet-sdk";

export async function receiveMemberEcho(request, secret) {
  if (!secret) return new Response("Receiver is not configured", { status: 503 });
  const rawBody = Buffer.from(await request.arrayBuffer());
  const verified = verifySignature({
    rawBody, secret,
    timestamp: request.headers.get("x-fluid-timestamp"),
    signature: request.headers.get("x-fluid-signature"),
  });
  if (!verified.valid) return new Response("Invalid signature", { status: 401 });
  let query;
  try { query = JSON.parse(rawBody.toString("utf8")); }
  catch { return new Response("Invalid JSON", { status: 400 }); }
  const member = query?.member;
  if (!Number.isInteger(query?.company?.id) || query.company.id <= 0 ||
      !query.company.fluid_shop || query.company.fluid_shop !== request.headers.get("x-fluid-shop") ||
      !member || typeof member.id !== "string" || typeof member.public_id !== "string" ||
      !(member.external_id === null || typeof member.external_id === "string") ||
      query.operation !== "member.echo" || !query.params || Array.isArray(query.params) ||
      typeof query.params !== "object" || Object.keys(query.params).length !== 0) {
    return new Response("Unsupported query", { status: 422 });
  }
  return Response.json({ member: query.member }, { headers: { "Cache-Control": "private, no-store" } });
}