Source

// The landing page's board maker: name it, and the board, its admin key and you as its owner are
// written in one batch. The browser keeps the key, so it can show "Your boards" and the admin link.
import { useState } from "react";
import { setMany, serverTimestamp } from "@bounded-sh/client";
import { me, explain } from "./lib/bounded";
import { rememberBoard } from "./lib/mine";
import { navigate } from "./lib/router";
import { DEFAULT_TAGS, LIMITS, randomId } from "../functions/lib/feedback";

export function CreateBoard() {
  const [name, setName] = useState("");
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const create = async (e: React.FormEvent) => {
    e.preventDefault();
    const n = name.trim();
    if (!n) { setError("Name your board, like \"Acme feedback\"."); return; }
    setBusy(true);
    setError(null);
    try {
      const { id: uid } = await me();
      const boardId = randomId(20);
      const key = randomId(24);
      const tags = DEFAULT_TAGS.map((t) => ({ id: randomId(6), name: t }));
      await setMany([
        { path: `boards/${boardId}`, document: { name: n, intro: "", tags: JSON.stringify(tags), createdBy: uid, createdAt: serverTimestamp() } },
        { path: `boards/${boardId}/joins/${uid}`, document: { at: serverTimestamp() } },
        { path: `boards/${boardId}/owners/${uid}`, document: { at: serverTimestamp() } },
        { path: `boardkeys/${boardId}`, document: { key } },
      ]);
      rememberBoard({ id: boardId, title: n, key });
      localStorage.setItem(`feedback:new:${boardId}`, "1");
      navigate(`/b/${boardId}`);
    } catch (err) {
      setError(explain(err));
      setBusy(false);
    }
  };

  return (
    <form className="card create" onSubmit={create}>
      <label className="field">
        <span>Name your board</span>
        <input className="input input-lg" value={name} maxLength={LIMITS.boardName} placeholder="Acme feedback" onChange={(e) => { setName(e.target.value); setError(null); }} />
      </label>
      {error && <p className="notice notice-error" role="alert">{error}</p>}
      <button className="btn btn-lg btn-block" type="submit" disabled={busy}>{busy ? "Creating..." : "Create a free board"}</button>
      <p className="hint">No sign-up. You get a link to share and a private admin link.</p>
    </form>
  );
}