Refactor giveaway job processing and enhance environment documentation
- Improved handling of the `giveawayCreate` job in the bot's job processing for better consistency. - Updated `.env.example` to clarify the usage of `BOT_TOKEN` for both the bot and WebUI. - Added `bullmq` dependency to the WebUI package for enhanced job management capabilities.
This commit is contained in:
smueller
318
apps/webui/src/components/modules/selfroles-manager.tsx
Normal file
318
apps/webui/src/components/modules/selfroles-manager.tsx
Normal file
@@ -0,0 +1,318 @@
|
||||
'use client';
|
||||
|
||||
import type { SelfRoleBehavior, SelfRoleEntry, SelfRoleMode, SelfRolePanelDashboard } from '@nexumi/shared';
|
||||
import { Plus, Trash2 } from 'lucide-react';
|
||||
import { useState } from 'react';
|
||||
import { toast } from 'sonner';
|
||||
import { useTranslations } from '@/components/locale-provider';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
|
||||
const MODES: SelfRoleMode[] = ['BUTTONS', 'DROPDOWN', 'REACTIONS'];
|
||||
const BEHAVIORS: SelfRoleBehavior[] = ['NORMAL', 'UNIQUE', 'VERIFY', 'TEMPORARY'];
|
||||
|
||||
function rolesToText(roles: SelfRoleEntry[]): string {
|
||||
return roles.map((role) => [role.roleId, role.label, role.emoji ?? '', role.description ?? ''].join(' | ')).join('\n');
|
||||
}
|
||||
|
||||
function textToRoles(text: string): SelfRoleEntry[] {
|
||||
return text
|
||||
.split('\n')
|
||||
.map((line) => line.trim())
|
||||
.filter((line) => line.length > 0)
|
||||
.map((line) => {
|
||||
const [roleId, label, emoji, description] = line.split('|').map((part) => part.trim());
|
||||
return {
|
||||
roleId: roleId ?? '',
|
||||
label: label || roleId || '',
|
||||
emoji: emoji || undefined,
|
||||
description: description || undefined
|
||||
};
|
||||
})
|
||||
.filter((role) => role.roleId.length > 0);
|
||||
}
|
||||
|
||||
interface LocalPanel extends SelfRolePanelDashboard {
|
||||
clientKey: string;
|
||||
rolesText: string;
|
||||
saving?: boolean;
|
||||
}
|
||||
|
||||
const EMPTY_DRAFT = {
|
||||
channelId: '',
|
||||
title: '',
|
||||
description: '',
|
||||
mode: 'BUTTONS' as SelfRoleMode,
|
||||
behavior: 'NORMAL' as SelfRoleBehavior,
|
||||
rolesText: ''
|
||||
};
|
||||
|
||||
interface SelfRolesManagerProps {
|
||||
guildId: string;
|
||||
initialPanels: SelfRolePanelDashboard[];
|
||||
}
|
||||
|
||||
export function SelfRolesManager({ guildId, initialPanels }: SelfRolesManagerProps) {
|
||||
const t = useTranslations();
|
||||
const [panels, setPanels] = useState<LocalPanel[]>(
|
||||
initialPanels.map((panel, index) => ({
|
||||
...panel,
|
||||
clientKey: panel.id ?? `existing-${index}`,
|
||||
rolesText: rolesToText(panel.roles)
|
||||
}))
|
||||
);
|
||||
const [draft, setDraft] = useState(EMPTY_DRAFT);
|
||||
const [creating, setCreating] = useState(false);
|
||||
|
||||
async function handleCreate() {
|
||||
const roles = textToRoles(draft.rolesText);
|
||||
if (!draft.channelId.trim() || !draft.title.trim() || roles.length === 0) {
|
||||
toast.error(t('modulePages.selfroles.formIncomplete'));
|
||||
return;
|
||||
}
|
||||
setCreating(true);
|
||||
try {
|
||||
const response = await fetch(`/api/guilds/${guildId}/selfroles`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
channelId: draft.channelId.trim(),
|
||||
title: draft.title.trim(),
|
||||
description: draft.description.trim() || null,
|
||||
mode: draft.mode,
|
||||
behavior: draft.behavior,
|
||||
roles
|
||||
})
|
||||
});
|
||||
const body = (await response.json().catch(() => null)) as (SelfRolePanelDashboard & { error?: string }) | null;
|
||||
if (!response.ok || !body) {
|
||||
toast.error(body?.error ?? t('common.saveError'));
|
||||
return;
|
||||
}
|
||||
setPanels((prev) => [
|
||||
{ ...body, clientKey: body.id ?? `new-${Date.now()}`, rolesText: rolesToText(body.roles) },
|
||||
...prev
|
||||
]);
|
||||
setDraft(EMPTY_DRAFT);
|
||||
toast.success(t('common.saveSuccess'));
|
||||
} catch {
|
||||
toast.error(t('common.saveError'));
|
||||
} finally {
|
||||
setCreating(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSave(panel: LocalPanel) {
|
||||
setPanels((prev) => prev.map((entry) => (entry.clientKey === panel.clientKey ? { ...entry, saving: true } : entry)));
|
||||
try {
|
||||
const response = await fetch(`/api/guilds/${guildId}/selfroles/${panel.id}`, {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
channelId: panel.channelId,
|
||||
title: panel.title,
|
||||
description: panel.description,
|
||||
mode: panel.mode,
|
||||
behavior: panel.behavior,
|
||||
roles: textToRoles(panel.rolesText)
|
||||
})
|
||||
});
|
||||
const body = (await response.json().catch(() => null)) as (SelfRolePanelDashboard & { error?: string }) | null;
|
||||
if (!response.ok || !body) {
|
||||
toast.error(body?.error ?? t('common.saveError'));
|
||||
return;
|
||||
}
|
||||
toast.success(t('common.saveSuccess'));
|
||||
} catch {
|
||||
toast.error(t('common.saveError'));
|
||||
} finally {
|
||||
setPanels((prev) => prev.map((entry) => (entry.clientKey === panel.clientKey ? { ...entry, saving: false } : entry)));
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDelete(panel: LocalPanel) {
|
||||
if (!window.confirm(t('modulePages.selfroles.confirmDelete'))) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const response = await fetch(`/api/guilds/${guildId}/selfroles/${panel.id}`, { method: 'DELETE' });
|
||||
if (!response.ok) {
|
||||
toast.error(t('common.saveError'));
|
||||
return;
|
||||
}
|
||||
setPanels((prev) => prev.filter((entry) => entry.clientKey !== panel.clientKey));
|
||||
toast.success(t('common.saveSuccess'));
|
||||
} catch {
|
||||
toast.error(t('common.saveError'));
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>{t('modulePages.selfroles.createTitle')}</CardTitle>
|
||||
<CardDescription>{t('modulePages.selfroles.createDescription')}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label>{t('modulePages.selfroles.channelId')}</Label>
|
||||
<Input value={draft.channelId} onChange={(event) => setDraft((prev) => ({ ...prev, channelId: event.target.value }))} placeholder="123456789012345678" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>{t('modulePages.selfroles.panelTitle')}</Label>
|
||||
<Input value={draft.title} onChange={(event) => setDraft((prev) => ({ ...prev, title: event.target.value }))} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>{t('modulePages.selfroles.mode')}</Label>
|
||||
<Select value={draft.mode} onValueChange={(mode) => setDraft((prev) => ({ ...prev, mode: mode as SelfRoleMode }))}>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{MODES.map((mode) => (
|
||||
<SelectItem key={mode} value={mode}>
|
||||
{t(`modulePages.selfroles.modes.${mode}`)}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>{t('modulePages.selfroles.behavior')}</Label>
|
||||
<Select value={draft.behavior} onValueChange={(behavior) => setDraft((prev) => ({ ...prev, behavior: behavior as SelfRoleBehavior }))}>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{BEHAVIORS.map((behavior) => (
|
||||
<SelectItem key={behavior} value={behavior}>
|
||||
{t(`modulePages.selfroles.behaviors.${behavior}`)}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>{t('modulePages.selfroles.description')}</Label>
|
||||
<Input value={draft.description} onChange={(event) => setDraft((prev) => ({ ...prev, description: event.target.value }))} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>{t('modulePages.selfroles.roles')}</Label>
|
||||
<Textarea
|
||||
rows={5}
|
||||
value={draft.rolesText}
|
||||
onChange={(event) => setDraft((prev) => ({ ...prev, rolesText: event.target.value }))}
|
||||
placeholder={t('modulePages.selfroles.rolesPlaceholder')}
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">{t('modulePages.selfroles.rolesHint')}</p>
|
||||
</div>
|
||||
<Button type="button" onClick={handleCreate} disabled={creating}>
|
||||
<Plus className="size-4" />
|
||||
{creating ? t('common.saving') : t('modulePages.selfroles.create')}
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>{t('modulePages.selfroles.listTitle')}</CardTitle>
|
||||
<CardDescription>{t('modulePages.selfroles.listDescription')}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{panels.length === 0 && <p className="text-sm text-muted-foreground">{t('modulePages.selfroles.empty')}</p>}
|
||||
{panels.map((panel) => (
|
||||
<div key={panel.clientKey} className="space-y-3 rounded-md border border-border p-4">
|
||||
<div className="grid gap-3 sm:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label>{t('modulePages.selfroles.channelId')}</Label>
|
||||
<Input
|
||||
value={panel.channelId}
|
||||
onChange={(event) =>
|
||||
setPanels((prev) => prev.map((entry) => (entry.clientKey === panel.clientKey ? { ...entry, channelId: event.target.value } : entry)))
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>{t('modulePages.selfroles.panelTitle')}</Label>
|
||||
<Input
|
||||
value={panel.title}
|
||||
onChange={(event) =>
|
||||
setPanels((prev) => prev.map((entry) => (entry.clientKey === panel.clientKey ? { ...entry, title: event.target.value } : entry)))
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>{t('modulePages.selfroles.mode')}</Label>
|
||||
<Select
|
||||
value={panel.mode}
|
||||
onValueChange={(mode) =>
|
||||
setPanels((prev) => prev.map((entry) => (entry.clientKey === panel.clientKey ? { ...entry, mode: mode as SelfRoleMode } : entry)))
|
||||
}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{MODES.map((mode) => (
|
||||
<SelectItem key={mode} value={mode}>
|
||||
{t(`modulePages.selfroles.modes.${mode}`)}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>{t('modulePages.selfroles.behavior')}</Label>
|
||||
<Select
|
||||
value={panel.behavior}
|
||||
onValueChange={(behavior) =>
|
||||
setPanels((prev) =>
|
||||
prev.map((entry) => (entry.clientKey === panel.clientKey ? { ...entry, behavior: behavior as SelfRoleBehavior } : entry))
|
||||
)
|
||||
}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{BEHAVIORS.map((behavior) => (
|
||||
<SelectItem key={behavior} value={behavior}>
|
||||
{t(`modulePages.selfroles.behaviors.${behavior}`)}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>{t('modulePages.selfroles.roles')}</Label>
|
||||
<Textarea
|
||||
rows={4}
|
||||
value={panel.rolesText}
|
||||
onChange={(event) =>
|
||||
setPanels((prev) => prev.map((entry) => (entry.clientKey === panel.clientKey ? { ...entry, rolesText: event.target.value } : entry)))
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button type="button" variant="outline" disabled={panel.saving} onClick={() => handleSave(panel)}>
|
||||
{panel.saving ? t('common.saving') : t('common.save')}
|
||||
</Button>
|
||||
<Button type="button" variant="ghost" size="icon" aria-label={t('common.remove')} onClick={() => handleDelete(panel)}>
|
||||
<Trash2 className="size-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user