app/components/admin/posts-table.tsx

Functions

Imports

It imports app/components/admin/bulk-tag-controls.tsx, app/components/admin/row-menu.tsx. Imported by app/routes/admin.posts._index.tsx.

Source

1import { Form, Link } from "react-router";
2import { Button } from "capsomer/react/button";
3import { Panel } from "capsomer/react/panel";
4import { Pill, Status } from "capsomer/react/status";
5
6import { BulkTagControls } from "~/components/admin/bulk-tag-controls";
7import { RowMenu } from "~/components/admin/row-menu";
8
9import type { Route } from "../../routes/+types/admin.posts._index";
10
11type Listing = Route.ComponentProps["loaderData"];
12
13/** A browser pairs a button with its form by string equality alone, so a mismatch submits the wrong form silently. */
14function rowFormId(intent: "duplicate" | "unpublish", slug: string) {
15  return `row-${intent}-${slug}`;
16}
17
18/** The bulk bar, the posts table, each row's own forms and the search notes under it. */
19export function PostsTable({
20  posts,
21  visible,
22  chosen,
23  allShown,
24  setSelected,
25  toggle,
26  hydrated,
27  pending,
28  filtered,
29  total,
30  tagOptions,
31  askOn,
32  ask,
33  askUnread,
34  budget,
35  budgetError,
36}: {
37  posts: Listing["posts"];
38  visible: string[];
39  chosen: string[];
40  allShown: boolean;
41  setSelected: (slugs: string[]) => void;
42  toggle: (slug: string) => void;
43  hydrated: boolean;
44  pending: boolean;
45  filtered: boolean;
46  total: number;
47  tagOptions: string[];
48  askOn: boolean;
49  ask: Listing["ask"];
50  askUnread: boolean;
51  budget: Listing["budget"];
52  budgetError: Listing["budgetError"];
53}) {
54  const meta =
55    filtered || askOn ? (
56      <p className="cap-muted">
57        {filtered ? `Showing ${posts.length} of ${total} posts. ` : null}
58        {ask ? `Search has read ${ask.present} of ${ask.expected} posts.` : null}
59        {askUnread ? "The search index status could not be read." : null}
60        {askOn ? " " : null}
61        {budget
62          ? `Budget ${budget.count} of ${budget.limit} answers used on ${budget.day} (UTC); cached answers do not count.`
63          : null}
64        {budgetError ? `The Ask budget could not be read: ${budgetError}` : null}
65      </p>
66    ) : undefined;
67
68  return (
69    <>
70      <Panel title="Posts" count={posts.length} flush footer={meta}>
71        {/* One Form around the bar and the table: a form cannot nest inside another. */}
72        <Form method="post">
73          {/* Always in the document: client state would leave a scriptless operator ticking boxes with no
74              control. Hidden only once script runs and nothing is selected. */}
75          <div
76            className="cap-bulk"
77            role="group"
78            aria-label="Actions for the selected posts"
79            hidden={hydrated && chosen.length === 0}
80          >
81            {/* Script-only: "0 selected" above two ticked boxes is worse than no number. */}
82            <p className="cap-bulk-count" aria-live="polite">
83              {hydrated ? `${chosen.length} selected` : "With the selected posts"}
84            </p>
85            <div className="cap-bulk-actions">
86              <BulkTagControls listId="posts-bulk-tags" options={tagOptions} />
87              <Button type="submit" name="intent" value="bulk-delete" variant="danger">
88                Delete
89              </Button>
90            </div>
91          </div>
92
93          {/* `tabindex` and the region role make the scroll box reachable by keyboard. */}
94          <div className="cap-table-wrap" tabIndex={0} role="region" aria-label="Posts table">
95            <table className="cap-table" aria-busy={pending || undefined}>
96              <thead>
97                <tr>
98                  <th scope="col">
99                    <label className="cap-check">
100                      <input
101                        type="checkbox"
102                        checked={allShown}
103                        onChange={() => setSelected(allShown ? [] : visible)}
104                      />
105                      <span className="cap-sr-only">
106                        {filtered ? `Select all ${visible.length} shown` : `Select all ${visible.length}`}
107                      </span>
108                    </label>
109                  </th>
110                  <th scope="col">Title</th>
111                  <th scope="col">Published</th>
112                  <th scope="col">Actions</th>
113                </tr>
114              </thead>
115              <tbody>
116                {posts.map((post) => (
117                  <tr key={post.slug} aria-selected={chosen.includes(post.slug) || undefined}>
118                    <td>
119                      <label className="cap-check">
120                        <input
121                          type="checkbox"
122                          name="slug"
123                          value={post.slug}
124                          checked={chosen.includes(post.slug)}
125                          onChange={() => toggle(post.slug)}
126                        />
127                        <span className="cap-sr-only">Select {post.title}</span>
128                      </label>
129                    </td>
130                    <th scope="row">
131                      <Link to={`/admin/posts/${post.slug}/edit`} className="cap-table-open">
132                        {post.title}
133                      </Link>
134                      {/* A word first; shape and colour separate the three again under forced-colors. */}
135                      <Status tone={STATE_TONE[post.state]}>{post.state}</Status>
136                      {post.featured ? <Pill variant="outline">Featured</Pill> : null}
137                      <span className="cap-table-aside">/{post.slug}</span>
138                    </th>
139                    <td>
140                      {post.publishAt ? new Date(post.publishAt).toISOString().slice(0, 10) : "not set"}
141                      {post.scheduledInDays !== null ? (
142                        <span className="cap-table-aside">
143                          in {post.scheduledInDays} day{post.scheduledInDays === 1 ? "" : "s"}
144                        </span>
145                      ) : null}
146                    </td>
147                    <td>
148                      {/* Associated by the `form` attribute: this cell is inside the bulk form and forms cannot nest. */}
149                      <RowMenu label={`Actions for ${post.title}`}>
150                        <Link
151                          to={`/admin/posts/${post.slug}/edit`}
152                          className="cap-option"
153                          data-menu-item
154                        >
155                          Edit
156                        </Link>
157                        {post.state === "published" ? (
158                          <a
159                            href={`/writing/${post.slug}`}
160                            target="_blank"
161                            rel="noreferrer"
162                            className="cap-option"
163                            data-menu-item
164                          >
165                            View on the site
166                            <span className="cap-sr-only">(opens in a new tab)</span>
167                          </a>
168                        ) : null}
169                        {post.state === "published" || post.state === "scheduled" ? (
170                          <button
171                            type="submit"
172                            form={rowFormId("unpublish", post.slug)}
173                            name="intent"
174                            value="unpublish"
175                            className="cap-option"
176                            data-menu-item
177                          >
178                            Unpublish
179                          </button>
180                        ) : null}
181                        <button
182                          type="submit"
183                          form={rowFormId("duplicate", post.slug)}
184                          name="intent"
185                          value="duplicate"
186                          className="cap-option"
187                          data-menu-item
188                        >
189                          Duplicate
190                        </button>
191                      </RowMenu>
192                    </td>
193                  </tr>
194                ))}
195              </tbody>
196            </table>
197          </div>
198        </Form>
199      </Panel>
200
201      {/* Outside the bulk form: forms cannot nest. The slug is a field, not the button's value, or the intents would grow per post. */}
202      {posts.map((post) => (
203        <Form key={`duplicate-${post.slug}`} id={rowFormId("duplicate", post.slug)} method="post">
204          <input type="hidden" name="slug" value={post.slug} />
205        </Form>
206      ))}
207      {posts
208        .filter((post) => post.state === "published" || post.state === "scheduled")
209        .map((post) => (
210          <Form key={`unpublish-${post.slug}`} id={rowFormId("unpublish", post.slug)} method="post">
211            <input type="hidden" name="slug" value={post.slug} />
212          </Form>
213        ))}
214    </>
215  );
216}
217
218const STATE_TONE = { published: "ok", draft: "nodata", scheduled: "info" } as const;