components/mentions-list/mentions-list.react.tsx

Functions

Imports

It imports components/content/content.react.tsx, components/content/content.ts, components/empty/empty.react.tsx, components/mentions-list/mentions-list.ts, components/moderation-queue/moderation-queue.ts, components/row-list/row-list.ts, components/status/status.react.tsx, components/tabs/tabs.react.tsx, components/time/time.react.tsx. Imported by components/mentions-list/examples.tsx.

Source

1import { useEffect, useId, useMemo, useRef, useState, type MouseEvent } from "react";
2import type { IntentResult, MentionsData, SubmitIntent } from "../content/content.ts";
3import { ContentBulkBar, PlainForm, useIntents, type FormComponent } from "../content/content.react.tsx";
4import { Empty } from "../empty/empty.react.tsx";
5import { ACTION_KEY, ACTION_LABEL, DELETE_KEY, STATE_LABEL, VIEWS, VIEW_LABEL, actionsFor, isTypingKey, statusOf, summaryText, type Mention, type ModState } from "../moderation-queue/moderation-queue.ts";
6import { listOwnsKeys, moveRowFocus, singleKeysOff } from "../row-list/row-list.ts";
7import { Pill } from "../status/status.react.tsx";
8import { TabLink, TabsNav } from "../tabs/tabs.react.tsx";
9import { Time } from "../time/time.react.tsx";
10import { countLine, currentView, emptyWords, mentionActions, mentionsHref, sweepLabel, withMentions } from "./mentions-list.ts";
11
12export type { FormComponent, IntentResult, Mention, MentionsData, SubmitIntent };
13
14export interface MentionsListProps {
15  // The loader's view data: one page of one site's mentions.
16  data: MentionsData;
17  // Where the forms post, and the list's own address: usually the route itself.
18  action: string;
19  // The host router's form component. Without it a plain <form> is rendered.
20  Form?: FormComponent;
21  // The script path: posts a form and resolves with the action's result (a useFetcher wrapper).
22  // With it, a decision happens in place with Undo in the message, and the keys decide.
23  submit?: SubmitIntent;
24  // The last result from the action, for the page that comes back after a post with no script.
25  result?: IntentResult | null;
26  // A fixed "now" for the times, for a test or a server's clock.
27  now?: number;
28}
29
30function StatusWord({ state }: { state: ModState }) {
31  const s = statusOf(state);
32  return (
33    <span className="cap-status" data-tone={s.tone}>
34      <svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true" focusable="false" dangerouslySetInnerHTML={{ __html: s.glyph }} />
35      {s.word}
36    </span>
37  );
38}
39
40const nameOf = (m: Mention) => `${m.author} (${m.host})`;
41const initials = (name: string) =>
42  name
43    .split(/\s+/)
44    .map((w) => w[0] ?? "")
45    .slice(0, 2)
46    .join("")
47    .toUpperCase() || "?";
48
49// One page of one site's mentions, the moderation queue on the contract's states: tabs with the
50// site's counts, each row's decisions as forms, the bulk bar with each mention's outcome, Undo,
51// paging, delete and the retention sweep behind a confirm. Every action is a form post, so it all
52// works with no script; with script the keys decide (a, r, d, x, j, k) and `submit` keeps the
53// page where it is.
54export function MentionsList({ data, action, Form = PlainForm, submit, result = null, now }: MentionsListProps) {
55  const uid = useId().replace(/[^a-zA-Z0-9]/g, "");
56  const formId = `${uid}-bulk`;
57  const [mounted, setMounted] = useState(false);
58  useEffect(() => setMounted(true), []);
59
60  const { rows, query, page, offers, can, counts } = data;
61  const view = currentView(data);
62  const { bulk, withheld } = mentionActions(data);
63  const selectable = bulk.length > 0;
64  const names = useMemo(() => new Map(rows.map((m) => [m.id, nameOf(m)])), [rows]);
65  const href = (q: typeof query) => mentionsHref(action, q);
66
67  const [selected, setSelected] = useState<string[]>([]);
68  useEffect(() => setSelected((s) => s.filter((id) => names.has(id))), [names]);
69  // With script a row opens in place; without, its link opens it through the address.
70  const [opened, setOpened] = useState<string[]>(query.open ? [query.open] : []);
71  useEffect(() => setOpened(query.open ? [query.open] : []), [query.open]);
72
73  const rootRef = useRef<HTMLElement | null>(null);
74  // Where focus goes once a decided row leaves the page: the next row's title, or the empty state.
75  const focusNext = useRef<string | null>(null);
76  const intents = useIntents({ action, Form, submit, result, names, cancelHref: href(query), onDone: () => setSelected([]) });
77
78  useEffect(() => {
79    const want = focusNext.current;
80    const root = rootRef.current;
81    if (want === null || !root || root.contains(document.activeElement)) return;
82    focusNext.current = null;
83    const target = (want && root.querySelector<HTMLElement>(`.cap-mq-row[data-id='${CSS.escape(want)}'] .cap-row-title a`)) || root.querySelector<HTMLElement>(".cap-mq-row .cap-row-title a") || root.querySelector<HTMLElement>(".cap-empty");
84    target?.focus();
85  }, [rows]);
86
87  // The keys, with script: j and k move, a and r decide, d deletes (the kit asks first), x
88  // selects. A key acts on the whole selection when the focused row is part of it.
89  const keys = mounted && can.decideMentions;
90  const stateRef = useRef({ selected, rows, formId });
91  stateRef.current = { selected, rows, formId };
92  useEffect(() => {
93    if (!keys) return;
94    const onKey = (e: KeyboardEvent) => {
95      const root = rootRef.current;
96      const list = root?.querySelector<HTMLElement>(".cap-mq-list");
97      if (!root || !list || e.defaultPrevented || isTypingKey(e) || singleKeysOff() || e.repeat) return;
98      if (e.key === "j" || e.key === "k") {
99        if (!listOwnsKeys(list)) return;
100        if (moveRowFocus(list, e.key === "j" ? 1 : -1) || list.contains(document.activeElement)) e.preventDefault();
101        return;
102      }
103      if (e.key === "Escape") {
104        if (stateRef.current.selected.length && root.contains(document.activeElement) && !document.querySelector("dialog:modal")) {
105          e.preventDefault();
106          setSelected([]);
107        }
108        return;
109      }
110      const row = document.activeElement?.closest<HTMLElement>(".cap-mq-row");
111      if (!row || !list.contains(row) || document.querySelector("dialog:modal")) return;
112      const id = row.dataset.id ?? "";
113      const { selected: picked, rows: all, formId: bulkForm } = stateRef.current;
114      if (e.key === "x") {
115        e.preventDefault();
116        setSelected((s) => (s.includes(id) ? s.filter((x) => x !== id) : [...s, id]));
117        return;
118      }
119      const intent = e.key === DELETE_KEY ? "delete" : e.key === ACTION_KEY.approve ? "approve" : e.key === ACTION_KEY.reject ? "reject" : null;
120      if (!intent) return;
121      const many = picked.length > 1 && picked.includes(id);
122      const button = many ? root.querySelector<HTMLButtonElement>(`button[form='${bulkForm}'][value='${intent}']`) : row.querySelector<HTMLButtonElement>(`[data-cap-action='${intent}']`);
123      if (!button?.form) return;
124      e.preventDefault();
125      // The row (or rows) will leave this tab: focus goes to the next one still here.
126      const acted = many ? picked : [id];
127      const at = all.findIndex((m) => m.id === id);
128      const next = all.slice(at + 1).find((m) => !acted.includes(m.id)) ?? all.slice(0, at).reverse().find((m) => !acted.includes(m.id));
129      if (intent !== "delete") focusNext.current = next?.id ?? "";
130      button.form.requestSubmit(button);
131    };
132    document.addEventListener("keydown", onKey);
133    return () => document.removeEventListener("keydown", onKey);
134  }, [keys]);
135
136  if (intents.confirmPage) {
137    return (
138      <section className="cap-mq cap-mentions" data-cap="mentions-list" aria-label="Mentions">
139        {intents.confirmPage}
140      </section>
141    );
142  }
143
144  const selectedItems = rows.filter((m) => selected.includes(m.id)).map((m) => ({ id: m.id, label: nameOf(m) }));
145  const setOne = (id: string, on: boolean) => setSelected((s) => (on ? (s.includes(id) ? s : [...s, id]) : s.filter((x) => x !== id)));
146  const empty = rows.length === 0;
147  const words = emptyWords(view);
148  const sweep = sweepLabel(data.expiring);
149  const hint = (key: string | undefined) => (keys && key ? <kbd className="cap-kbd" aria-hidden="true">{key}</kbd> : null);
150  const toggle = (id: string) => (e: MouseEvent<HTMLAnchorElement>) => {
151    if (!mounted) return;
152    e.preventDefault();
153    setOpened((o) => (o.includes(id) ? o.filter((x) => x !== id) : [...o, id]));
154  };
155
156  return (
157    <section
158      className="cap-mq cap-mentions"
159      data-cap="mentions-list"
160      data-view={view}
161      aria-labelledby={`${uid}-h`}
162      ref={(el) => {
163        rootRef.current = el;
164        intents.rootRef.current = el;
165      }}
166      onSubmit={intents.onSubmit}
167    >
168      <h2 className="cap-sr-only" id={`${uid}-h`}>
169        Mentions on {data.site.name}
170      </h2>
171      <TabsNav aria-label="Mentions by state" className="cap-mentions-tabs">
172        {VIEWS.map((v) => (
173          <TabLink key={v} href={href(withMentions(query, { view: v }))} current={view === v} count={counts[v]}>
174            {VIEW_LABEL[v]}
175          </TabLink>
176        ))}
177      </TabsNav>
178
179      <div className="cap-mq-head">
180        <p className="cap-mq-summary" role="status">
181          {summaryText({ pending: counts.pending, unverified: 0 })}
182        </p>
183        {counts.unverified > 0 ? (
184          <Pill variant="secondary" href={view === "all" ? undefined : href(withMentions(query, { view: "all" }))}>
185            {counts.unverified} {STATE_LABEL.unverified.toLowerCase()}
186          </Pill>
187        ) : null}
188        {empty ? null : <p className="cap-mentions-count">{countLine(data)}</p>}
189      </div>
190
191      {withheld.length ? (
192        <ul className="cap-mentions-withheld">
193          {withheld.map((w) => (
194            <li key={w}>{w}</li>
195          ))}
196        </ul>
197      ) : null}
198
199      {intents.resultBox}
200
201      {selectable && !empty ? (
202        <ContentBulkBar formId={formId} action={action} Form={Form} formClass="cap-mentions-bulk-form" items={selectedItems} total={rows.length} onSelectAll={mounted ? () => setSelected(rows.map((m) => m.id)) : undefined} onClear={() => setSelected([])} plural="mentions" actions={bulk} tag={false} intents={intents} />
203      ) : null}
204
205      {empty ? (
206        <Empty kind={words.kind} title={words.title}>
207          {words.text}
208        </Empty>
209      ) : (
210        <ul className="cap-rows cap-mq-list" role="list" aria-labelledby={`${uid}-h`} data-cap-primary="">
211          {rows.map((m) => {
212            const p = `${uid}-${m.id}`;
213            const open = opened.includes(m.id);
214            const decisions = can.decideMentions ? actionsFor(m.state, offers.reset) : [];
215            const canDelete = can.decideMentions && offers.delete;
216            return (
217              <li key={m.id} className="cap-row cap-mq-row" data-id={m.id} data-state={m.state} data-selected={selected.includes(m.id) ? "" : undefined}>
218                {selectable ? (
219                  <span className="cap-mq-check">
220                    <label className="cap-check">
221                      <input type="checkbox" name="ids" value={m.id} form={formId} checked={selected.includes(m.id)} onChange={(e) => setOne(m.id, e.target.checked)} />
222                      <span className="cap-sr-only">Select the mention from {m.author}</span>
223                    </label>
224                  </span>
225                ) : null}
226                <span className="cap-row-status" id={`${p}-s`}>
227                  <StatusWord state={m.state} />
228                </span>
229                <div className="cap-row-title">
230                  <a href={href(withMentions(query, { open: open ? undefined : m.id }))} aria-expanded={open} aria-controls={open ? `${p}-more` : undefined} aria-describedby={`${p}-s ${p}-d`} onClick={toggle(m.id)}>
231                    <span className="cap-avatar" data-size="sm" aria-hidden="true">
232                      <span className="cap-avatar-fallback">{initials(m.author)}</span>
233                    </span>{" "}
234                    <span className="cap-mq-name">{m.author}</span> <span className="cap-mq-host">{m.host}</span>
235                  </a>
236                </div>
237                <p className="cap-row-detail" id={`${p}-d`}>
238                  {m.state === "failed" && m.failureReason ? m.failureReason : `On ${m.post}: “${m.excerpt}”`}
239                </p>
240                <span className="cap-row-meta">
241                  <Time at={m.at} now={now} />
242                  <span className="cap-row-chevron" aria-hidden="true" />
243                </span>
244                {decisions.length || canDelete ? (
245                  <Form method="post" action={action} className="cap-row-actions cap-mentions-act" aria-label={`Decide the mention from ${m.author}`}>
246                    <input type="hidden" name="ids" value={m.id} />
247                    {m.version ? <input type="hidden" name="version" value={m.version} /> : null}
248                    {decisions.map((a) => (
249                      <button key={a} type="submit" className="cap-btn" data-variant="quiet" data-size="sm" name="intent" value={a} data-cap-action={a} aria-keyshortcuts={keys ? ACTION_KEY[a] : undefined}>
250                        {ACTION_LABEL[a]}
251                        <span className="cap-sr-only"> the mention from {m.author}</span>
252                        {hint(ACTION_KEY[a])}
253                      </button>
254                    ))}
255                    {canDelete ? (
256                      <button type="submit" className="cap-btn" data-variant="danger" data-size="sm" name="intent" value="delete" data-cap-action="delete" aria-keyshortcuts={keys ? DELETE_KEY : undefined}>
257                        Delete
258                        <span className="cap-sr-only"> the mention from {m.author}</span>
259                        {hint(DELETE_KEY)}
260                      </button>
261                    ) : null}
262                  </Form>
263                ) : null}
264                {open ? (
265                  <div className="cap-mq-more" id={`${p}-more`}>
266                    <blockquote className="cap-mq-quote">{m.excerpt}</blockquote>
267                    <dl className="cap-mq-facts">
268                      <dt>From</dt>
269                      <dd>{m.author}</dd>
270                      <dt>Source</dt>
271                      <dd>
272                        {m.external && m.url ? (
273                          <>
274                            <a href={m.url} rel="nofollow ugc noopener" data-external="">
275                              {m.url}
276                            </a>{" "}
277                            (opens the sender's page)
278                          </>
279                        ) : (
280                          <span className="cap-mono">{m.url ?? m.host}</span>
281                        )}
282                      </dd>
283                      <dt>On</dt>
284                      <dd>{m.postHref ? <a href={m.postHref}>{m.post}</a> : m.post}</dd>
285                      <dt>Received</dt>
286                      <dd>
287                        <Time at={m.at} format="exact" now={now} />
288                      </dd>
289                      {m.decidedAt ? (
290                        <>
291                          <dt>Decided</dt>
292                          <dd>
293                            <Time at={m.decidedAt} format="exact" now={now} />
294                          </dd>
295                        </>
296                      ) : null}
297                    </dl>
298                    {m.state === "failed" ? (
299                      <p className="cap-mq-why">
300                        <b>Source not found.</b> {m.failureReason ? `${m.failureReason} ` : ""}Its excerpt is kept, so you can see what was sent; it cannot be approved or rejected.
301                      </p>
302                    ) : m.state === "unverified" ? (
303                      <p className="cap-mq-why">
304                        <b>Not yet checked.</b> The site has not read its source yet. It can be decided once it has.
305                      </p>
306                    ) : null}
307                  </div>
308                ) : null}
309              </li>
310            );
311          })}
312        </ul>
313      )}
314
315      {query.cursor || page.nextCursor ? (
316        <nav className="cap-mentions-pages" aria-label="Mentions pages">
317          {query.cursor ? (
318            <a className="cap-btn" href={href(withMentions(query, { view: query.view }))}>
319              First page
320            </a>
321          ) : null}
322          {page.nextCursor ? (
323            <a className="cap-btn" href={href({ view: query.view, cursor: page.nextCursor })}>
324              Next page
325            </a>
326          ) : null}
327        </nav>
328      ) : null}
329
330      {offers.sweep && can.decideMentions ? (
331        <Form method="post" action={action} className="cap-mq-retention" aria-label="Retention">
332          <p id={`${uid}-ret`}>{data.retention ?? "This site removes a mention whose source was not found, and a rejected one, once its retention has passed. Waiting and approved mentions are never removed."}</p>
333          <button type="submit" className="cap-btn" name="intent" value="sweep" aria-describedby={`${uid}-ret`} disabled={sweep.n === 0}>
334            {sweep.label}
335          </button>
336        </Form>
337      ) : null}
338
339      {intents.confirmDialog}
340    </section>
341  );
342}