2022-05-30 19:03:52 +00:00
import React , { useEffect , useState } from 'react' ;
import { defineMessages , FormattedDate , useIntl } from 'react-intl' ;
import { fetchModerationLog } from 'soapbox/actions/admin' ;
2022-11-15 16:00:49 +00:00
import ScrollableList from 'soapbox/components/scrollable-list' ;
2022-12-17 21:23:18 +00:00
import { Column , Stack , Text } from 'soapbox/components/ui' ;
2022-05-30 19:03:52 +00:00
import { useAppDispatch , useAppSelector } from 'soapbox/hooks' ;
2022-12-17 21:23:18 +00:00
import { AdminLog } from 'soapbox/types/entities' ;
2022-05-30 19:03:52 +00:00
const messages = defineMessages ( {
heading : { id : 'column.admin.moderation_log' , defaultMessage : 'Moderation Log' } ,
emptyMessage : { id : 'admin.moderation_log.empty_message' , defaultMessage : 'You have not performed any moderation actions yet. When you do, a history will be shown here.' } ,
} ) ;
const ModerationLog = ( ) = > {
const intl = useIntl ( ) ;
const dispatch = useAppDispatch ( ) ;
2023-02-20 22:52:16 +00:00
const items = useAppSelector ( ( state ) = > state . admin_log . index . map ( ( i ) = > state . admin_log . items . get ( String ( i ) ) ) ) ;
2022-12-17 21:23:18 +00:00
2022-06-05 14:17:26 +00:00
const hasMore = useAppSelector ( ( state ) = > state . admin_log . total - state . admin_log . index . count ( ) > 0 ) ;
2022-05-30 19:03:52 +00:00
const [ isLoading , setIsLoading ] = useState ( true ) ;
const [ lastPage , setLastPage ] = useState ( 0 ) ;
const showLoading = isLoading && items . count ( ) === 0 ;
useEffect ( ( ) = > {
dispatch ( fetchModerationLog ( ) )
. then ( ( ) = > {
setIsLoading ( false ) ;
setLastPage ( 1 ) ;
} )
2022-10-14 15:38:37 +00:00
. catch ( ( ) = > { } ) ;
2022-05-30 19:03:52 +00:00
} , [ ] ) ;
const handleLoadMore = ( ) = > {
const page = lastPage + 1 ;
setIsLoading ( true ) ;
dispatch ( fetchModerationLog ( { page } ) )
. then ( ( ) = > {
setIsLoading ( false ) ;
setLastPage ( page ) ;
2022-10-14 15:38:37 +00:00
} ) . catch ( ( ) = > { } ) ;
2022-05-30 19:03:52 +00:00
} ;
return (
2022-11-30 17:19:16 +00:00
< Column label = { intl . formatMessage ( messages . heading ) } >
2022-05-30 19:03:52 +00:00
< ScrollableList
isLoading = { isLoading }
showLoading = { showLoading }
scrollKey = 'moderation-log'
emptyMessage = { intl . formatMessage ( messages . emptyMessage ) }
hasMore = { hasMore }
onLoadMore = { handleLoadMore }
2022-12-17 21:23:18 +00:00
className = 'divide-y divide-solid divide-gray-200 dark:divide-gray-800'
2022-05-30 19:03:52 +00:00
>
2022-12-17 21:23:18 +00:00
{ items . map ( item = > item && (
< LogItem key = { item . id } log = { item } / >
2022-05-30 19:03:52 +00:00
) ) }
< / ScrollableList >
< / Column >
) ;
} ;
2022-12-17 21:23:18 +00:00
interface ILogItem {
log : AdminLog
}
2023-02-20 22:52:16 +00:00
const LogItem : React.FC < ILogItem > = ( { log } ) = > (
< Stack space = { 2 } className = 'p-4' >
< Text > { log . message } < / Text >
2022-12-17 21:23:18 +00:00
2023-02-20 22:52:16 +00:00
< 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 >
) ;
2022-12-17 21:23:18 +00:00
2022-05-30 19:03:52 +00:00
export default ModerationLog ;