app/components/editor/schedule-dialog.tsx

Functions

Imports

It imports no other module of this repo. Imported by app/routes/editor.tsx.

Source

1// Scheduling a post (routes/editor.tsx): the site publishes it at the chosen time.
2
3import { useState } from "react";
4import { Button } from "capsomer/react/button";
5import { Dialog, DialogBody, DialogClose, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "capsomer/react/dialog";
6import { Field } from "capsomer/react/field";
7
8type Props = {
9  open: boolean;
10  /** "post", "page": what is scheduled, in the dialog's title. */
11  noun: string;
12  returnTo: HTMLElement | null | undefined;
13  onClose: () => void;
14  /** Sends the schedule, as an ISO time. */
15  schedule: (publishAt: string) => Promise<void>;
16};
17
18export function ScheduleDialog({ open, noun, returnTo, onClose, schedule }: Props) {
19  const [scheduleAt, setScheduleAt] = useState("");
20  return (
21    <Dialog open={open} onOpenChange={(o) => !o && onClose()} placement="center" size="sm" returnTo={returnTo} aria-labelledby="schedule-title">
22      <DialogHeader divider>
23        <DialogTitle id="schedule-title">Schedule this {noun}</DialogTitle>
24        <DialogDescription>The site publishes it at the time you choose. Revert to draft takes it back.</DialogDescription>
25      </DialogHeader>
26      <DialogBody>
27        <Field label="Publish at" required>
28          <input className="cap-input" type="datetime-local" value={scheduleAt} onChange={(e) => setScheduleAt(e.target.value)} />
29        </Field>
30      </DialogBody>
31      <DialogFooter align="between">
32        <DialogClose part="cancel">Cancel</DialogClose>
33        <Button
34          variant="primary"
35          disabledReason={!scheduleAt ? "Choose a time first." : undefined}
36          onClick={async () => {
37            await schedule(new Date(scheduleAt).toISOString());
38          }}
39        >
40          Schedule
41        </Button>
42      </DialogFooter>
43    </Dialog>
44  );
45}