Spaces:
Runtime error
Runtime error
| import { useEffect, useState, type FormEvent } from "react"; | |
| import { useNavigate } from "react-router-dom"; | |
| import { launchpadApi } from "../api/endpoints"; | |
| import type { CalendarItem, Platform, PostableArtifact, SocialAccounts } from "../api/types"; | |
| import { AttachmentChip, AttachPicker } from "./launchpad/Attachment"; | |
| import { nextSlot, SlotPicker, toWall, userTimeZone, wallToDate } from "./launchpad/SlotPicker"; | |
| 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 }, | |
| ]; | |
| /** Only X and LinkedIn take images and videos; the others get the text. */ | |
| const MEDIA_PLATFORMS: Platform[] = ["x", "linkedin"]; | |
| const THREADED: Platform[] = ["x", "bluesky"]; | |
| /** These post only through a live connection: no email fallback. */ | |
| const CONNECTED_ONLY: Platform[] = ["x", "linkedin"]; | |
| /** What the composer offers for now: LinkedIn only (X posting is switched off). */ | |
| const COMPOSER_PLATFORMS: Platform[] = ["linkedin"]; | |
| /** The attachment's starting text for a platform: a thread for X and Bluesky, one post otherwise. */ | |
| const prefillFor = (p: Platform, a: PostableArtifact): string[] => | |
| THREADED.includes(p) ? [...a.prefill.x] : [a.prefill.linkedin]; | |
| /** The composer: one post to any of X, LinkedIn, Bluesky and Substack Notes (one calendar item each), with | |
| * something from the Library attached (its images or video go to X and LinkedIn). Scheduled or posted now. */ | |
| export function ScheduleModal({ | |
| platform: initialPlatform, | |
| posts, | |
| artifactId, | |
| artifact, | |
| kitId, | |
| kitTitle, | |
| documentId, | |
| onClose, | |
| onScheduled, | |
| }: { | |
| platform: Platform; | |
| posts: string[]; | |
| artifactId?: string | null; | |
| /** The attachment, when the caller already has it (else it is looked up from artifactId). */ | |
| artifact?: PostableArtifact | null; | |
| /** The Launch Kit the post is written from: tracked with it, never attached. */ | |
| kitId?: string | null; | |
| kitTitle?: string | null; | |
| documentId?: string | null; | |
| onClose: () => void; | |
| onScheduled?: (item: CalendarItem) => void; | |
| }) { | |
| // One platform per post. A caller asking for one the composer doesn't offer starts on LinkedIn with that text. | |
| const first: Platform = COMPOSER_PLATFORMS.includes(initialPlatform) ? initialPlatform : "linkedin"; | |
| const [selected, setSelected] = useState<Platform[]>([first]); | |
| const [texts, setTexts] = useState<Partial<Record<Platform, string[]>>>(() => ({ | |
| [first]: posts.length ? posts : artifact ? prefillFor(first, artifact) : [""], | |
| })); | |
| const [attached, setAttached] = useState<PostableArtifact | null>(artifact?.type === "launch_kit" ? null : artifact ?? null); | |
| const navigate = useNavigate(); | |
| const [picking, setPicking] = useState(false); | |
| const [when, setWhen] = useState(() => toWall(nextSlot())); | |
| const [accounts, setAccounts] = useState<SocialAccounts | null>(null); | |
| // The connections are checked before anything says one is missing: loading isn't "not connected". | |
| const [accountsState, setAccountsState] = useState<"loading" | "ready" | "error">("loading"); | |
| const loadAccounts = () => { | |
| setAccountsState("loading"); | |
| launchpadApi.accounts().then((a) => { | |
| setAccounts(a); | |
| setAccountsState("ready"); | |
| }, () => setAccountsState("error")); | |
| }; | |
| const [remind, setRemind] = useState(false); | |
| const [busy, setBusy] = useState<"schedule" | "now" | null>(null); | |
| const [error, setError] = useState<string | null>(null); | |
| useEffect(() => { | |
| loadAccounts(); | |
| if (artifactId && !artifact) { | |
| launchpadApi.postable().then((list) => { | |
| const found = list.find((a) => a.id === artifactId); | |
| // a kit is never an attachment, and audio can't be posted (X and LinkedIn take no audio files) | |
| if (found && found.type !== "launch_kit" && found.media !== "audio") attach(found); | |
| }, () => undefined); | |
| } | |
| // eslint-disable-next-line react-hooks/exhaustive-deps | |
| }, []); | |
| const accountFor = (p: Platform) => | |
| accounts?.accounts.find((a) => a.platform === p && a.status === "active") ?? null; | |
| const carriesMedia = !!attached && attached.media !== "text"; | |
| /** Why a ticked X / LinkedIn can't be scheduled yet (no connection, connection down, can't post media). */ | |
| const blocker = (p: Platform): string | null => { | |
| if (!CONNECTED_ONLY.includes(p) || accountsState !== "ready") return null; | |
| const label = PLATFORMS.find((x) => x.id === p)!.label; | |
| const any = accounts?.accounts.find((a) => a.platform === p); | |
| const live = accountFor(p); | |
| if (!live) return any ? `Your ${label} connection is down. Reconnect ${label}.` : `Connect ${label} to post there.`; | |
| if (carriesMedia && !live.can_post_media) return `Reconnect ${label} to post images and videos.`; | |
| return null; | |
| }; | |
| const blocked = selected.map(blocker).filter(Boolean) as string[]; | |
| const checking = accountsState !== "ready" && selected.some((p) => CONNECTED_ONLY.includes(p)); | |
| const remindable = selected.some((p) => !CONNECTED_ONLY.includes(p)); | |
| /** Switch to another platform (one per post); it starts from the attachment's text, or the text written so far. */ | |
| const pick = (p: Platform) => { | |
| if (selected.includes(p)) return; | |
| setSelected([p]); | |
| if (!texts[p]?.some((t) => t.trim())) { | |
| const from = selected.map((s) => texts[s] ?? []).find((t) => t.some((x) => x.trim())) ?? [""]; | |
| const start = attached ? prefillFor(p, attached) : THREADED.includes(p) ? from : [from.join("\n\n")]; | |
| setTexts((cur) => ({ ...cur, [p]: start })); | |
| } | |
| }; | |
| /** Attach: empty texts take its suggested text. */ | |
| const attach = (a: PostableArtifact) => { | |
| setAttached(a); | |
| setPicking(false); | |
| setTexts((cur) => { | |
| const next = { ...cur }; | |
| for (const p of selected) if (!next[p]?.some((t) => t.trim())) next[p] = prefillFor(p, a); | |
| return next; | |
| }); | |
| }; | |
| const setText = (p: Platform, i: number, value: string) => | |
| setTexts((cur) => ({ ...cur, [p]: (cur[p] ?? [""]).map((t, j) => (j === i ? value : t)) })); | |
| const connect = async (p: "x" | "linkedin") => { | |
| try { | |
| window.location.href = (await launchpadApi.startOAuth(p)).url; | |
| } catch (e) { | |
| setError(errorMessage(e)); | |
| } | |
| }; | |
| const submit = async (now: boolean, e?: FormEvent) => { | |
| e?.preventDefault(); | |
| if (!selected.length) return setError("Pick where to post."); | |
| if (blocked.length) return setError(blocked[0]); | |
| if (!now && wallToDate(when) <= new Date()) return setError("Pick a time that is still ahead."); | |
| setBusy(now ? "now" : "schedule"); | |
| setError(null); | |
| const done: string[] = []; | |
| try { | |
| for (const p of PLATFORMS.map((x) => x.id).filter((id) => selected.includes(id))) { | |
| const meta = PLATFORMS.find((x) => x.id === p)!; | |
| const clean = (texts[p] ?? []).map((t) => t.trim()).filter(Boolean); | |
| const merged = THREADED.includes(p) ? clean : [clean.join("\n\n")]; | |
| const account = meta.auto ? accountFor(p) : null; | |
| const item = await launchpadApi.create({ | |
| platform: p, | |
| // Post now: published by this very request (the server takes the time). Scheduled: the half hour picked, in | |
| // the user's zone (the backend makes it UTC). | |
| ...(now ? { publish_now: true } : { local_time: when, timezone: userTimeZone() }), | |
| content: merged[0] ?? "", | |
| thread: merged.slice(1), | |
| // Images and videos only go to X and LinkedIn; text attachments go anywhere. | |
| artifact_id: attached && (!carriesMedia || MEDIA_PLATFORMS.includes(p)) ? attached.id : null, | |
| document_id: documentId ?? null, | |
| kit_id: kitId ?? null, | |
| social_account_id: account?.id ?? null, | |
| remind_by_email: CONNECTED_ONLY.includes(p) ? false : remind || !account, | |
| }); | |
| onScheduled?.(item); | |
| done.push(meta.label); | |
| } | |
| onClose(); | |
| } catch (err) { | |
| setError(done.length ? `${done.join(" and ")} done; then: ${errorMessage(err)}` : errorMessage(err)); | |
| } finally { | |
| setBusy(null); | |
| } | |
| }; | |
| return ( | |
| <Modal title="New post" onClose={onClose} wide> | |
| <form onSubmit={(e) => submit(false, e)} className="stack lp-compose"> | |
| <div className="field"> | |
| <span className="vw-label">Post to</span> | |
| <div className="gen-chips lp-platforms" role="radiogroup" aria-label="Platform"> | |
| {PLATFORMS.filter((p) => COMPOSER_PLATFORMS.includes(p.id)).map((p) => { | |
| const on = selected.includes(p.id); | |
| return ( | |
| <button key={p.id} type="button" role="radio" className={`chip${on ? " on" : ""}`} aria-checked={on} | |
| onClick={() => pick(p.id)}> | |
| {p.label} | |
| </button> | |
| ); | |
| })} | |
| </div> | |
| </div> | |
| {kitId && <p className="muted small lp-from-kit">Written from the launch kit: {kitTitle ?? "this kit"}</p>} | |
| <div className="field"> | |
| <span className="vw-label">Attachment</span> | |
| {attached ? ( | |
| <AttachmentChip a={attached} onChange={() => setPicking(true)} onRemove={() => setAttached(null)} /> | |
| ) : ( | |
| <button type="button" className="btn lp-attach-btn" onClick={() => setPicking(true)}> | |
| + Attach from your Library | |
| </button> | |
| )} | |
| </div> | |
| {PLATFORMS.filter((p) => selected.includes(p.id)).map((meta) => { | |
| const p = meta.id; | |
| const list = texts[p] ?? [""]; | |
| const account = meta.auto ? accountFor(p) : null; | |
| const canConnect = (p === "x" || p === "linkedin") && accounts?.available[p]; | |
| const problem = blocker(p); | |
| return ( | |
| <section key={p} className="lp-platform"> | |
| <div className="lp-platform-head"> | |
| <strong>{meta.label}</strong> | |
| <span className={`small ${problem || (accountsState === "error" && CONNECTED_ONLY.includes(p)) ? "lp-warn" : "muted"}`}> | |
| {problem ?? (!meta.auto ? "No posting API: we email you the text at send time." | |
| : accountsState === "loading" ? "Checking your connection..." | |
| : accountsState === "error" ? "Couldn't check your connections." | |
| : account ? `Posting as ${account.handle}` : "Not connected: we email you a reminder.")} | |
| </span> | |
| {accountsState === "error" && ( | |
| <button type="button" className="btn btn-small" onClick={loadAccounts}>Retry</button> | |
| )} | |
| {problem && canConnect && ( | |
| <button type="button" className="btn btn-small btn-primary" onClick={() => connect(p as "x" | "linkedin")}> | |
| {accounts?.accounts.some((a) => a.platform === p) ? "Reconnect" : "Connect"} {meta.label} | |
| </button> | |
| )} | |
| {problem && !canConnect && <span className="muted small">{meta.label} posting isn't set up yet.</span>} | |
| </div> | |
| {list.map((t, i) => ( | |
| <label key={i} className="field"> | |
| <span className="field-row"> | |
| <span className="small muted">{THREADED.includes(p) && list.length > 1 ? `Post ${i + 1}` : "Post"}</span> | |
| <span className={`mono small ${t.length > meta.limit ? "over" : "muted"}`}>{t.length} / {meta.limit}</span> | |
| </span> | |
| <textarea className="textarea" rows={THREADED.includes(p) ? 3 : 6} value={t} | |
| onChange={(e) => setText(p, i, e.target.value)} /> | |
| </label> | |
| ))} | |
| {THREADED.includes(p) && ( | |
| <div className="row"> | |
| <button type="button" className="btn btn-small" onClick={() => setTexts({ ...texts, [p]: [...list, ""] })}> | |
| + Add to thread | |
| </button> | |
| {list.length > 1 && ( | |
| <button type="button" className="btn btn-small" onClick={() => setTexts({ ...texts, [p]: list.slice(0, -1) })}> | |
| Remove last | |
| </button> | |
| )} | |
| </div> | |
| )} | |
| </section> | |
| ); | |
| })} | |
| <div className="row wrap lp-when"> | |
| <div className="field"> | |
| <span className="vw-label">When</span> | |
| <SlotPicker value={when} onChange={setWhen} /> | |
| </div> | |
| {remindable && ( | |
| <label className="check"> | |
| <input type="checkbox" checked={remind} onChange={(e) => setRemind(e.target.checked)} /> | |
| Email me instead of posting automatically (Bluesky, Substack) | |
| </label> | |
| )} | |
| </div> | |
| {error && <p className="error-text">{error}</p>} | |
| <div className="row end"> | |
| <button type="button" className="btn" onClick={onClose}>Cancel</button> | |
| <button type="button" className="btn" disabled={busy !== null || !selected.length || blocked.length > 0 || checking} | |
| onClick={() => submit(true)}> | |
| {busy === "now" ? "Posting..." : "Post now"} | |
| </button> | |
| <button className="btn btn-primary" disabled={busy !== null || !selected.length || blocked.length > 0 || checking}> | |
| {busy === "schedule" ? "Scheduling..." : "Schedule"} | |
| </button> | |
| </div> | |
| </form> | |
| {picking && ( | |
| <AttachPicker onPick={attach} onClose={() => setPicking(false)} onCreateKit={() => { | |
| setPicking(false); | |
| onClose(); | |
| navigate("/app/launchpad/kits"); | |
| }} /> | |
| )} | |
| </Modal> | |
| ); | |
| } | |