Spaces:
Runtime error
Runtime error
| import { useEffect, useState, type FormEvent } from "react"; | |
| import { launchpadApi } from "../api/endpoints"; | |
| import type { CalendarItem, Platform, SocialAccount } from "../api/types"; | |
| import { errorMessage, Modal } from "./ui"; | |
| export const PLATFORMS: { id: Platform; label: string; limit: number; auto: boolean }[] = [ | |
| { id: "x", label: "X", limit: 280, auto: true }, | |
| { id: "linkedin", label: "LinkedIn", limit: 3000, auto: true }, | |
| { id: "bluesky", label: "Bluesky", limit: 300, auto: true }, | |
| { id: "substack_notes", label: "Substack Notes", limit: 2000, auto: false }, | |
| ]; | |
| export function toLocalInput(date: Date): string { | |
| const pad = (n: number) => String(n).padStart(2, "0"); | |
| return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}T${pad(date.getHours())}:${pad(date.getMinutes())}`; | |
| } | |
| export function nextSlot(): Date { | |
| const d = new Date(Date.now() + 60 * 60 * 1000); | |
| d.setMinutes(0, 0, 0); | |
| return d; | |
| } | |
| /** Schedules one post (or a thread) on the Launchpad. Posts auto publish when an account is connected. */ | |
| export function ScheduleModal({ | |
| platform: initialPlatform, | |
| posts, | |
| artifactId, | |
| documentId, | |
| onClose, | |
| onScheduled, | |
| }: { | |
| platform: Platform; | |
| posts: string[]; | |
| artifactId?: string | null; | |
| documentId?: string | null; | |
| onClose: () => void; | |
| onScheduled?: (item: CalendarItem) => void; | |
| }) { | |
| const [platform, setPlatform] = useState<Platform>(initialPlatform); | |
| const [texts, setTexts] = useState<string[]>(posts.length ? posts : [""]); | |
| const [when, setWhen] = useState(toLocalInput(nextSlot())); | |
| const [accounts, setAccounts] = useState<SocialAccount[]>([]); | |
| const [accountId, setAccountId] = useState<string>(""); | |
| const [remind, setRemind] = useState(false); | |
| const [busy, setBusy] = useState(false); | |
| const [error, setError] = useState<string | null>(null); | |
| const meta = PLATFORMS.find((p) => p.id === platform)!; | |
| const threadable = platform === "x" || platform === "bluesky"; | |
| useEffect(() => { | |
| launchpadApi.accounts().then((a) => setAccounts(a.accounts), () => setAccounts([])); | |
| }, []); | |
| const options = accounts.filter((a) => a.platform === platform && a.status === "active"); | |
| useEffect(() => { | |
| setAccountId(options[0]?.id ?? ""); | |
| // eslint-disable-next-line react-hooks/exhaustive-deps | |
| }, [platform, accounts.length]); | |
| const submit = async (e: FormEvent) => { | |
| e.preventDefault(); | |
| setBusy(true); | |
| setError(null); | |
| const clean = texts.map((t) => t.trim()).filter(Boolean); | |
| const merged = threadable ? clean : [clean.join("\n\n")]; | |
| try { | |
| const item = await launchpadApi.create({ | |
| platform, | |
| scheduled_at: new Date(when).toISOString(), | |
| content: merged[0] ?? "", | |
| thread: merged.slice(1), | |
| artifact_id: artifactId ?? null, | |
| document_id: documentId ?? null, | |
| social_account_id: meta.auto && accountId ? accountId : null, | |
| remind_by_email: remind || !meta.auto || !accountId, | |
| }); | |
| onScheduled?.(item); | |
| onClose(); | |
| } catch (err) { | |
| setError(errorMessage(err)); | |
| } finally { | |
| setBusy(false); | |
| } | |
| }; | |
| return ( | |
| <Modal title="Schedule on the Launchpad" onClose={onClose} wide> | |
| <form onSubmit={submit} className="stack"> | |
| <div className="row"> | |
| <label className="field"> | |
| <span>Platform</span> | |
| <select className="input input-sm" value={platform} onChange={(e) => setPlatform(e.target.value as Platform)}> | |
| {PLATFORMS.map((p) => ( | |
| <option key={p.id} value={p.id}> | |
| {p.label} | |
| </option> | |
| ))} | |
| </select> | |
| </label> | |
| <label className="field"> | |
| <span>When</span> | |
| <input className="input input-sm" type="datetime-local" required value={when} onChange={(e) => setWhen(e.target.value)} /> | |
| </label> | |
| {meta.auto && ( | |
| <label className="field"> | |
| <span>Account</span> | |
| <select className="input input-sm" value={accountId} onChange={(e) => setAccountId(e.target.value)}> | |
| <option value="">Email me a reminder instead</option> | |
| {options.map((a) => ( | |
| <option key={a.id} value={a.id}> | |
| {a.handle} | |
| </option> | |
| ))} | |
| </select> | |
| </label> | |
| )} | |
| </div> | |
| {!meta.auto && <p className="muted">Substack has no posting API, so we email you the note at send time, ready to paste.</p>} | |
| {meta.auto && !options.length && ( | |
| <p className="muted"> | |
| No {meta.label} account connected. Connect one on the Launchpad to auto post; until then you get an email reminder. | |
| </p> | |
| )} | |
| {texts.map((t, i) => ( | |
| <label key={i} className="field"> | |
| <span className="field-row"> | |
| <span>{threadable && texts.length > 1 ? `Post ${i + 1}` : "Post"}</span> | |
| <span className={`mono ${t.length > meta.limit ? "over" : "muted"}`}> | |
| {t.length} / {meta.limit} | |
| </span> | |
| </span> | |
| <textarea className="textarea" rows={threadable ? 3 : 8} value={t} onChange={(e) => setTexts(texts.map((x, j) => (j === i ? e.target.value : x)))} /> | |
| </label> | |
| ))} | |
| {threadable && ( | |
| <div className="row"> | |
| <button type="button" className="btn btn-small" onClick={() => setTexts([...texts, ""])}> | |
| Add post to thread | |
| </button> | |
| {texts.length > 1 && ( | |
| <button type="button" className="btn btn-small" onClick={() => setTexts(texts.slice(0, -1))}> | |
| Remove last | |
| </button> | |
| )} | |
| </div> | |
| )} | |
| {meta.auto && accountId && ( | |
| <label className="check"> | |
| <input type="checkbox" checked={remind} onChange={(e) => setRemind(e.target.checked)} /> | |
| Email me instead of posting automatically | |
| </label> | |
| )} | |
| {error && <p className="error-text">{error}</p>} | |
| <div className="row end"> | |
| <button type="button" className="btn" onClick={onClose}> | |
| Cancel | |
| </button> | |
| <button className="btn btn-primary" disabled={busy}> | |
| {busy ? "Scheduling..." : "Schedule"} | |
| </button> | |
| </div> | |
| </form> | |
| </Modal> | |
| ); | |
| } | |