73 lines
2.7 KiB
TypeScript
73 lines
2.7 KiB
TypeScript
|
import { useMutation, useQueryClient } from '@tanstack/react-query';
|
||
|
|
import { useTranslation } from 'react-i18next';
|
||
|
|
|
||
|
|
import { joinGuild } from '@/api/guilds';
|
||
|
|
import { instanceQueryKey } from '@/api/instance';
|
||
|
|
import { myGuildsQueryKey } from '@/api/users';
|
||
|
|
import { ErrorNotice } from '@/components/ui/ErrorNotice';
|
||
|
|
import { Button, Card } from '@/components/ui/primitives';
|
||
|
|
import { useInstance } from '@/lib/hooks';
|
||
|
|
import { useSessionStore } from '@/stores/session';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Экран пустого списка серверов: присоединиться к главному серверу инстанса
|
||
|
|
* (id берём из `GET /instance`) или создать свой (кнопка есть в рейке).
|
||
|
|
*/
|
||
|
|
export default function NoGuildView() {
|
||
|
|
const { t } = useTranslation();
|
||
|
|
const queryClient = useQueryClient();
|
||
|
|
const instance = useInstance();
|
||
|
|
const guilds = useSessionStore((state) => state.guilds);
|
||
|
|
|
||
|
|
const mainGuildId = instance.data?.main_guild_id;
|
||
|
|
const alreadyMember =
|
||
|
|
mainGuildId !== undefined && guilds.some((guild) => guild.id === mainGuildId);
|
||
|
|
|
||
|
|
const join = useMutation({
|
||
|
|
mutationFn: (guildId: string) => joinGuild(guildId),
|
||
|
|
onSuccess: () => {
|
||
|
|
// Список серверов обновится снапшотом шлюза; REST — подстраховка.
|
||
|
|
void queryClient.invalidateQueries({ queryKey: myGuildsQueryKey });
|
||
|
|
void queryClient.invalidateQueries({ queryKey: instanceQueryKey });
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
return (
|
||
|
|
<section id="app-content" className="flex h-full items-center justify-center p-6">
|
||
|
|
<Card className="max-w-lg text-center">
|
||
|
|
<h2 className="text-lg font-semibold">{t('guilds.empty.title')}</h2>
|
||
|
|
<p className="mt-2 text-sm text-fg-muted">{t('guilds.empty.body')}</p>
|
||
|
|
|
||
|
|
{instance.isPending ? (
|
||
|
|
<p className="mt-4 text-sm text-fg-muted" role="status">
|
||
|
|
{t('common.loading')}
|
||
|
|
</p>
|
||
|
|
) : null}
|
||
|
|
|
||
|
|
{mainGuildId !== undefined && !alreadyMember ? (
|
||
|
|
<Button
|
||
|
|
className="mt-4"
|
||
|
|
disabled={join.isPending}
|
||
|
|
onClick={() => join.mutate(mainGuildId)}
|
||
|
|
>
|
||
|
|
{t(join.isPending ? 'guilds.empty.joining' : 'guilds.empty.joinMain')}
|
||
|
|
</Button>
|
||
|
|
) : null}
|
||
|
|
|
||
|
|
{mainGuildId === undefined && !instance.isPending ? (
|
||
|
|
<p className="mt-4 text-sm text-fg-muted">{t('guilds.empty.noMain')}</p>
|
||
|
|
) : null}
|
||
|
|
|
||
|
|
{join.isError ? <ErrorNotice className="mt-3" error={join.error} /> : null}
|
||
|
|
{instance.isError ? (
|
||
|
|
<ErrorNotice
|
||
|
|
className="mt-3"
|
||
|
|
error={instance.error}
|
||
|
|
onRetry={() => void instance.refetch()}
|
||
|
|
/>
|
||
|
|
) : null}
|
||
|
|
</Card>
|
||
|
|
</section>
|
||
|
|
);
|
||
|
|
}
|