app/components/media/results.tsx

Functions

Imports

It imports app/components/media/format.ts. Imported by app/routes/media.tsx.

Source

1// The result panels of the media library (routes/media.tsx): one line per file after a bulk action,
2// and what emptying the trash deleted and kept.
3
4import { Alert } from "capsomer/react/banner";
5import { Button } from "capsomer/react/button";
6import { Panel } from "capsomer/react/panel";
7import { Status } from "capsomer/react/status";
8import type { Ref } from "react";
9
10import type { MediaUse } from "./format";
11
12export type FileOutcome = { id: string; ok: boolean; message: string; usedBy?: MediaUse[] };
13
14export function BulkResultPanel({ bulkResult, resultRef, onClear }: { bulkResult: { what: string; outcomes: FileOutcome[] }; resultRef: Ref<HTMLElement>; onClear: () => void }) {
15  return (
16      <Panel
17        title="Result"
18        id="media-result"
19        ref={resultRef}
20        src={`${bulkResult.what}: ${bulkResult.outcomes.filter((o) => o.ok).length} of ${bulkResult.outcomes.length} done`}
21        actions={
22          <Button size="sm" onClick={() => onClear()}>
23            Clear this result
24          </Button>
25        }
26      >
27        <ul className="app-flags" aria-label="Result for each file">
28          {bulkResult.outcomes.map((o) => (
29            <li key={o.id}>
30              {o.ok ? <Status tone="ok">Done</Status> : <Status tone="crit">Left as it was</Status>}
31              <span>
32                <strong className="cap-mono">{o.id}</strong>
33                <br />
34                {o.message}
35                {o.usedBy && o.usedBy.length > 0 ? (
36                  <ul className="app-list">
37                    {o.usedBy.map((use) => (
38                      <li key={`${use.id}:${use.detail}`}>
39                        Used by {use.title || use.id} ({use.detail})
40                      </li>
41                    ))}
42                  </ul>
43                ) : null}
44              </span>
45            </li>
46          ))}
47        </ul>
48      </Panel>
49  );
50}
51
52export function TrashEmptiedPanel({ emptied }: { emptied: { deleted: string[]; refused: { id: string; message: string; usedBy: MediaUse[] }[]; more: boolean; unrecorded: number } }) {
53  return (
54      <Panel title="Trash emptied" src={`${emptied.deleted.length} deleted, ${emptied.refused.length} kept`}>
55        <p>
56          {emptied.deleted.length === 0 ? "No file was deleted." : `Deleted ${emptied.deleted.length} ${emptied.deleted.length === 1 ? "file" : "files"} from the site.`}
57          {emptied.more ? " More files remain in the trash; empty it again to continue." : ""}
58          {emptied.unrecorded > 0 ? ` The site deleted them, but Carrel could not save the authorship record for ${emptied.unrecorded}.` : ""}
59        </p>
60        {emptied.refused.length > 0 ? (
61          <Alert tone="warn" title="Kept in the trash">
62            <ul className="app-list">
63              {emptied.refused.map((r) => (
64                <li key={r.id}>
65                  <span className="cap-mono">{r.id}</span>: {r.message}
66                  {r.usedBy.length > 0 ? ` Used by ${r.usedBy.map((u) => `${u.title || u.id} (${u.detail})`).join(", ")}.` : ""}
67                </li>
68              ))}
69            </ul>
70          </Alert>
71        ) : null}
72      </Panel>
73  );
74}