AnnounceButton

tcmts.studio.AnnounceButton · #eu533gmz · term · runs in the browser

uses useState

Announce a release (announceRelease): asked as whom (a handle, or the account used last) and where it's fetched from (or what's kept); signing in, the first time, opens in the browser.

import { toasts } from "#codebase/tcmts/share";
import { announceRelease } from "#codebase/tcmts/studio";
import { useState } from "react";
import { Button, Dialog, DialogTrigger, Heading, Input, Label, Popover, TextField } from "react-aria-components";

export function AnnounceButton({ name, version }: { name: string; version: string }) {
  const [busy, setBusy] = useState(false);
  const [as, setAs] = useState("");
  const [source, setSource] = useState("");
  return (
    <DialogTrigger>
      <Button className="btn small" isPending={busy}>
        {busy ? "Announcing…" : "Announce"}
      </Button>
      <Popover className="menu-pop getit" placement="bottom end" offset={6}>
        <Dialog className="getit-body" aria-label={`Announce ${name} ${version}`}>
          {({ close }) => (
            <form
              className="prodform"
              onSubmit={async (e) => {
                e.preventDefault();
                close();
                setBusy(true);
                try {
                  toasts.add(
                    { title: await announceRelease(name, version, as, source), tone: "ok" },
                    { timeout: 8000 },
                  );
                } catch (err) {
                  toasts.add(
                    {
                      title: `Couldn't announce ${name} ${version}`,
                      description: (err as Error).message,
                      tone: "bad",
                    },
                    { timeout: 12000 },
                  );
                }
                setBusy(false);
              }}
            >
              <Heading slot="title" className="getit-title">
                Announce {name} {version}
              </Heading>
              <p>
                A record in your AT Protocol repository says it's yours, and where it's fetched
                from: registries list it, and anyone can add it.
              </p>
              <TextField className="fieldrow" value={as} onChange={setAs}>
                <Label>As</Label>
                <Input
                  className="field mono"
                  placeholder="the account used last (alice.dev, say)"
                />
              </TextField>
              <TextField className="fieldrow" value={source} onChange={setSource}>
                <Label>Fetched from</Label>
                <Input className="field mono" placeholder="what's kept, or origin (https://…)" />
              </TextField>
              <div className="actions">
                <Button className="btn" onPress={close}>
                  Not yet
                </Button>
                <Button className="btn primary" type="submit">
                  Announce
                </Button>
              </div>
            </form>
          )}
        </Dialog>
      </Popover>
    </DialogTrigger>
  );
}

uses

used by