51 lines
2.1 KiB
JavaScript
51 lines
2.1 KiB
JavaScript
import React, { useEffect, useState } from 'react';
|
|
import { useParams, useNavigate } from 'react-router-dom';
|
|
import { get } from '../../lib/api';
|
|
import { Box, IconButton, Typography } from '@mui/material';
|
|
import ArrowBackIcon from '@mui/icons-material/ArrowBack';
|
|
|
|
const HelpPage = () => {
|
|
const { guildId } = useParams();
|
|
const navigate = useNavigate();
|
|
const [commands, setCommands] = useState([]);
|
|
|
|
useEffect(() => {
|
|
get(`/api/servers/${guildId}/commands`).then(res => {
|
|
const cmds = res.data || [];
|
|
// sort: locked commands first (preserve relative order), then others alphabetically
|
|
const locked = cmds.filter(c => c.locked);
|
|
const others = cmds.filter(c => !c.locked).sort((a, b) => a.name.localeCompare(b.name));
|
|
setCommands([...locked, ...others]);
|
|
})
|
|
.catch(() => setCommands([]));
|
|
}, [guildId]);
|
|
|
|
const handleBack = () => {
|
|
// Navigate back to server settings and instruct it to open Commands accordion
|
|
navigate(`/server/${guildId}`, { state: { openCommands: true } });
|
|
}
|
|
|
|
return (
|
|
<Box sx={{ padding: { xs: 2, sm: 3, md: 5 } }}>
|
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: { xs: 1, sm: 2 }, mb: 2 }}>
|
|
<IconButton onClick={handleBack}><ArrowBackIcon /></IconButton>
|
|
<Typography variant={{ xs: 'h5', sm: 'h5' }}>Commands List</Typography>
|
|
</Box>
|
|
<Box sx={{ marginTop: 2 }}>
|
|
{commands.length === 0 && <Typography>No commands available.</Typography>}
|
|
{commands.map(cmd => (
|
|
<Box key={cmd.name} sx={{ border: '1px solid #eee', borderRadius: 1, padding: 1, marginTop: 1 }}>
|
|
<Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
|
|
<Typography sx={{ fontWeight: 'bold' }}>/{cmd.name}</Typography>
|
|
<Typography sx={{ color: cmd.locked ? 'primary.main' : (cmd.enabled ? 'success.main' : 'text.secondary') }}>{cmd.locked ? 'Locked' : (cmd.enabled ? 'Enabled' : 'Disabled')}</Typography>
|
|
</Box>
|
|
<Typography sx={{ mt: 0.5 }}>{cmd.description}</Typography>
|
|
</Box>
|
|
))}
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
export default HelpPage;
|