2024-03-11 15:02:21 +00:00
import { useEffect } from 'react' ;
import { FormattedMessage } from 'react-intl' ;
import { Link } from 'react-router-dom' ;
import { useDispatch , useSelector } from 'react-redux' ;
2024-03-19 15:39:26 +00:00
import InventoryIcon from '@/material-icons/400-24px/inventory_2.svg?react' ;
2024-03-11 15:02:21 +00:00
import { fetchNotificationPolicy } from 'mastodon/actions/notifications' ;
import { Icon } from 'mastodon/components/icon' ;
import { toCappedNumber } from 'mastodon/utils/numbers' ;
export const FilteredNotificationsBanner = ( ) => {
const dispatch = useDispatch ( ) ;
const policy = useSelector ( state => state . get ( 'notificationPolicy' ) ) ;
useEffect ( ( ) => {
dispatch ( fetchNotificationPolicy ( ) ) ;
const interval = setInterval ( ( ) => {
dispatch ( fetchNotificationPolicy ( ) ) ;
} , 120000 ) ;
return ( ) => {
clearInterval ( interval ) ;
} ;
} , [ dispatch ] ) ;
if ( policy === null || policy . getIn ( [ 'summary' , 'pending_notifications_count' ] ) * 1 === 0 ) {
return null ;
}
return (
< Link className = 'filtered-notifications-banner' to = '/notifications/requests' >
2024-03-19 15:39:26 +00:00
< Icon icon = { InventoryIcon } / >
2024-03-11 15:02:21 +00:00
< div className = 'filtered-notifications-banner__text' >
< strong > < FormattedMessage id = 'filtered_notifications_banner.title' defaultMessage = 'Filtered notifications' / > < / strong >
2024-03-12 09:42:51 +00:00
< span > < FormattedMessage id = 'filtered_notifications_banner.pending_requests' defaultMessage = 'Notifications from {count, plural, =0 {no one} one {one person} other {# people}} you may know' values = { { count : policy . getIn ( [ 'summary' , 'pending_requests_count' ] ) } } / > < / span >
2024-03-11 15:02:21 +00:00
< / div >
< div className = 'filtered-notifications-banner__badge' >
{ toCappedNumber ( policy . getIn ( [ 'summary' , 'pending_notifications_count' ] ) ) }
< / div >
< / Link >
) ;
} ;