133 lines
4.6 KiB
TypeScript
133 lines
4.6 KiB
TypeScript
import { Trash2, UserPlus } from "lucide-react";
|
|
import { useEffect, useState } from "react";
|
|
|
|
import { ApiError } from "../api/client";
|
|
import { Spinner } from "../components/Spinner";
|
|
import { MAX_GROUP_SIZE } from "../domain/constants";
|
|
import { useToast } from "../context/ToastContext";
|
|
import { useMe } from "../hooks/auth";
|
|
import { useGroup, useGroupMembers, useInviteMember, useRemoveMember, useSetGroupExpansions } from "../hooks/groups";
|
|
import { useExpansions } from "../hooks/reference";
|
|
|
|
export function GroupSettingsPage() {
|
|
const { data: me } = useMe();
|
|
const groupId = me?.active_group_id ?? null;
|
|
const { data: group, isLoading } = useGroup(groupId);
|
|
const { data: expansions } = useExpansions();
|
|
const { data: members } = useGroupMembers(groupId);
|
|
const setExpansions = useSetGroupExpansions(groupId ?? 0);
|
|
const inviteMember = useInviteMember(groupId ?? 0);
|
|
const removeMember = useRemoveMember(groupId ?? 0);
|
|
const toast = useToast();
|
|
|
|
const [selected, setSelected] = useState<Set<number>>(new Set());
|
|
const [newNick, setNewNick] = useState("");
|
|
|
|
useEffect(() => {
|
|
if (group) setSelected(new Set(group.expansion_ids));
|
|
}, [group]);
|
|
|
|
if (isLoading || !group) return <Spinner />;
|
|
// Управление группой доступно всем участникам (создатель лишь создаёт и приглашает).
|
|
const isOwner = true;
|
|
|
|
const toggle = (id: number) =>
|
|
setSelected((s) => {
|
|
const next = new Set(s);
|
|
next.has(id) ? next.delete(id) : next.add(id);
|
|
return next;
|
|
});
|
|
|
|
const saveExpansions = async () => {
|
|
try {
|
|
await setExpansions.mutateAsync([...selected]);
|
|
toast.show("Дополнения сохранены");
|
|
} catch (e) {
|
|
toast.show(e instanceof ApiError ? e.message : "Ошибка");
|
|
}
|
|
};
|
|
|
|
const add = async () => {
|
|
const nick = newNick.trim();
|
|
if (!nick) return;
|
|
try {
|
|
await inviteMember.mutateAsync(nick);
|
|
setNewNick("");
|
|
toast.show("Приглашение отправлено");
|
|
} catch (e) {
|
|
toast.show(e instanceof ApiError ? e.message : "Ошибка");
|
|
}
|
|
};
|
|
|
|
const remove = async (userId: number) => {
|
|
try {
|
|
await removeMember.mutateAsync(userId);
|
|
} catch (e) {
|
|
toast.show(e instanceof ApiError ? e.message : "Ошибка");
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<div className="card">
|
|
<h3>Дополнения</h3>
|
|
<div className="stack">
|
|
{(expansions ?? []).map((e) => (
|
|
<label key={e.id} className="row" style={{ justifyContent: "space-between" }}>
|
|
<span>
|
|
{e.name_ru}
|
|
{e.is_base && <span className="muted small"> (всегда включено)</span>}
|
|
</span>
|
|
<input
|
|
type="checkbox"
|
|
style={{ width: "auto" }}
|
|
disabled={e.is_base || !isOwner}
|
|
checked={e.is_base || selected.has(e.id)}
|
|
onChange={() => toggle(e.id)}
|
|
/>
|
|
</label>
|
|
))}
|
|
</div>
|
|
{isOwner && (
|
|
<button className="btn btn-primary" style={{ marginTop: 10 }} onClick={saveExpansions}>
|
|
Сохранить дополнения
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
<div className="card">
|
|
<h3>Участники ({(members ?? []).length}/{MAX_GROUP_SIZE})</h3>
|
|
{isOwner && (members ?? []).length >= MAX_GROUP_SIZE && (
|
|
<p className="muted small">Достигнут максимум участников ({MAX_GROUP_SIZE}).</p>
|
|
)}
|
|
{isOwner && (members ?? []).length < MAX_GROUP_SIZE && (
|
|
<div className="row" style={{ marginBottom: 10 }}>
|
|
<input
|
|
placeholder="Ник игрока — отправить приглашение"
|
|
value={newNick}
|
|
onChange={(e) => setNewNick(e.target.value)}
|
|
/>
|
|
<button className="btn btn-primary" onClick={add} disabled={inviteMember.isPending}>
|
|
<UserPlus size={18} />
|
|
</button>
|
|
</div>
|
|
)}
|
|
<div className="stack">
|
|
{(members ?? []).map((m) => (
|
|
<div key={m.user_id} className="row-between">
|
|
<span>
|
|
{m.nickname} <span className="muted small">· {m.role}</span>
|
|
</span>
|
|
{isOwner && m.role !== "owner" && (
|
|
<button className="btn btn-ghost btn-danger small" onClick={() => remove(m.user_id)}>
|
|
<Trash2 size={16} />
|
|
</button>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|