2017-05-02 20:04:16 -04:00
import React from 'react' ;
2016-11-20 13:39:18 -05:00
import { connect } from 'react-redux' ;
2020-01-26 06:17:20 -05:00
import classNames from 'classnames' ;
2017-04-21 14:05:35 -04:00
import PropTypes from 'prop-types' ;
2016-11-20 13:39:18 -05:00
import ImmutablePropTypes from 'react-immutable-proptypes' ;
2017-12-04 02:26:40 -05:00
import Column from 'flavours/glitch/components/column' ;
import ColumnHeader from 'flavours/glitch/components/column_header' ;
2017-07-21 14:33:16 -04:00
import {
2017-07-30 12:36:28 -04:00
enterNotificationClearingMode ,
2017-07-21 14:33:16 -04:00
expandNotifications ,
scrollTopNotifications ,
2018-09-06 09:47:13 -04:00
mountNotifications ,
unmountNotifications ,
2019-07-16 00:30:47 -04:00
loadPending ,
2020-09-15 17:42:58 -04:00
markNotificationsAsRead ,
2017-12-04 02:26:40 -05:00
} from 'flavours/glitch/actions/notifications' ;
import { addColumn , removeColumn , moveColumn } from 'flavours/glitch/actions/columns' ;
2017-11-17 22:11:18 -05:00
import NotificationContainer from './containers/notification_container' ;
2017-02-17 20:37:59 -05:00
import { defineMessages , injectIntl , FormattedMessage } from 'react-intl' ;
2017-01-02 08:09:57 -05:00
import ColumnSettingsContainer from './containers/column_settings_container' ;
2018-12-18 11:22:01 -05:00
import FilterBarContainer from './containers/filter_bar_container' ;
2017-01-02 08:09:57 -05:00
import { createSelector } from 'reselect' ;
2017-07-10 19:00:14 -04:00
import { List as ImmutableList } from 'immutable' ;
2017-06-23 20:43:26 -04:00
import { debounce } from 'lodash' ;
2017-12-04 02:26:40 -05:00
import ScrollableList from 'flavours/glitch/components/scrollable_list' ;
2018-05-27 14:23:56 -04:00
import LoadGap from 'flavours/glitch/components/load_gap' ;
2020-01-26 06:17:20 -05:00
import Icon from 'flavours/glitch/components/icon' ;
2020-09-15 12:09:08 -04:00
import compareId from 'flavours/glitch/util/compare_id' ;
2020-01-26 06:17:20 -05:00
import NotificationPurgeButtonsContainer from 'flavours/glitch/containers/notification_purge_buttons_container' ;
2016-11-20 13:39:18 -05:00
const messages = defineMessages ( {
2017-03-02 13:24:12 -05:00
title : { id : 'column.notifications' , defaultMessage : 'Notifications' } ,
2020-01-26 06:17:20 -05:00
enterNotifCleaning : { id : 'notification_purge.start' , defaultMessage : 'Enter notification cleaning mode' } ,
2020-09-15 17:42:58 -04:00
markAsRead : { id : 'notifications.mark_as_read' , defaultMessage : 'Mark every notification as read' } ,
2016-11-20 13:39:18 -05:00
} ) ;
2017-01-02 08:09:57 -05:00
const getNotifications = createSelector ( [
2018-12-18 11:22:01 -05:00
state => state . getIn ( [ 'settings' , 'notifications' , 'quickFilter' , 'show' ] ) ,
state => state . getIn ( [ 'settings' , 'notifications' , 'quickFilter' , 'active' ] ) ,
2017-07-10 19:00:14 -04:00
state => ImmutableList ( state . getIn ( [ 'settings' , 'notifications' , 'shows' ] ) . filter ( item => ! item ) . keys ( ) ) ,
2017-05-20 11:31:47 -04:00
state => state . getIn ( [ 'notifications' , 'items' ] ) ,
2018-12-18 11:22:01 -05: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' ) ) ) ;
}
return notifications . filter ( item => item !== null && allowedType === item . get ( 'type' ) ) ;
} ) ;
2018-05-27 13:30:52 -04:00
2016-11-20 13:39:18 -05:00
const mapStateToProps = state => ( {
2018-12-18 11:22:01 -05:00
showFilterBar : state . getIn ( [ 'settings' , 'notifications' , 'quickFilter' , 'show' ] ) ,
2017-01-25 22:30:40 -05:00
notifications : getNotifications ( state ) ,
2017-07-21 14:33:16 -04:00
localSettings : state . get ( 'local_settings' ) ,
2017-02-20 18:10:49 -05:00
isLoading : state . getIn ( [ 'notifications' , 'isLoading' ] , true ) ,
2019-09-16 09:45:06 -04:00
isUnread : state . getIn ( [ 'notifications' , 'unread' ] ) > 0 || state . getIn ( [ 'notifications' , 'pendingItems' ] ) . size > 0 ,
2018-05-27 13:30:52 -04:00
hasMore : state . getIn ( [ 'notifications' , 'hasMore' ] ) ,
2019-07-16 00:30:47 -04:00
numPending : state . getIn ( [ 'notifications' , 'pendingItems' ] , ImmutableList ( ) ) . size ,
2017-07-21 14:33:16 -04:00
notifCleaningActive : state . getIn ( [ 'notifications' , 'cleaningMode' ] ) ,
2020-09-15 14:54:26 -04:00
lastReadId : state . getIn ( [ 'notifications' , 'readMarkerId' ] ) ,
2020-09-15 17:42:58 -04:00
canMarkAsRead : ! state . getIn ( [ 'notifications' , 'items' ] ) . isEmpty ( ) && state . getIn ( [ 'notifications' , 'readMarkerId' ] ) !== '0' && compareId ( state . getIn ( [ 'notifications' , 'items' ] ) . first ( ) . get ( 'id' ) , state . getIn ( [ 'notifications' , 'readMarkerId' ] ) ) > 0 ,
2016-11-20 13:39:18 -05:00
} ) ;
2017-07-30 12:36:28 -04:00
/* glitch */
const mapDispatchToProps = dispatch => ( {
onEnterCleaningMode ( yes ) {
dispatch ( enterNotificationClearingMode ( yes ) ) ;
} ,
2020-09-15 17:42:58 -04:00
onMarkAsRead ( ) {
dispatch ( markNotificationsAsRead ( ) ) ;
} ,
2018-09-06 09:47:13 -04:00
onMount ( ) {
dispatch ( mountNotifications ( ) ) ;
} ,
onUnmount ( ) {
dispatch ( unmountNotifications ( ) ) ;
} ,
2017-07-30 12:36:28 -04:00
dispatch ,
} ) ;
2019-09-09 09:16:08 -04:00
export default @ connect ( mapStateToProps , mapDispatchToProps )
2017-06-23 13:36:54 -04:00
@ injectIntl
2019-09-09 09:16:08 -04:00
class Notifications extends React . PureComponent {
2016-11-20 13:39:18 -05:00
2017-05-12 08:44:10 -04:00
static propTypes = {
2017-06-03 19:39:38 -04:00
columnId : PropTypes . string ,
2017-05-12 08:44:10 -04:00
notifications : ImmutablePropTypes . list . isRequired ,
2018-12-18 11:22:01 -05:00
showFilterBar : PropTypes . bool . isRequired ,
2017-05-12 08:44:10 -04:00
dispatch : PropTypes . func . isRequired ,
shouldUpdateScroll : PropTypes . func ,
intl : PropTypes . object . isRequired ,
isLoading : PropTypes . bool ,
2017-05-20 11:31:47 -04:00
isUnread : PropTypes . bool ,
2017-06-03 19:39:38 -04:00
multiColumn : PropTypes . bool ,
2017-06-05 13:18:26 -04:00
hasMore : PropTypes . bool ,
2019-07-16 00:30:47 -04:00
numPending : PropTypes . number ,
2017-07-21 14:33:16 -04:00
localSettings : ImmutablePropTypes . map ,
notifCleaningActive : PropTypes . bool ,
2017-07-30 12:36:28 -04:00
onEnterCleaningMode : PropTypes . func ,
2018-09-06 09:47:13 -04:00
onMount : PropTypes . func ,
onUnmount : PropTypes . func ,
2020-09-15 12:09:08 -04:00
lastReadId : PropTypes . string ,
2020-09-15 17:42:58 -04:00
canMarkAsRead : PropTypes . bool ,
2017-05-12 08:44:10 -04:00
} ;
static defaultProps = {
2017-05-20 11:31:47 -04:00
trackScroll : true ,
2017-05-12 08:44:10 -04:00
} ;
2020-01-26 06:17:20 -05:00
state = {
animatingNCD : false ,
} ;
2018-05-27 13:30:52 -04: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-23 20:43:26 -04:00
} , 300 , { leading : true } ) ;
2019-07-16 00:30:47 -04:00
handleLoadPending = ( ) => {
this . props . dispatch ( loadPending ( ) ) ;
} ;
2017-08-28 16:23:44 -04:00
handleScrollToTop = debounce ( ( ) => {
this . props . dispatch ( scrollTopNotifications ( true ) ) ;
2017-06-23 20:43:26 -04:00
} , 100 ) ;
2017-08-28 16:23:44 -04:00
handleScroll = debounce ( ( ) => {
this . props . dispatch ( scrollTopNotifications ( false ) ) ;
} , 100 ) ;
2017-01-30 12:04:15 -05:00
2017-06-03 19:39:38 -04:00
handlePin = ( ) => {
const { columnId , dispatch } = this . props ;
if ( columnId ) {
dispatch ( removeColumn ( columnId ) ) ;
} else {
dispatch ( addColumn ( 'NOTIFICATIONS' , { } ) ) ;
}
}
handleMove = ( dir ) => {
const { columnId , dispatch } = this . props ;
dispatch ( moveColumn ( columnId , dir ) ) ;
}
handleHeaderClick = ( ) => {
this . column . scrollTop ( ) ;
}
setColumnRef = c => {
this . column = c ;
}
2017-10-05 19:07:59 -04:00
handleMoveUp = id => {
2018-05-27 13:30:52 -04:00
const elementIndex = this . props . notifications . findIndex ( item => item !== null && item . get ( 'id' ) === id ) - 1 ;
2019-04-15 14:40:05 -04:00
this . _selectChild ( elementIndex , true ) ;
2017-10-05 19:07:59 -04:00
}
handleMoveDown = id => {
2018-05-27 13:30:52 -04:00
const elementIndex = this . props . notifications . findIndex ( item => item !== null && item . get ( 'id' ) === id ) + 1 ;
2019-04-15 14:40:05 -04:00
this . _selectChild ( elementIndex , false ) ;
2017-10-05 19:07:59 -04:00
}
2019-04-15 14:40:05 -04:00
_selectChild ( index , align _top ) {
const container = this . column . node ;
const element = container . querySelector ( ` article:nth-of-type( ${ index + 1 } ) .focusable ` ) ;
2017-10-05 19:07:59 -04:00
if ( element ) {
2019-04-15 14:40:05 -04: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-05 19:07:59 -04:00
element . focus ( ) ;
}
}
2018-09-06 09:47:13 -04:00
componentDidMount ( ) {
const { onMount } = this . props ;
if ( onMount ) {
onMount ( ) ;
}
}
componentWillUnmount ( ) {
const { onUnmount } = this . props ;
if ( onUnmount ) {
onUnmount ( ) ;
}
}
2020-01-26 06:17:20 -05:00
handleTransitionEndNCD = ( ) => {
this . setState ( { animatingNCD : false } ) ;
}
onEnterCleaningMode = ( ) => {
this . setState ( { animatingNCD : true } ) ;
this . props . onEnterCleaningMode ( ! this . props . notifCleaningActive ) ;
}
2020-09-15 17:42:58 -04:00
handleMarkAsRead = ( ) => {
this . props . onMarkAsRead ( ) ;
}
2016-11-20 13:39:18 -05:00
render ( ) {
2020-09-15 17:42:58 -04:00
const { intl , notifications , shouldUpdateScroll , isLoading , isUnread , columnId , multiColumn , hasMore , numPending , showFilterBar , lastReadId , canMarkAsRead } = this . props ;
2020-01-26 06:17:20 -05:00
const { notifCleaning , notifCleaningActive } = this . props ;
const { animatingNCD } = this . state ;
2017-06-03 19:39:38 -04:00
const pinned = ! ! columnId ;
2017-08-28 16:23:44 -04:00
const emptyMessage = < FormattedMessage id = 'empty_column.notifications' defaultMessage = "You don't have any notifications yet. Interact with others to start the conversation." / > ;
2017-01-30 12:04:15 -05:00
2017-08-28 16:23:44 -04:00
let scrollableContent = null ;
2017-02-20 18:10:49 -05:00
2018-12-18 11:22:01 -05:00
const filterBarContainer = showFilterBar
? ( < FilterBarContainer / > )
: null ;
2017-08-28 16:23:44 -04:00
if ( isLoading && this . scrollableContent ) {
scrollableContent = this . scrollableContent ;
2017-07-05 08:51:53 -04:00
} else if ( notifications . size > 0 || hasMore ) {
2018-05-27 13:30:52 -04: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-05 19:07:59 -04:00
< NotificationContainer
key = { item . get ( 'id' ) }
notification = { item }
accountId = { item . get ( 'account' ) }
onMoveUp = { this . handleMoveUp }
onMoveDown = { this . handleMoveDown }
2020-09-15 14:54:26 -04:00
unread = { lastReadId !== '0' && compareId ( item . get ( 'id' ) , lastReadId ) > 0 }
2017-10-05 19:07:59 -04:00
/ >
) ) ;
2017-02-17 20:37:59 -05:00
} else {
2017-08-28 16:23:44 -04:00
scrollableContent = null ;
2017-02-17 20:37:59 -05:00
}
2016-11-21 04:03:55 -05:00
2017-08-28 16:23:44 -04:00
this . scrollableContent = scrollableContent ;
const scrollContainer = (
< ScrollableList
scrollKey = { ` notifications- ${ columnId } ` }
2017-09-03 14:31:51 -04:00
trackScroll = { ! pinned }
2017-08-28 16:23:44 -04:00
isLoading = { isLoading }
2018-11-10 12:01:39 -05:00
showLoading = { isLoading && notifications . size === 0 }
2017-08-28 16:23:44 -04:00
hasMore = { hasMore }
2019-07-16 00:30:47 -04:00
numPending = { numPending }
2017-08-28 16:23:44 -04:00
emptyMessage = { emptyMessage }
2018-05-27 13:30:52 -04:00
onLoadMore = { this . handleLoadOlder }
2019-07-16 00:30:47 -04:00
onLoadPending = { this . handleLoadPending }
2017-08-28 16:23:44 -04:00
onScrollToTop = { this . handleScrollToTop }
onScroll = { this . handleScroll }
shouldUpdateScroll = { shouldUpdateScroll }
2019-07-19 03:25:22 -04:00
bindToDocument = { ! multiColumn }
2017-08-28 16:23:44 -04:00
>
{ scrollableContent }
< / S c r o l l a b l e L i s t >
) ;
2017-05-19 19:26:46 -04:00
2020-09-15 17:42:58 -04:00
const extraButtons = [ ] ;
if ( canMarkAsRead ) {
extraButtons . push (
< button
aria - label = { intl . formatMessage ( messages . markAsRead ) }
title = { intl . formatMessage ( messages . markAsRead ) }
onClick = { this . handleMarkAsRead }
className = 'column-header__button'
>
< Icon id = 'check' / >
< / b u t t o n >
) ;
}
2020-01-26 06:17:20 -05:00
const notifCleaningButtonClassName = classNames ( 'column-header__button' , {
'active' : notifCleaningActive ,
} ) ;
const notifCleaningDrawerClassName = classNames ( 'ncd column-header__collapsible' , {
'collapsed' : ! notifCleaningActive ,
'animating' : animatingNCD ,
} ) ;
const msgEnterNotifCleaning = intl . formatMessage ( messages . enterNotifCleaning ) ;
2020-09-15 17:42:58 -04:00
extraButtons . push (
2020-01-26 06:17:20 -05:00
< button
aria - label = { msgEnterNotifCleaning }
title = { msgEnterNotifCleaning }
onClick = { this . onEnterCleaningMode }
className = { notifCleaningButtonClassName }
>
< Icon id = 'eraser' / >
< / b u t t o n >
) ;
const notifCleaningDrawer = (
< div className = { notifCleaningDrawerClassName } onTransitionEnd = { this . handleTransitionEndNCD } >
< div className = 'column-header__collapsible-inner nopad-drawer' >
{ ( notifCleaningActive || animatingNCD ) ? ( < NotificationPurgeButtonsContainer / > ) : null }
< / d i v >
< / d i v >
) ;
2017-04-23 22:49:08 -04:00
return (
2017-07-21 14:33:16 -04:00
< Column
2019-08-01 13:17:17 -04:00
bindToDocument = { ! multiColumn }
2017-07-21 14:33:16 -04:00
ref = { this . setColumnRef }
2017-08-06 15:27:47 -04:00
name = 'notifications'
2017-07-30 12:36:28 -04:00
extraClasses = { this . props . notifCleaningActive ? 'notif-cleaning' : null }
2018-08-28 06:01:04 -04:00
label = { intl . formatMessage ( messages . title ) }
2017-07-21 14:33:16 -04:00
>
2017-06-03 19:39:38 -04:00
< ColumnHeader
icon = 'bell'
active = { isUnread }
title = { intl . formatMessage ( messages . title ) }
onPin = { this . handlePin }
onMove = { this . handleMove }
onClick = { this . handleHeaderClick }
pinned = { pinned }
multiColumn = { multiColumn }
2017-07-21 14:33:16 -04:00
localSettings = { this . props . localSettings }
2020-09-15 17:42:58 -04:00
extraButton = { extraButtons }
2020-01-26 06:17:20 -05:00
appendContent = { notifCleaningDrawer }
2017-06-03 19:39:38 -04:00
>
< ColumnSettingsContainer / >
< / C o l u m n H e a d e r >
2018-12-18 11:22:01 -05:00
{ filterBarContainer }
2017-06-05 09:20:46 -04:00
{ scrollContainer }
2017-04-23 22:49:08 -04:00
< / C o l u m n >
) ;
2016-11-20 13:39:18 -05:00
}
2017-04-21 14:05:35 -04:00
}