91 lines
3.8 KiB
TypeScript
91 lines
3.8 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
import { MANUAL_LANGUAGES, DEFAULT_MANUAL_LANGUAGE, type ManualLanguage } from "@tactical-media-broadcast-hub/core";
|
|
import { Button, Card, Input } from "../../../../components/ui/primitives";
|
|
import { api, errorMessage } from "../../../../lib/api-client";
|
|
import type { CollectiveNode } from "../../../../lib/api-types";
|
|
|
|
/**
|
|
* Create a collective (operator reorder #3: the door from the no-collectives
|
|
* home). Posts /collectives — the provisioner mints the room set, the founder
|
|
* membership and the onboarding manual land in one transaction, then the user
|
|
* is dropped on the tree. Bilingual by the same Spanish-first rule as the rest
|
|
* of the product.
|
|
*/
|
|
export default function NewCollectivePage(): React.ReactElement {
|
|
const router = useRouter();
|
|
const [name, setName] = useState("");
|
|
const [language, setLanguage] = useState<ManualLanguage>(DEFAULT_MANUAL_LANGUAGE);
|
|
const [description, setDescription] = useState("");
|
|
const [busy, setBusy] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
const ready = name.trim().length >= 2;
|
|
|
|
async function create(): Promise<void> {
|
|
setBusy(true);
|
|
setError(null);
|
|
try {
|
|
const collective = await api.post<CollectiveNode>("/collectives", {
|
|
name: name.trim(),
|
|
language,
|
|
...(description.trim() === "" ? {} : { description: description.trim() }),
|
|
});
|
|
// Full navigation so the tree mounts with the new collective in place.
|
|
router.push(`/streams?created=${encodeURIComponent(collective.name)}`);
|
|
} catch (err) {
|
|
setError(errorMessage(err));
|
|
setBusy(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="flex h-full items-center justify-center p-6">
|
|
<Card className="w-[520px] max-w-full p-6">
|
|
<h1 className="text-xl font-semibold tracking-tight">Crear un colectivo</h1>
|
|
<p className="mt-1 text-xs text-text-faint">
|
|
Se crean tres salas — abierta (pública, nunca cifrada), cerrada (cifrada desde su creación) y de acogida
|
|
(con el manual de participación) — y quedas como fundador/a.
|
|
</p>
|
|
<div className="mt-5 space-y-2">
|
|
<Input
|
|
value={name}
|
|
onChange={(e) => setName(e.target.value)}
|
|
placeholder="Nombre del colectivo"
|
|
autoFocus
|
|
/>
|
|
<label className="flex items-center justify-between gap-2 rounded-md border border-border bg-surface-2 px-3 py-2 text-xs">
|
|
Idioma del manual
|
|
<select
|
|
value={language}
|
|
onChange={(e) => setLanguage(e.target.value as ManualLanguage)}
|
|
className="rounded-md border border-border bg-surface-2 px-2 py-1 text-xs"
|
|
>
|
|
{MANUAL_LANGUAGES.map((code) => (
|
|
<option key={code} value={code}>
|
|
{code === "es" ? "Español" : "English"}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</label>
|
|
<textarea
|
|
value={description}
|
|
onChange={(e) => setDescription(e.target.value)}
|
|
rows={3}
|
|
placeholder="Descripción (opcional)"
|
|
className="w-full resize-none rounded-md border border-border bg-surface-2 p-2 text-sm focus:border-accent focus:outline-none"
|
|
/>
|
|
</div>
|
|
{error !== null && <p className="mt-2 text-xs text-danger">{error}</p>}
|
|
<div className="mt-6 flex items-center justify-between">
|
|
<Button variant="ghost" onClick={() => router.back()}>Cancelar</Button>
|
|
<Button variant="primary" disabled={busy || !ready} onClick={() => void create()}>
|
|
{busy ? "Creando…" : "Crear colectivo"}
|
|
</Button>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|