2017-04-22 03:05:35 +09:00
import PropTypes from 'prop-types' ;
2023-05-24 00:15:17 +09:00
import { PureComponent } from 'react' ;
import { defineMessages , injectIntl , FormattedMessage } from 'react-intl' ;
import { Helmet } from 'react-helmet' ;
2024-01-08 19:57:40 +09:00
import { createSelector } from '@reduxjs/toolkit' ;
2023-05-24 00:15:17 +09:00
import { List as ImmutableList } from 'immutable' ;
2016-11-21 03:39:18 +09:00
import ImmutablePropTypes from 'react-immutable-proptypes' ;
2023-05-24 00:15:17 +09:00
import { connect } from 'react-redux' ;
import { debounce } from 'lodash' ;
2024-01-16 19:27:26 +09:00
import DoneAllIcon from '@/material-icons/400-24px/done_all.svg?react' ;
import NotificationsIcon from '@/material-icons/400-24px/notifications-fill.svg?react' ;
2023-05-24 00:15:17 +09:00
import { compareId } from 'mastodon/compare_id' ;
import { Icon } from 'mastodon/components/icon' ;
import { NotSignedInIndicator } from 'mastodon/components/not_signed_in_indicator' ;
import { addColumn , removeColumn , moveColumn } from '../../actions/columns' ;
import { submitMarkers } from '../../actions/markers' ;
2020-09-27 03:57:07 +09:00
import {
expandNotifications ,
scrollTopNotifications ,
loadPending ,
mountNotifications ,
unmountNotifications ,
markNotificationsAsRead ,
} from '../../actions/notifications' ;
2023-05-24 00:15:17 +09:00
import Column from '../../components/column' ;
import ColumnHeader from '../../components/column_header' ;
2023-05-24 16:20:39 +09:00
import { LoadGap } from '../../components/load_gap' ;
2023-05-24 00:15:17 +09:00
import ScrollableList from '../../components/scrollable_list' ;
2020-10-15 23:24:47 +09:00
import NotificationsPermissionBanner from './components/notifications_permission_banner' ;
2023-05-24 00:15:17 +09:00
import ColumnSettingsContainer from './containers/column_settings_container' ;
import FilterBarContainer from './containers/filter_bar_container' ;
import NotificationContainer from './containers/notification_container' ;
2016-11-21 03:39:18 +09:00
const messages = defineMessages ( {
2017-03-03 03:24:12 +09:00
title : { id : 'column.notifications' , defaultMessage : 'Notifications' } ,
2020-09-27 03:57:07 +09:00
markAsRead : { id : 'notifications.mark_as_read' , defaultMessage : 'Mark every notification as read' } ,
2016-11-21 03:39:18 +09:00
} ) ;
2020-12-10 03:16:30 +09:00
const getExcludedTypes = createSelector ( [
state => state . getIn ( [ 'settings' , 'notifications' , 'shows' ] ) ,
] , ( shows ) => {
return ImmutableList ( shows . filter ( item => ! item ) . keys ( ) ) ;
} ) ;
2017-01-02 22:09:57 +09:00
const getNotifications = createSelector ( [
2018-12-16 13:56:41 +09:00
state => state . getIn ( [ 'settings' , 'notifications' , 'quickFilter' , 'show' ] ) ,
state => state . getIn ( [ 'settings' , 'notifications' , 'quickFilter' , 'active' ] ) ,
2020-12-10 03:16:30 +09:00
getExcludedTypes ,
2017-05-21 00:31:47 +09:00
state => state . getIn ( [ 'notifications' , 'items' ] ) ,
2018-12-16 13:56:41 +09:00
] , ( showFilterBar , allowedType , excludedTypes , notifications ) => {
if ( ! showFilterBar || allowedType === 'all' ) {
// used if user changed the notification settings after loading the notifications from the server
// otherwise a list of notifications will come pre-filtered from the backend
// we need to turn it off for FilterBar in order not to block ourselves from seeing a specific category
return notifications . filterNot ( item => item !== null && excludedTypes . includes ( item . get ( 'type' ) ) ) ;
}
2020-09-17 03:17:16 +09:00
return notifications . filter ( item => item === null || allowedType === item . get ( 'type' ) ) ;
2018-12-16 13:56:41 +09:00
} ) ;
2018-03-25 06:07:23 +09:00
2016-11-21 03:39:18 +09:00
const mapStateToProps = state => ( {
2018-12-16 13:56:41 +09:00
showFilterBar : state . getIn ( [ 'settings' , 'notifications' , 'quickFilter' , 'show' ] ) ,
2017-01-26 12:30:40 +09:00
notifications : getNotifications ( state ) ,
2022-11-05 21:45:06 +09:00
isLoading : state . getIn ( [ 'notifications' , 'isLoading' ] , 0 ) > 0 ,
2019-09-16 22:45:06 +09:00
isUnread : state . getIn ( [ 'notifications' , 'unread' ] ) > 0 || state . getIn ( [ 'notifications' , 'pendingItems' ] ) . size > 0 ,
2018-03-25 06:07:23 +09:00
hasMore : state . getIn ( [ 'notifications' , 'hasMore' ] ) ,
2019-07-16 13:30:47 +09:00
numPending : state . getIn ( [ 'notifications' , 'pendingItems' ] , ImmutableList ( ) ) . size ,
2021-03-19 10:44:57 +09:00
lastReadId : state . getIn ( [ 'settings' , 'notifications' , 'showUnread' ] ) ? state . getIn ( [ 'notifications' , 'readMarkerId' ] ) : '0' ,
canMarkAsRead : state . getIn ( [ 'settings' , 'notifications' , 'showUnread' ] ) && state . getIn ( [ 'notifications' , 'readMarkerId' ] ) !== '0' && getNotifications ( state ) . some ( item => item !== null && compareId ( item . get ( 'id' ) , state . getIn ( [ 'notifications' , 'readMarkerId' ] ) ) > 0 ) ,
2020-12-16 02:43:54 +09:00
needsNotificationPermission : state . getIn ( [ 'settings' , 'notifications' , 'alerts' ] ) . includes ( true ) && state . getIn ( [ 'notifications' , 'browserSupport' ] ) && state . getIn ( [ 'notifications' , 'browserPermission' ] ) === 'default' && ! state . getIn ( [ 'settings' , 'notifications' , 'dismissPermissionBanner' ] ) ,
2016-11-21 03:39:18 +09:00
} ) ;
2023-05-23 17:52:27 +09:00
class Notifications extends PureComponent {
2016-11-21 03:39:18 +09:00
2022-10-05 03:13:23 +09:00
static contextTypes = {
identity : PropTypes . object ,
} ;
2017-05-12 21:44:10 +09:00
static propTypes = {
2017-06-04 08:39:38 +09:00
columnId : PropTypes . string ,
2017-05-12 21:44:10 +09:00
notifications : ImmutablePropTypes . list . isRequired ,
2018-12-16 13:56:41 +09:00
showFilterBar : PropTypes . bool . isRequired ,
2017-05-12 21:44:10 +09:00
dispatch : PropTypes . func . isRequired ,
intl : PropTypes . object . isRequired ,
isLoading : PropTypes . bool ,
2017-05-21 00:31:47 +09:00
isUnread : PropTypes . bool ,
2017-06-04 08:39:38 +09:00
multiColumn : PropTypes . bool ,
2017-06-06 02:18:26 +09:00
hasMore : PropTypes . bool ,
2019-07-16 13:30:47 +09:00
numPending : PropTypes . number ,
2020-09-27 03:57:07 +09:00
lastReadId : PropTypes . string ,
canMarkAsRead : PropTypes . bool ,
2020-10-13 07:37:21 +09:00
needsNotificationPermission : PropTypes . bool ,
2017-05-12 21:44:10 +09:00
} ;
static defaultProps = {
2017-05-21 00:31:47 +09:00
trackScroll : true ,
2017-05-12 21:44:10 +09:00
} ;
2023-05-10 16:05:32 +09:00
UNSAFE _componentWillMount ( ) {
2019-09-21 16:12:13 +09:00
this . props . dispatch ( mountNotifications ( ) ) ;
}
2018-03-04 16:55:15 +09:00
componentWillUnmount ( ) {
2018-03-25 06:07:23 +09:00
this . handleLoadOlder . cancel ( ) ;
2018-03-04 16:55:15 +09:00
this . handleScrollToTop . cancel ( ) ;
this . handleScroll . cancel ( ) ;
this . props . dispatch ( scrollTopNotifications ( false ) ) ;
2019-09-21 16:12:13 +09:00
this . props . dispatch ( unmountNotifications ( ) ) ;
2018-03-04 16:55:15 +09:00
}
2018-03-25 06:07:23 +09:00
handleLoadGap = ( maxId ) => {
this . props . dispatch ( expandNotifications ( { maxId } ) ) ;
} ;
handleLoadOlder = debounce ( ( ) => {
const last = this . props . notifications . last ( ) ;
this . props . dispatch ( expandNotifications ( { maxId : last && last . get ( 'id' ) } ) ) ;
2017-06-24 09:43:26 +09:00
} , 300 , { leading : true } ) ;
2019-07-16 13:30:47 +09:00
handleLoadPending = ( ) => {
this . props . dispatch ( loadPending ( ) ) ;
} ;
2017-08-29 05:23:44 +09:00
handleScrollToTop = debounce ( ( ) => {
this . props . dispatch ( scrollTopNotifications ( true ) ) ;
2017-06-24 09:43:26 +09:00
} , 100 ) ;
2017-08-29 05:23:44 +09:00
handleScroll = debounce ( ( ) => {
this . props . dispatch ( scrollTopNotifications ( false ) ) ;
} , 100 ) ;
2017-01-31 02:04:15 +09:00
2017-06-04 08:39:38 +09:00
handlePin = ( ) => {
const { columnId , dispatch } = this . props ;
if ( columnId ) {
dispatch ( removeColumn ( columnId ) ) ;
} else {
dispatch ( addColumn ( 'NOTIFICATIONS' , { } ) ) ;
}
2023-01-30 09:45:35 +09:00
} ;
2017-06-04 08:39:38 +09:00
handleMove = ( dir ) => {
const { columnId , dispatch } = this . props ;
dispatch ( moveColumn ( columnId , dir ) ) ;
2023-01-30 09:45:35 +09:00
} ;
2017-06-04 08:39:38 +09:00
handleHeaderClick = ( ) => {
this . column . scrollTop ( ) ;
2023-01-30 09:45:35 +09:00
} ;
2017-06-04 08:39:38 +09:00
setColumnRef = c => {
this . column = c ;
2023-01-30 09:45:35 +09:00
} ;
2017-06-04 08:39:38 +09:00
2017-10-06 08:07:59 +09:00
handleMoveUp = id => {
2018-03-25 06:07:23 +09:00
const elementIndex = this . props . notifications . findIndex ( item => item !== null && item . get ( 'id' ) === id ) - 1 ;
2019-05-03 13:20:36 +09:00
this . _selectChild ( elementIndex , true ) ;
2023-01-30 09:45:35 +09:00
} ;
2017-10-06 08:07:59 +09:00
handleMoveDown = id => {
2018-03-25 06:07:23 +09:00
const elementIndex = this . props . notifications . findIndex ( item => item !== null && item . get ( 'id' ) === id ) + 1 ;
2019-05-03 13:20:36 +09:00
this . _selectChild ( elementIndex , false ) ;
2023-01-30 09:45:35 +09:00
} ;
2017-10-06 08:07:59 +09:00
2019-05-03 13:20:36 +09:00
_selectChild ( index , align _top ) {
const container = this . column . node ;
const element = container . querySelector ( ` article:nth-of-type( ${ index + 1 } ) .focusable ` ) ;
2017-10-06 08:07:59 +09:00
if ( element ) {
2019-05-03 13:20:36 +09:00
if ( align _top && container . scrollTop > element . offsetTop ) {
element . scrollIntoView ( true ) ;
} else if ( ! align _top && container . scrollTop + container . clientHeight < element . offsetTop + element . offsetHeight ) {
element . scrollIntoView ( false ) ;
}
2017-10-06 08:07:59 +09:00
element . focus ( ) ;
}
}
2020-09-27 03:57:07 +09:00
handleMarkAsRead = ( ) => {
this . props . dispatch ( markNotificationsAsRead ( ) ) ;
2020-10-01 11:17:46 +09:00
this . props . dispatch ( submitMarkers ( { immediate : true } ) ) ;
2020-09-27 03:57:07 +09:00
} ;
2016-11-21 03:39:18 +09:00
render ( ) {
2021-07-13 22:45:17 +09:00
const { intl , notifications , isLoading , isUnread , columnId , multiColumn , hasMore , numPending , showFilterBar , lastReadId , canMarkAsRead , needsNotificationPermission } = this . props ;
2017-06-04 08:39:38 +09:00
const pinned = ! ! columnId ;
2021-05-07 21:33:57 +09:00
const emptyMessage = < FormattedMessage id = 'empty_column.notifications' defaultMessage = "You don't have any notifications yet. When other people interact with you, you will see it here." / > ;
2022-10-05 03:13:23 +09:00
const { signedIn } = this . context . identity ;
2017-01-31 02:04:15 +09:00
2017-08-29 05:23:44 +09:00
let scrollableContent = null ;
2017-01-31 02:04:15 +09:00
2022-10-05 03:13:23 +09:00
const filterBarContainer = ( signedIn && showFilterBar )
2018-12-16 13:56:41 +09:00
? ( < FilterBarContainer / > )
: null ;
2017-08-29 05:23:44 +09:00
if ( isLoading && this . scrollableContent ) {
scrollableContent = this . scrollableContent ;
2017-07-05 21:51:53 +09:00
} else if ( notifications . size > 0 || hasMore ) {
2018-03-25 06:07:23 +09:00
scrollableContent = notifications . map ( ( item , index ) => item === null ? (
< LoadGap
key = { 'gap:' + notifications . getIn ( [ index + 1 , 'id' ] ) }
disabled = { isLoading }
maxId = { index > 0 ? notifications . getIn ( [ index - 1 , 'id' ] ) : null }
onClick = { this . handleLoadGap }
/ >
) : (
2017-10-06 08:07:59 +09:00
< NotificationContainer
key = { item . get ( 'id' ) }
notification = { item }
accountId = { item . get ( 'account' ) }
onMoveUp = { this . handleMoveUp }
onMoveDown = { this . handleMoveDown }
2020-09-27 03:57:07 +09:00
unread = { lastReadId !== '0' && compareId ( item . get ( 'id' ) , lastReadId ) > 0 }
2017-10-06 08:07:59 +09:00
/ >
) ) ;
2017-02-18 10:37:59 +09:00
} else {
2017-08-29 05:23:44 +09:00
scrollableContent = null ;
2017-02-18 10:37:59 +09:00
}
2016-11-21 18:03:55 +09:00
2017-08-29 05:23:44 +09:00
this . scrollableContent = scrollableContent ;
2022-10-05 03:13:23 +09:00
let scrollContainer ;
if ( signedIn ) {
scrollContainer = (
< ScrollableList
scrollKey = { ` notifications- ${ columnId } ` }
trackScroll = { ! pinned }
isLoading = { isLoading }
showLoading = { isLoading && notifications . size === 0 }
hasMore = { hasMore }
numPending = { numPending }
prepend = { needsNotificationPermission && < NotificationsPermissionBanner / > }
alwaysPrepend
emptyMessage = { emptyMessage }
onLoadMore = { this . handleLoadOlder }
onLoadPending = { this . handleLoadPending }
onScrollToTop = { this . handleScrollToTop }
onScroll = { this . handleScroll }
bindToDocument = { ! multiColumn }
>
{ scrollableContent }
< / ScrollableList >
) ;
} else {
scrollContainer = < NotSignedInIndicator / > ;
}
2017-05-20 08:26:46 +09:00
2020-09-27 03:57:07 +09:00
let extraButton = null ;
if ( canMarkAsRead ) {
extraButton = (
< button
aria - label = { intl . formatMessage ( messages . markAsRead ) }
title = { intl . formatMessage ( messages . markAsRead ) }
onClick = { this . handleMarkAsRead }
className = 'column-header__button'
>
2023-10-25 02:45:08 +09:00
< Icon id = 'done-all' icon = { DoneAllIcon } / >
2020-09-27 03:57:07 +09:00
< / button >
) ;
}
2017-04-24 11:49:08 +09:00
return (
2019-08-02 02:17:17 +09:00
< Column bindToDocument = { ! multiColumn } ref = { this . setColumnRef } label = { intl . formatMessage ( messages . title ) } >
2017-06-04 08:39:38 +09:00
< ColumnHeader
icon = 'bell'
2023-10-25 02:45:08 +09:00
iconComponent = { NotificationsIcon }
2017-06-04 08:39:38 +09:00
active = { isUnread }
title = { intl . formatMessage ( messages . title ) }
onPin = { this . handlePin }
onMove = { this . handleMove }
onClick = { this . handleHeaderClick }
pinned = { pinned }
multiColumn = { multiColumn }
2020-09-27 03:57:07 +09:00
extraButton = { extraButton }
2017-06-04 08:39:38 +09:00
>
< ColumnSettingsContainer / >
< / ColumnHeader >
2022-10-05 03:13:23 +09:00
2018-12-16 13:56:41 +09:00
{ filterBarContainer }
2017-06-05 22:20:46 +09:00
{ scrollContainer }
2022-10-05 03:13:23 +09:00
< Helmet >
2022-10-09 10:55:09 +09:00
< title > { intl . formatMessage ( messages . title ) } < / title >
2022-10-20 21:35:29 +09:00
< meta name = 'robots' content = 'noindex' / >
2022-10-05 03:13:23 +09:00
< / Helmet >
2017-04-24 11:49:08 +09:00
< / Column >
) ;
2016-11-21 03:39:18 +09:00
}
2017-04-22 03:05:35 +09:00
}
2023-03-24 11:17:53 +09:00
export default connect ( mapStateToProps ) ( injectIntl ( Notifications ) ) ;