|
|
|
@ -3,8 +3,9 @@ import { defineMessages, FormattedDate, useIntl } from 'react-intl';
|
|
|
|
|
|
|
|
|
|
import { fetchModerationLog } from 'soapbox/actions/admin';
|
|
|
|
|
import ScrollableList from 'soapbox/components/scrollable-list';
|
|
|
|
|
import { Column } from 'soapbox/components/ui';
|
|
|
|
|
import { Column, Stack, Text } from 'soapbox/components/ui';
|
|
|
|
|
import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
|
|
|
|
|
import { AdminLog } from 'soapbox/types/entities';
|
|
|
|
|
|
|
|
|
|
const messages = defineMessages({
|
|
|
|
|
heading: { id: 'column.admin.moderation_log', defaultMessage: 'Moderation Log' },
|
|
|
|
@ -18,6 +19,7 @@ const ModerationLog = () => {
|
|
|
|
|
const items = useAppSelector((state) => {
|
|
|
|
|
return state.admin_log.index.map((i) => state.admin_log.items.get(String(i)));
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const hasMore = useAppSelector((state) => state.admin_log.total - state.admin_log.index.count() > 0);
|
|
|
|
|
|
|
|
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
|
|
@ -54,26 +56,38 @@ const ModerationLog = () => {
|
|
|
|
|
emptyMessage={intl.formatMessage(messages.emptyMessage)}
|
|
|
|
|
hasMore={hasMore}
|
|
|
|
|
onLoadMore={handleLoadMore}
|
|
|
|
|
className='divide-y divide-solid divide-gray-200 dark:divide-gray-800'
|
|
|
|
|
>
|
|
|
|
|
{items.map((item) => item && (
|
|
|
|
|
<div className='logentry' key={item.id}>
|
|
|
|
|
<div className='logentry__message'>{item.message}</div>
|
|
|
|
|
<div className='logentry__timestamp'>
|
|
|
|
|
<FormattedDate
|
|
|
|
|
value={new Date(item.time * 1000)}
|
|
|
|
|
hour12
|
|
|
|
|
year='numeric'
|
|
|
|
|
month='short'
|
|
|
|
|
day='2-digit'
|
|
|
|
|
hour='numeric'
|
|
|
|
|
minute='2-digit'
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
{items.map(item => item && (
|
|
|
|
|
<LogItem key={item.id} log={item} />
|
|
|
|
|
))}
|
|
|
|
|
</ScrollableList>
|
|
|
|
|
</Column>
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
interface ILogItem {
|
|
|
|
|
log: AdminLog
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const LogItem: React.FC<ILogItem> = ({ log }) => {
|
|
|
|
|
return (
|
|
|
|
|
<Stack space={2} className='p-4'>
|
|
|
|
|
<Text>{log.message}</Text>
|
|
|
|
|
|
|
|
|
|
<Text theme='muted' size='xs'>
|
|
|
|
|
<FormattedDate
|
|
|
|
|
value={new Date(log.time * 1000)}
|
|
|
|
|
hour12
|
|
|
|
|
year='numeric'
|
|
|
|
|
month='short'
|
|
|
|
|
day='2-digit'
|
|
|
|
|
hour='numeric'
|
|
|
|
|
minute='2-digit'
|
|
|
|
|
/>
|
|
|
|
|
</Text>
|
|
|
|
|
</Stack>
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export default ModerationLog;
|
|
|
|
|