37 lines
1.0 KiB
TypeScript
37 lines
1.0 KiB
TypeScript
import type { FormEvent } from "react";
|
|
|
|
export interface ComposerProps {
|
|
value: string;
|
|
busy: boolean;
|
|
error: boolean;
|
|
onChange: (value: string) => void;
|
|
onSubmit: () => void;
|
|
}
|
|
|
|
export function Composer({ value, busy, error, onChange, onSubmit }: ComposerProps) {
|
|
const empty = value.trim().length === 0;
|
|
function submit(e: FormEvent) {
|
|
e.preventDefault();
|
|
if (!empty && !busy) onSubmit();
|
|
}
|
|
return (
|
|
<form className="composer" onSubmit={submit}>
|
|
<label htmlFor="composer-text" className="composer-label">New post</label>
|
|
<textarea
|
|
id="composer-text"
|
|
value={value}
|
|
rows={3}
|
|
placeholder="Share something with the feed"
|
|
disabled={busy}
|
|
onChange={(e) => onChange(e.target.value)}
|
|
/>
|
|
{error ? (
|
|
<p className="error" role="alert">Publishing the post failed. Your text is still here.</p>
|
|
) : null}
|
|
<button type="submit" className="composer-post" disabled={empty || busy}>
|
|
{busy ? "Posting" : "Post"}
|
|
</button>
|
|
</form>
|
|
);
|
|
}
|