components/posts-list/posts-list.react.tsx

Functions

Imports

It imports components/content/content.react.tsx, components/content/content.ts, components/empty/empty.react.tsx, components/menu/menu.react.tsx, components/posts-list/posts-list.ts, components/status/status.react.tsx, components/tabs/tabs.react.tsx, components/time/time.react.tsx. Imported by components/posts-list/examples.tsx.

Source

1import { useEffect, useId, useMemo, useRef, useState, type KeyboardEvent } from "react";
2import type { ContentLabels, IntentResult, PostRow, PostsData, SubmitIntent } from "../content/content.ts";
3import { ContentBulkBar, PlainForm, useIntents, type FormComponent } from "../content/content.react.tsx";
4import { Empty } from "../empty/empty.react.tsx";
5import { FormMenu } from "../menu/menu.react.tsx";
6import { Pill, Status } from "../status/status.react.tsx";
7import { TabLink, TabsNav } from "../tabs/tabs.react.tsx";
8import { Time } from "../time/time.react.tsx";
9import { SORTS, STATUS_TABS, contentStatus, countLine, emptyWords, nounsOf, postActions, postsHref, rowActions, withFilter } from "./posts-list.ts";
10
11export { contentStatus };
12export type { ContentLabels, IntentResult, PostRow, PostsData, SubmitIntent };
13
14export type { FormComponent };
15
16export interface PostsListProps {
17  // The loader's view data: one page of one site.
18  data: PostsData;
19  // Where the forms post, and the list's own address: usually the route itself.
20  action: string;
21  // The host router's form component. Without it a plain <form> is rendered.
22  Form?: FormComponent;
23  // The script path: posts a form and resolves with the action's result (a useFetcher wrapper).
24  // With it, outcomes, Undo and the confirm dialog happen in place; without it every form posts
25  // and the page comes back with `result`.
26  submit?: SubmitIntent;
27  // The last result from the action, for the page that comes back after a post with no script.
28  result?: IntentResult | null;
29  labels?: ContentLabels;
30  // A fixed "now" for the times and "in 3 days", for a test or a server's clock.
31  now?: number;
32}
33
34function HeadCheck({ checked, mixed, label, onChange }: { checked: boolean; mixed: boolean; label: string; onChange: (on: boolean) => void }) {
35  const ref = useRef<HTMLInputElement>(null);
36  useEffect(() => {
37    if (ref.current) ref.current.indeterminate = mixed;
38  }, [mixed]);
39  return (
40    <label className="cap-check">
41      <input type="checkbox" ref={ref} checked={checked} onChange={(e) => onChange(e.target.checked)} />
42      <span className="cap-sr-only">{label}</span>
43    </label>
44  );
45}
46
47// One page of one site's posts: status tabs with counts, search and filters, the table with its
48// row menus, the bulk bar with each item's outcome, Undo, and the confirmation for what cannot be
49// undone. Every action is a form post, so it all works with no script; `submit` adds the in-place
50// path. The site and the person decide what is offered (data.offers, data.can).
51export function PostsList({ data, action, Form = PlainForm, submit, result = null, labels, now }: PostsListProps) {
52  const uid = useId().replace(/[^a-zA-Z0-9]/g, "");
53  const formId = `${uid}-bulk`;
54  const { noun, plural } = nounsOf(labels);
55  const title = plural.charAt(0).toUpperCase() + plural.slice(1);
56  const [mounted, setMounted] = useState(false);
57  useEffect(() => setMounted(true), []);
58  const clock = now ?? Date.now();
59
60  const { rows, query, page, offers, can } = data;
61  const { bulk, withheld } = postActions(data, labels);
62  const selectable = bulk.length > 0;
63  const names = useMemo(() => new Map(rows.map((r) => [r.id, r.title || "Untitled"])), [rows]);
64  const tags = useMemo(() => Array.from(new Set(rows.flatMap((r) => r.tags ?? []))).sort(), [rows]);
65  const withMenus = rows.some((r) => rowActions(r, data).length > 0);
66
67  const [selected, setSelected] = useState<string[]>([]);
68  // A new page or filter keeps only what is still in view.
69  useEffect(() => setSelected((s) => s.filter((id) => names.has(id))), [names]);
70  const href = (q: typeof query) => postsHref(action, q);
71  const intents = useIntents({ action, Form, submit, result, names, cancelHref: href(query), onDone: () => setSelected([]) });
72  if (intents.confirmPage) {
73    return (
74      <section className="cap-posts" data-cap="posts-list" aria-label={title}>
75        {intents.confirmPage}
76      </section>
77    );
78  }
79
80  const selectedItems = rows.filter((r) => selected.includes(r.id)).map((r) => ({ id: r.id, label: r.title || "Untitled" }));
81  const setOne = (id: string, on: boolean) => setSelected((s) => (on ? (s.includes(id) ? s : [...s, id]) : s.filter((x) => x !== id)));
82  const setAll = (on: boolean) => setSelected(on ? rows.map((r) => r.id) : []);
83  const onTableKey = (e: KeyboardEvent<HTMLElement>) => {
84    if (e.key === "Escape" && selected.length > 0 && !e.defaultPrevented) {
85      e.preventDefault();
86      setSelected([]);
87    }
88  };
89  const empty = rows.length === 0;
90  const words = emptyWords(query, labels);
91  const count = (s: string | undefined) => data.counts?.[(s ?? "all") as keyof NonNullable<PostsData["counts"]>];
92  const extraColumns = data.extra?.columns ?? [];
93
94  return (
95    <section className="cap-posts" data-cap="posts-list" aria-label={title} ref={(el) => void (intents.rootRef.current = el)} onSubmit={intents.onSubmit}>
96      <TabsNav aria-label={`${title} by status`} className="cap-posts-tabs">
97        {STATUS_TABS.map((t) => (
98          <TabLink key={t.label} href={href(withFilter(query, { status: t.status }))} current={query.status === t.status} count={count(t.status)}>
99            {t.label}
100          </TabLink>
101        ))}
102      </TabsNav>
103
104      <Form method="get" action={action.split("?")[0]} className="cap-posts-filters" role="search" aria-label={`Find ${plural}`}>
105        {query.status ? <input type="hidden" name="status" value={query.status} /> : null}
106        <div className="cap-field cap-posts-search">
107          <label className="cap-field-label" htmlFor={`${uid}-q`}>
108            Search
109          </label>
110          <input className="cap-input" type="search" id={`${uid}-q`} name="q" defaultValue={query.q ?? ""} />
111        </div>
112        {data.kinds.length > 1 ? (
113          <div className="cap-field">
114            <label className="cap-field-label" htmlFor={`${uid}-kind`}>
115              Kind
116            </label>
117            <div className="cap-select-wrap" data-native="">
118              <select className="cap-select" id={`${uid}-kind`} name="kind" defaultValue={query.kind ?? ""}>
119                <option value="">Any kind</option>
120                {data.kinds.map((k) => (
121                  <option key={k} value={k}>
122                    {k}
123                  </option>
124                ))}
125              </select>
126            </div>
127          </div>
128        ) : null}
129        {tags.length > 0 || query.tag ? (
130          <div className="cap-field">
131            <label className="cap-field-label" htmlFor={`${uid}-tag`}>
132              Tag
133            </label>
134            <div className="cap-select-wrap" data-native="">
135              <select className="cap-select" id={`${uid}-tag`} name="tag" defaultValue={query.tag ?? ""}>
136                <option value="">Any tag</option>
137                {Array.from(new Set([...tags, ...(query.tag ? [query.tag] : [])])).map((t) => (
138                  <option key={t} value={t}>
139                    {t}
140                  </option>
141                ))}
142              </select>
143            </div>
144          </div>
145        ) : null}
146        <div className="cap-field">
147          <label className="cap-field-label" htmlFor={`${uid}-sort`}>
148            Sort by
149          </label>
150          <div className="cap-select-wrap" data-native="">
151            <select className="cap-select" id={`${uid}-sort`} name="sort" defaultValue={query.sort ?? "updated"}>
152              {SORTS.map((s) => (
153                <option key={s.value} value={s.value}>
154                  {s.label}
155                </option>
156              ))}
157            </select>
158          </div>
159        </div>
160        <button type="submit" className="cap-btn">
161          Show
162        </button>
163      </Form>
164
165      <div className="cap-posts-bar">
166        {empty ? <span /> : <p className="cap-posts-count">{countLine(data, labels)}</p>}
167        <div className="cap-posts-tools">
168          {data.extra?.toolbar?.length ? (
169            <Form method="post" action={action} className="cap-posts-extra">
170              {data.extra.toolbar.map((a) => (
171                <button key={a.intent} type="submit" className="cap-btn" name="intent" value={a.intent}>
172                  {a.label}
173                </button>
174              ))}
175            </Form>
176          ) : null}
177          {can.edit && data.newHref ? (
178            <a className="cap-btn" data-variant="primary" href={data.newHref}>
179              New {noun}
180            </a>
181          ) : null}
182        </div>
183      </div>
184
185      {withheld.length ? (
186        <ul className="cap-posts-withheld">
187          {withheld.map((w) => (
188            <li key={w}>{w}</li>
189          ))}
190        </ul>
191      ) : null}
192
193      {intents.resultBox}
194
195      {selectable ? (
196        <ContentBulkBar formId={formId} action={action} Form={Form} formClass="cap-posts-bulk-form" items={selectedItems} total={rows.length} onSelectAll={mounted ? () => setAll(true) : undefined} onClear={() => setSelected([])} plural={plural} actions={bulk} tag={offers.tags && can.edit} intents={intents} />
197      ) : null}
198
199      {empty ? (
200        <Empty
201          kind={words.kind}
202          title={words.title}
203          action={
204            words.kind === "no-match" ? (
205              <a className="cap-btn" href={href(withFilter(query, { q: undefined, kind: undefined, tag: undefined }))}>
206                Clear filters
207              </a>
208            ) : !query.status && can.edit && data.newHref ? (
209              <a className="cap-btn" data-variant="primary" href={data.newHref}>
210                New {noun}
211              </a>
212            ) : undefined
213          }
214        >
215          {words.text}
216        </Empty>
217      ) : (
218        <div className="cap-table-wrap cap-posts-wrap" role="region" aria-labelledby={`${uid}-cap`} tabIndex={0} onKeyDown={onTableKey}>
219          <table className="cap-table cap-posts-table">
220            <caption id={`${uid}-cap`} className="cap-sr-only">
221              {title} on {data.site.name}
222            </caption>
223            <thead>
224              <tr>
225                {selectable ? (
226                  <th scope="col" className="cap-posts-check">
227                    {mounted ? <HeadCheck checked={selected.length > 0 && selected.length === rows.length} mixed={selected.length > 0 && selected.length < rows.length} label={`Select all ${rows.length} ${rows.length === 1 ? noun : plural}`} onChange={setAll} /> : <span className="cap-sr-only">Select</span>}
228                  </th>
229                ) : null}
230                <th scope="col">Title</th>
231                <th scope="col">Status</th>
232                <th scope="col">Updated</th>
233                {extraColumns.map((c) => (
234                  <th key={c.id} scope="col">
235                    {c.label}
236                  </th>
237                ))}
238                {withMenus ? (
239                  <th scope="col">
240                    <span className="cap-sr-only">Actions</span>
241                  </th>
242                ) : null}
243              </tr>
244            </thead>
245            <tbody>
246              {rows.map((row) => {
247                const st = contentStatus(row.status, row.publishAt, clock);
248                const name = row.title || "Untitled";
249                const items = rowActions(row, data);
250                return (
251                  <tr key={row.id} data-status={row.status} data-selected={selected.includes(row.id) ? "" : undefined}>
252                    {selectable ? (
253                      <td className="cap-posts-check">
254                        <label className="cap-check">
255                          <input type="checkbox" name="ids" value={row.id} form={formId} checked={selected.includes(row.id)} onChange={(e) => setOne(row.id, e.target.checked)} />
256                          <span className="cap-sr-only">Select {name}</span>
257                        </label>
258                      </td>
259                    ) : null}
260                    <th scope="row" className="cap-posts-title">
261                      <a className="cap-table-open" href={row.href}>
262                        {name}
263                      </a>
264                      <span className="cap-posts-meta">
265                        <span className="cap-posts-path">{row.path ?? "Not on the site yet"}</span>
266                        {data.kinds.length > 1 ? <span className="cap-posts-kind">{row.kind}</span> : null}
267                      </span>
268                      {row.notes?.length ? (
269                        <span className="cap-posts-notes">
270                          {row.notes.map((n) =>
271                            n.tone ? (
272                              <Pill key={n.text} tone={n.tone}>
273                                {n.text}
274                              </Pill>
275                            ) : (
276                              <Pill key={n.text} variant="secondary">
277                                {n.text}
278                              </Pill>
279                            ),
280                          )}
281                        </span>
282                      ) : null}
283                    </th>
284                    <td className="cap-posts-status">
285                      <Status tone={st.tone}>{st.word}</Status>
286                      {st.when ? (
287                        <>
288                          {" "}
289                          <span className="cap-posts-when">{st.when}</span>
290                        </>
291                      ) : null}
292                    </td>
293                    <td className="cap-posts-updated">{row.updatedAt ? <Time at={row.updatedAt} now={now} /> : <span className="cap-posts-none">No date</span>}</td>
294                    {extraColumns.map((c) => (
295                      <td key={c.id}>{c.cells[row.id] ?? ""}</td>
296                    ))}
297                    {withMenus ? (
298                      <td className="cap-posts-actions">
299                        {items.length ? <FormMenu label="Actions" aria-label={`Actions for ${name}`} action={action} hidden={{ ids: row.id }} items={items} /> : null}
300                      </td>
301                    ) : null}
302                  </tr>
303                );
304              })}
305            </tbody>
306          </table>
307        </div>
308      )}
309
310      {query.cursor || page.nextCursor ? (
311        <nav className="cap-posts-pages" aria-label={`${title} pages`}>
312          {query.cursor ? (
313            <a className="cap-btn" href={href(withFilter(query, {}))}>
314              First page
315            </a>
316          ) : null}
317          {page.nextCursor ? (
318            <a className="cap-btn" href={href({ ...query, cursor: page.nextCursor })}>
319              Next page
320            </a>
321          ) : null}
322        </nav>
323      ) : null}
324
325      {intents.confirmDialog}
326    </section>
327  );
328}