@ -1,3 +1,4 @@
import classNames from 'classnames' ;
import { List as ImmutableList } from 'immutable' ;
import { debounce } from 'lodash' ;
import PropTypes from 'prop-types' ;
@ -5,11 +6,9 @@ import React from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes' ;
import { defineMessages , injectIntl , FormattedMessage } from 'react-intl' ;
import { connect } from 'react-redux' ;
import { Virtuoso } from 'react-virtuoso' ;
import { createSelector } from 'reselect' ;
import { getSettings } from 'soapbox/actions/settings' ;
import PullToRefresh from 'soapbox/components/pull-to-refresh' ;
import PlaceholderNotification from 'soapbox/features/placeholder/components/placeholder_notification' ;
import {
@ -17,8 +16,9 @@ import {
scrollTopNotifications ,
dequeueNotifications ,
} from '../../actions/notifications' ;
import ScrollableList from '../../components/scrollable_list' ;
import TimelineQueueButtonHeader from '../../components/timeline_queue_button_header' ;
import { Column , Text } from '../../components/ui' ;
import { Column } from '../../components/ui' ;
import FilterBarContainer from './containers/filter_bar_container' ;
import NotificationContainer from './containers/notification_container' ;
@ -28,16 +28,6 @@ const messages = defineMessages({
queue : { id : 'notifications.queue_label' , defaultMessage : 'Click to see {count} new {count, plural, one {notification} other {notifications}}' } ,
} ) ;
const Footer = ( { context } ) => (
context . hasMore ? (
< PlaceholderNotification / >
) : null
) ;
const Item = ( { context , ... rest } ) => (
< div className = 'border-solid border-b border-gray-200 dark:border-slate-700' { ... rest } / >
) ;
const getNotifications = createSelector ( [
state => getSettings ( state ) . getIn ( [ 'notifications' , 'quickFilter' , 'show' ] ) ,
state => getSettings ( state ) . getIn ( [ 'notifications' , 'quickFilter' , 'active' ] ) ,
@ -157,44 +147,49 @@ class Notifications extends React.PureComponent {
const { intl , notifications , isLoading , hasMore , showFilterBar , totalQueuedNotificationsCount } = this . props ;
const emptyMessage = < FormattedMessage id = 'empty_column.notifications' defaultMessage = "You don't have any notifications yet. Interact with others to start the conversation." / > ;
let scrollableContent = null ;
const filterBarContainer = showFilterBar
? ( < FilterBarContainer / > )
: null ;
const showLoading = isLoading && ! notifications || notifications . isEmpty ( ) ;
const scrollContainer = (
< PullToRefresh onRefresh = { this . handleRefresh } >
< Virtuoso
ref = { this . setRef }
useWindowScroll
data = { showLoading ? Array ( 20 ) . fill ( ) : notifications . toArray ( ) }
startReached = { this . handleScrollToTop }
endReached = { this . handleLoadOlder }
isScrolling = { isScrolling => isScrolling && this . handleScroll ( ) }
itemContent = { ( _index , notification ) => (
showLoading ? (
< PlaceholderNotification / >
) : (
< NotificationContainer
key = { notification . id }
notification = { notification }
onMoveUp = { this . handleMoveUp }
onMoveDown = { this . handleMoveDown }
/ >
)
) }
context = { {
hasMore ,
} }
components = { {
ScrollSeekPlaceholder : PlaceholderNotification ,
Footer ,
EmptyPlaceholder : ( ) => < Text > { emptyMessage } < / T e x t > ,
Item ,
} }
if ( isLoading && this . scrollableContent ) {
scrollableContent = this . scrollableContent ;
} else if ( notifications . size > 0 || hasMore ) {
scrollableContent = notifications . map ( ( item , index ) => (
< NotificationContainer
key = { item . get ( 'id' ) }
notification = { item }
onMoveUp = { this . handleMoveUp }
onMoveDown = { this . handleMoveDown }
/ >
< / P u l l T o R e f r e s h >
) ) ;
} else {
scrollableContent = null ;
}
this . scrollableContent = scrollableContent ;
const scrollContainer = (
< ScrollableList
scrollKey = 'notifications'
isLoading = { isLoading }
showLoading = { isLoading && notifications . size === 0 }
hasMore = { hasMore }
emptyMessage = { emptyMessage }
placeholderComponent = { PlaceholderNotification }
placeholderCount = { 20 }
onLoadMore = { this . handleLoadOlder }
onRefresh = { this . handleRefresh }
onScrollToTop = { this . handleScrollToTop }
onScroll = { this . handleScroll }
className = { classNames ( {
'divide-y divide-gray-200 dark:divide-gray-600 divide-solid' : notifications . size > 0 ,
'space-y-2' : notifications . size === 0 ,
} ) }
>
{ scrollableContent }
< / S c r o l l a b l e L i s t >
) ;
return (