pastilhasandClaude Opus 5
aaf767087e
Name and Title, in the editor column — the band row in the nav had only scrolled the preview until now. Both, not the title alone: a form showing one of two names invites somebody to change the wrong one, and `name` could only be set when the band was created. Last in the editor's order, so a block or a spacing editor wins — those were opened deliberately, and the band is merely still selected underneath them. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
90 lines
3.2 KiB
TypeScript
90 lines
3.2 KiB
TypeScript
import { useEffect, useRef, useState } from 'react';
|
|
import { Input } from '@/components/ui/input';
|
|
import { useClient } from 'hooks/useClient';
|
|
import { readableError } from '../errors';
|
|
import { useAutosave } from '../useAutosave';
|
|
import { useFlash } from '../useFlash';
|
|
|
|
/**
|
|
* What a band is: what the editor calls it, and what the page shows.
|
|
*
|
|
* ── Two names, and they are different things ──
|
|
*
|
|
* The NAME is for whoever is editing — it is the row in the nav, and it is what makes a page of eight
|
|
* bands navigable. It never reaches a reader.
|
|
*
|
|
* The TITLE is the heading the page draws above the band, and most bands do not want one: a band that
|
|
* opens with its own words is the common case. Empty takes it off.
|
|
*
|
|
* Both are here rather than the title alone, because a form that shows one of two names invites
|
|
* somebody to change the wrong one — and until now `name` could only be set when the band was created.
|
|
*/
|
|
export const BandSettings = ({
|
|
pageId,
|
|
band,
|
|
onSaved,
|
|
}: {
|
|
pageId: number;
|
|
band: { id: number; name: string; title?: string | null };
|
|
/** The builder re-reads its sections: the nav's row is this name, and the page draws this title. */
|
|
onSaved: () => void;
|
|
}) => {
|
|
const client = useClient();
|
|
const clientRef = useRef(client);
|
|
clientRef.current = client;
|
|
|
|
const [draft, setDraft] = useState({ name: band.name, title: band.title ?? '' });
|
|
const [busy, setBusy] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [saved, flashSaved] = useFlash();
|
|
|
|
// A different band selected is a different form. Keyed on the id so re-reading the same band after a
|
|
// save does not throw away what is being typed.
|
|
useEffect(() => setDraft({ name: band.name, title: band.title ?? '' }), [band.id]);
|
|
|
|
const stored = JSON.stringify({ name: band.name, title: band.title ?? '' });
|
|
const pending = JSON.stringify(draft);
|
|
|
|
const save = async () => {
|
|
setBusy(true);
|
|
setError(null);
|
|
try {
|
|
// An empty title is sent as an empty string, which the API reads as "take the heading off" —
|
|
// presence, not truthiness. See the note in its PATCH handler.
|
|
await clientRef.current.patch(`/fofos-admin/pages/${pageId}/sections/${band.id}`, draft);
|
|
flashSaved();
|
|
onSaved();
|
|
} catch (failure) {
|
|
setError(readableError(failure));
|
|
} finally {
|
|
setBusy(false);
|
|
}
|
|
};
|
|
|
|
useAutosave(pending !== stored ? pending : null, busy, save);
|
|
|
|
return (
|
|
<div className="flex flex-col gap-3">
|
|
<div className="flex flex-col gap-1">
|
|
<label className="text-xs">Name</label>
|
|
<Input
|
|
value={draft.name}
|
|
onChange={(event) => setDraft((was) => ({ ...was, name: event.currentTarget.value }))}
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-1">
|
|
<label className="text-xs">Title</label>
|
|
<Input
|
|
value={draft.title}
|
|
placeholder="No heading"
|
|
onChange={(event) => setDraft((was) => ({ ...was, title: event.currentTarget.value }))}
|
|
/>
|
|
</div>
|
|
|
|
{saved && <p className="text-xs text-success">Saved</p>}
|
|
{error && <p className="text-xs text-destructive">{error}</p>}
|
|
</div>
|
|
);
|
|
};
|