components/content/content.react.tsx

Functions

Imports

It imports components/bulk-bar/bulk-bar.react.tsx, components/bulk-bar/bulk-bar.ts, components/confirm-dialog/confirm-dialog.react.tsx, components/content/content.ts, components/message/message.react.tsx, components/message/message.ts. Imported by components/media-library/examples.tsx, components/media-library/media-library.react.tsx, components/mentions-list/mentions-list.react.tsx, components/posts-list/posts-list.react.tsx.

Source

1import { useEffect, useRef, useState, type ComponentType, type FormEvent, type FormHTMLAttributes, type ReactNode } from "react";
2import { BulkBar } from "../bulk-bar/bulk-bar.react.tsx";
3import type { BulkItem, BulkOutcome } from "../bulk-bar/bulk-bar.ts";
4import { ConfirmDialog, ConfirmPage } from "../confirm-dialog/confirm-dialog.react.tsx";
5import { useOptionalMessage } from "../message/message.react.tsx";
6import { GLYPHS, isUndoKey } from "../message/message.ts";
7import { intentForm, outcomesOf, type ConfirmRequest, type IntentResult, type SubmitIntent } from "./content.ts";
8
9// The loop every shared content component runs (posts, media, mentions): a post from inside the
10// list goes through the host's `submit` when there is one, or the browser's own form post when
11// there is not; the result is said in the message region (or the list's own box), Undo posts the
12// inverse the kit named, each item's outcome goes to the bulk bar, and a one-way intent the kit
13// answers with `confirm` is the confirm dialog with script and the confirm page without.
14
15// The host router's form (React Router's <Form>), so a filter or a post stays in the app. Given
16// the props a plain <form> takes.
17export type FormComponent = ComponentType<FormHTMLAttributes<HTMLFormElement> & { method?: "get" | "post" }>;
18
19export const PlainForm: FormComponent = (props) => <form {...props} />;
20
21// The result of the last action, in the page: the sentence, and Undo as a form that posts the
22// inverse, so it works with no script. With script the list's submit handler catches that post.
23export function ResultBox({ result, action, Form, keyHint }: { result: IntentResult | null; action: string; Form: FormComponent; keyHint: boolean }) {
24  const kind = result ? (result.ok ? "ok" : "failure") : null;
25  return (
26    <div className="cap-message cap-content-result" role="status" aria-label="Results and failures" aria-atomic="false">
27      {result && kind ? (
28        <div className="cap-message-item" data-cap-part="item" data-kind={kind} data-lasting={result.ok ? undefined : ""}>
29          <svg className="cap-message-glyph" viewBox="0 0 16 16" aria-hidden="true" focusable="false" dangerouslySetInnerHTML={{ __html: GLYPHS[kind] }} />
30          <p className="cap-message-text" data-cap-part="text">
31            <span data-cap-part="said" role={result.ok ? undefined : "alert"}>
32              {result.message}
33            </span>
34          </p>
35          {result.undo ? (
36            <Form method="post" action={action} className="cap-content-undo">
37              {Object.entries(result.undo.fields).flatMap(([k, v]) => (k === "intent" ? [] : (typeof v === "string" ? [v] : v).map((one, i) => <input key={`${k}-${i}`} type="hidden" name={k} value={one} />)))}
38              <button type="submit" className="cap-link-btn cap-message-undo" data-cap-part="undo" name="intent" value={result.undo.intent}>
39                <span>Undo</span>
40                {keyHint ? (
41                  <>
42                    {" "}
43                    <kbd aria-hidden="true">z</kbd>
44                  </>
45                ) : null}
46              </button>
47            </Form>
48          ) : null}
49        </div>
50      ) : null}
51    </div>
52  );
53}
54
55export interface IntentsOptions {
56  action: string;
57  Form: FormComponent;
58  submit?: SubmitIntent;
59  // The result that came with the page (a post with no script).
60  result?: IntentResult | null;
61  // What each item is called, for the outcome list: read when the form is posted, so a deleted
62  // item keeps its name.
63  names: ReadonlyMap<string, string>;
64  // Where Cancel on the confirm page goes: the list as it was.
65  cancelHref: string;
66  // After a script result that did something: the list empties its selection.
67  onDone?: () => void;
68}
69
70export interface Intents {
71  // Put on the list's root element: catches every post from inside it.
72  onSubmit: (e: FormEvent<HTMLElement>) => void;
73  rootRef: { current: HTMLElement | null };
74  outcomes: BulkOutcome[];
75  dismissOutcomes: () => void;
76  // The list's own result box, where it has one (no message region, or a result from the page).
77  resultBox: ReactNode;
78  // Non-null while the page's result asks first: render it in place of the list.
79  confirmPage: ReactNode;
80  // The confirm dialog of the script path, while it is open.
81  confirmDialog: ReactNode;
82}
83
84export function useIntents({ action, Form, submit, result = null, names, cancelHref, onDone }: IntentsOptions): Intents {
85  const message = useOptionalMessage();
86  const [mounted, setMounted] = useState(false);
87  useEffect(() => setMounted(true), []);
88  const namesRef = useRef(names);
89  namesRef.current = names;
90  const [outcomes, setOutcomes] = useState<BulkOutcome[]>(() => (result ? outcomesOf(result, names) : []));
91  // The last result the script path got. It replaces `result` (which came with the page) until
92  // the page brings a new one.
93  const [settled, setSettled] = useState<IntentResult | null>(null);
94  useEffect(() => {
95    setSettled(null);
96    setOutcomes(result ? outcomesOf(result, namesRef.current) : []);
97  }, [result]);
98  const [asking, setAsking] = useState<ConfirmRequest | null>(null);
99  const rootRef = useRef<HTMLElement | null>(null);
100  // What the list's own result box says: the page's result, or with no message region on the
101  // page, the script path's too.
102  const box = settled ? (message ? null : settled) : result;
103
104  const announce = (r: IntentResult) => {
105    setSettled(r);
106    if (!message) return;
107    const inverse = r.undo;
108    // A result with nothing to undo that failed is a failure; one that did part of its work
109    // still offers Undo for that part, and the bar lists what was refused.
110    if (!r.ok && !inverse) return message.fail(r.message);
111    message.say(r.message, {
112      undo:
113        inverse && submit
114          ? async () => {
115              const u = await submit(intentForm(inverse.intent, inverse.fields));
116              if (!u.ok) throw new Error(u.message);
117              // The Undo's own result replaces the message it came from.
118              message.say(u.message);
119            }
120          : undefined,
121    });
122  };
123
124  const handle = (r: IntentResult, labelsAtPost: ReadonlyMap<string, string>) => {
125    if (r.confirm) return setAsking(r.confirm);
126    const list = outcomesOf(r, labelsAtPost);
127    setOutcomes(list.length > 1 || list.some((o) => !o.ok) ? list : []);
128    if (r.ok || list.some((o) => o.ok)) onDone?.();
129    announce(r);
130  };
131
132  const run = async (form: FormData) => {
133    if (!submit) return;
134    const at = new Map(namesRef.current);
135    let r: IntentResult;
136    try {
137      r = await submit(form);
138    } catch (err) {
139      const why = err instanceof Error && err.message ? err.message : "the site did not answer";
140      return announce({ ok: false, message: `Not done: ${why}. Nothing was changed.` });
141    }
142    handle(r, at);
143  };
144
145  // With script, every post from inside the list goes through `submit` instead of a page load:
146  // the bulk bar, a row menu, Undo, a host action, an upload. A GET (the filters) navigates as
147  // before.
148  const onSubmit = (e: FormEvent<HTMLElement>) => {
149    if (!submit || !(e.target instanceof HTMLFormElement) || e.target.method.toLowerCase() !== "post") return;
150    e.preventDefault();
151    const form = e.target;
152    const submitter = (e.nativeEvent as SubmitEvent).submitter;
153    const data = new FormData(form, submitter instanceof HTMLButtonElement ? submitter : null);
154    form.closest("details")?.removeAttribute("open");
155    void run(data);
156  };
157
158  // z runs Undo when the list's script path says its own results (the message region does it
159  // otherwise).
160  const keyHint = !!submit && !message && mounted && !!box?.undo;
161  useEffect(() => {
162    if (!keyHint) return;
163    const onKey = (e: globalThis.KeyboardEvent) => {
164      if (e.defaultPrevented || !isUndoKey(e)) return;
165      const button = rootRef.current?.querySelector<HTMLButtonElement>(".cap-content-undo [data-cap-part='undo']");
166      if (!button) return;
167      e.preventDefault();
168      button.form?.requestSubmit(button);
169    };
170    document.addEventListener("keydown", onKey);
171    return () => document.removeEventListener("keydown", onKey);
172  }, [keyHint]);
173
174  // The action asked first, so the page is its confirmation: with no script this is how a one-way
175  // intent is confirmed. With script the same form posts through `submit`.
176  const pageAsks = !settled && result?.confirm ? result.confirm : null;
177  const confirmPage = pageAsks ? (
178    <ConfirmPage action={action} hidden={{ intent: pageAsks.intent, ...pageAsks.fields }} title={pageAsks.title} lead={pageAsks.lead} body={pageAsks.items} action_label={pageAsks.action} cancelHref={cancelHref} typeToConfirm={pageAsks.typeToConfirm} headingLevel="h2" />
179  ) : null;
180
181  const confirmDialog = asking ? (
182    <ConfirmDialog
183      open
184      title={asking.title}
185      lead={asking.lead}
186      body={asking.items}
187      action={asking.action}
188      typeToConfirm={asking.typeToConfirm}
189      perform={async () => {
190        if (!submit) return;
191        const at = new Map(namesRef.current);
192        const fields = asking.typeToConfirm ? { ...asking.fields, confirm: asking.typeToConfirm } : asking.fields;
193        const r = await submit(intentForm(asking.intent, fields));
194        // Nothing done at all stays in the dialog with the reason and Try again.
195        if (!r.ok && !(r.outcomes ?? []).some((o) => o.ok)) throw new Error(r.message);
196        handle({ ...r, confirm: undefined }, at);
197      }}
198      onClose={() => setAsking(null)}
199    />
200  ) : null;
201
202  return {
203    onSubmit,
204    rootRef,
205    outcomes,
206    dismissOutcomes: () => setOutcomes([]),
207    resultBox: !message || box ? <ResultBox result={box} action={action} Form={Form} keyHint={keyHint} /> : null,
208    confirmPage,
209    confirmDialog,
210  };
211}
212
213export interface ContentBulkBarProps {
214  // The id of the empty bulk form the list's boxes name with `form`, and where it posts.
215  formId: string;
216  action: string;
217  Form: FormComponent;
218  // The bulk form's class, for the list's own layout.
219  formClass: string;
220  items: readonly BulkItem[];
221  // Everything on the page that can be ticked, for "Select all N in view".
222  total: number;
223  onSelectAll?: () => void;
224  onClear: () => void;
225  // What the list holds ("posts", "files"): the bar's name and its words before script runs.
226  plural: string;
227  actions: ReadonlyArray<{ intent: string; label: string; destructive?: boolean }>;
228  // A Tag field beside the actions, posted as `tag` with them.
229  tag: boolean;
230  intents: Pick<Intents, "outcomes" | "dismissOutcomes">;
231}
232
233// The content components' bulk bar: an empty form the boxes post through, and the bar in form mode
234// with its actions as submit buttons, the optional Tag field, and each item's outcome.
235export function ContentBulkBar({ formId, action, Form, formClass, items, total, onSelectAll, onClear, plural, actions, tag, intents }: ContentBulkBarProps) {
236  return (
237    <>
238      <Form id={formId} method="post" action={action} className={formClass} />
239      <BulkBar
240        form={formId}
241        position="top"
242        items={items}
243        total={total}
244        onSelectAll={onSelectAll}
245        onClear={onClear}
246        label={`Bulk actions on ${plural}`}
247        prompt={`Tick the ${plural} to act on`}
248        actions={actions.map((a) => ({ id: a.intent, label: a.label, destructive: a.destructive, submit: true }))}
249        outcomes={intents.outcomes}
250        onDismissOutcomes={intents.dismissOutcomes}
251      >
252        {tag ? (
253          <span className="cap-bulk-field">
254            <label htmlFor={`${formId}-tag`}>Tag</label>
255            <input className="cap-input" id={`${formId}-tag`} name="tag" form={formId} autoComplete="off" />
256          </span>
257        ) : null}
258      </BulkBar>
259    </>
260  );
261}