app/components/admin/publish-actions.tsx

Functions

Imports

It imports app/components/admin/overflow-menu.tsx, app/lib/editor/datetime-local.ts. Imported by app/components/admin/editor-bar.tsx.

Source

1import { useRef, useState } from "react";
2
3import {
4  FIRST_PUBLICATION_NOTE,
5  PUBLISH_CONFIRMED_INTENT,
6  transitionsFor,
7  type PostState,
8} from "capsomer/publish-transition";
9import { anHourFromNowLocal, toIso, toLocalInput } from "~/lib/editor/datetime-local";
10import { Dialog, DialogBody, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "capsomer/react/dialog";
11
12import { OverflowMenu } from "./overflow-menu";
13
14export function PublishActions({
15  formId,
16  state,
17  everPublished,
18  publishAt,
19  onPublishAtChange,
20  busy,
21  disabled,
22}: {
23  /** The editing form, which these buttons sit outside of. */
24  formId: string;
25  state: PostState;
26  everPublished: boolean;
27  publishAt: string;
28  onPublishAtChange: (value: string) => void;
29  busy?: boolean;
30  disabled?: boolean;
31}) {
32  const [ceremony, setCeremony] = useState(false);
33  const transitions = transitionsFor(state, everPublished);
34  const [primary, ...secondary] = transitions;
35  const rootRef = useRef<HTMLDivElement>(null);
36  /* Opened from the More menu, whose item is hidden once the menu closes: the dialog would hand
37     focus back to it and lose it, so it goes to the menu's own button instead. */
38  const fromMenu = useRef(false);
39  const closeCeremony = () => {
40    setCeremony(false);
41    if (!fromMenu.current) return;
42    fromMenu.current = false;
43    rootRef.current?.querySelector<HTMLElement>("button[popovertarget]")?.focus();
44  };
45
46  return (
47    <div className="app-actions" ref={rootRef}>
48      {secondary.length > 0 || state !== "draft" ? (
49        <OverflowMenu label="More">
50          {secondary.map((transition) => (
51            <button
52              key={transition.id}
53              type="submit"
54              form={formId}
55              name="intent"
56              value={transition.id}
57              data-menu-item
58              className="cap-option"
59              data-tone={transition.danger ? "crit" : undefined}
60              disabled={disabled || busy}
61            >
62              <span className="cap-option-label">{transition.label}</span>
63              <span className="cap-option-hint">
64                {transition.id === "unpublish"
65                  ? "Takes it off the public site. The file and the history stay."
66                  : "Commits without changing whether it is public."}
67              </span>
68            </button>
69          ))}
70          {state !== "draft" ? (
71            <button
72              type="button"
73              data-menu-item
74              className="cap-option"
75              onClick={() => {
76                fromMenu.current = true;
77                setCeremony(true);
78              }}
79            >
80              <span className="cap-option-label">Reschedule</span>
81              <span className="cap-option-hint">Change when this goes live.</span>
82            </button>
83          ) : null}
84        </OverflowMenu>
85      ) : null}
86
87      {primary.ceremony ? (
88        <>
89          {/* A real submit, so it works without script. `savePost` refuses an unconfirmed first
90              publication, so a click before hydration still cannot publish. */}
91          <button
92            type="submit"
93            form={formId}
94            name="intent"
95            value={primary.id}
96            className="cap-btn"
97            data-variant="primary"
98            disabled={disabled || busy}
99            onClick={(event) => {
100              event.preventDefault();
101              setCeremony(true);
102            }}
103          >
104            {primary.label}
105          </button>
106          <PublishCeremony
107            formId={formId}
108            open={ceremony}
109            onClose={closeCeremony}
110            publishAt={publishAt}
111            onPublishAtChange={onPublishAtChange}
112          />
113        </>
114      ) : (
115        <>
116          <button
117            type="submit"
118            form={formId}
119            name="intent"
120            value={primary.id}
121            className="cap-btn"
122            data-variant="primary"
123            disabled={disabled || busy}
124          >
125            {busy ? "Saving" : primary.label}
126          </button>
127          {/* Only where it can be opened: its unreachable reschedule submit would send `draft:false`. */}
128          {state !== "draft" ? (
129            <PublishCeremony
130              formId={formId}
131              open={ceremony}
132              onClose={closeCeremony}
133              publishAt={publishAt}
134              onPublishAtChange={onPublishAtChange}
135              reschedule
136            />
137          ) : null}
138        </>
139      )}
140    </div>
141  );
142}
143
144// Both buttons send the confirmed intent as the submitter, by `form`, since the dialog sits outside the
145// editing form; a closed dialog's fields are not submitted, so nothing here travels unless pressed.
146function PublishCeremony({
147  formId,
148  open,
149  onClose,
150  publishAt,
151  onPublishAtChange,
152  reschedule,
153}: {
154  formId: string;
155  open: boolean;
156  onClose: () => void;
157  publishAt: string;
158  onPublishAtChange: (value: string) => void;
159  reschedule?: boolean;
160}) {
161  const whenRef = useRef<HTMLInputElement>(null);
162  const cancelRef = useRef<HTMLButtonElement>(null);
163  const [when, setWhen] = useState(() => toLocalInput(publishAt) || anHourFromNowLocal());
164  const intent = reschedule ? "save" : PUBLISH_CONFIRMED_INTENT;
165  /* An empty, invalid or past time would publish now: Schedule refuses all three. */
166  const scheduleAt = toIso(when);
167  const past = scheduleAt !== "" && Date.parse(scheduleAt) <= Date.now();
168  const problem =
169    scheduleAt === ""
170      ? "Pick a date and time to schedule."
171      : past
172        ? "Pick a time in the future to schedule."
173        : null;
174
175  return (
176    <Dialog
177      open={open}
178      onOpenChange={(next) => {
179        if (!next) onClose();
180      }}
181      placement="center"
182      size="md"
183      aria-labelledby="ceremony-title"
184      /* The first focus goes to the least final choice: the time when rescheduling, Cancel when publishing. */
185      initialFocus={reschedule ? whenRef : cancelRef}
186    >
187      <DialogHeader>
188        <DialogTitle id="ceremony-title">
189          {reschedule ? "When does this go live?" : "Publish this post"}
190        </DialogTitle>
191        {reschedule ? null : <DialogDescription>{FIRST_PUBLICATION_NOTE}</DialogDescription>}
192      </DialogHeader>
193
194      <DialogBody>
195        <div className="app-form">
196          <div>
197            <button
198              type="submit"
199              form={formId}
200              name="intent"
201              value={intent}
202              className="cap-btn"
203              data-variant="primary"
204              onClick={() => onPublishAtChange("")}
205            >
206              Publish now
207            </button>
208          </div>
209
210          <div className="cap-field" data-invalid={problem ? "" : undefined}>
211            <label className="cap-field-label" htmlFor="ceremony-when">
212              Or hold until (your local time)
213            </label>
214            <input
215              ref={whenRef}
216              id="ceremony-when"
217              className="cap-input"
218              type="datetime-local"
219              value={when}
220              onChange={(event) => setWhen(event.target.value)}
221              aria-invalid={problem !== null}
222              aria-describedby={problem ? "ceremony-when-problem" : undefined}
223            />
224            {problem ? (
225              <p className="cap-field-error" id="ceremony-when-problem">
226                {problem}
227              </p>
228            ) : null}
229            <div>
230              <button
231                type="submit"
232                form={formId}
233                name="intent"
234                value={intent}
235                className="cap-btn"
236                disabled={problem !== null}
237                onClick={(event) => {
238                  if (problem !== null) {
239                    event.preventDefault();
240                    return;
241                  }
242                  onPublishAtChange(scheduleAt);
243                }}
244              >
245                Schedule
246              </button>
247            </div>
248          </div>
249        </div>
250      </DialogBody>
251      <DialogFooter>
252        <button type="button" className="cap-btn" data-cap-part="cancel" ref={cancelRef}>
253          Cancel
254        </button>
255      </DialogFooter>
256    </Dialog>
257  );
258}