gab-social/app/javascript/gabsocial/features/notifications.js

216 lines
7.1 KiB
JavaScript
Raw Normal View History

import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import { withRouter } from 'react-router-dom'
2020-03-04 03:45:16 +00:00
import ImmutablePropTypes from 'react-immutable-proptypes'
import ImmutablePureComponent from 'react-immutable-pure-component'
import { FormattedMessage } from 'react-intl'
2020-04-08 02:06:59 +01:00
import debounce from 'lodash.debounce'
import throttle from 'lodash.throttle'
2019-08-13 16:54:29 +01:00
import {
expandNotifications,
scrollTopNotifications,
dequeueNotifications,
forceDequeueNotifications,
2020-04-24 04:17:27 +01:00
} from '../actions/notifications'
import {
TIMELINE_INJECTION_FEATURED_GROUPS,
TIMELINE_INJECTION_GROUP_CATEGORIES,
TIMELINE_INJECTION_USER_SUGGESTIONS,
} from '../constants'
2020-04-24 04:17:27 +01:00
import NotificationContainer from '../containers/notification_container'
import ScrollableList from '../components/scrollable_list'
import TimelineQueueButtonHeader from '../components/timeline_queue_button_header'
import Block from '../components/block'
import Account from '../components/account'
import NotificationPlaceholder from '../components/placeholder/notification_placeholder'
import TimelineInjectionRoot from '../components/timeline_injections/timeline_injection_root'
2019-08-13 16:54:29 +01:00
class Notifications extends ImmutablePureComponent {
state = {
changedTabs: false,
}
componentWillUnmount() {
2020-03-04 03:45:16 +00:00
this.handleLoadOlder.cancel()
this.handleScrollToTop.cancel()
this.handleScroll.cancel()
this.props.onScrollTopNotifications(false)
2019-08-13 16:54:29 +01:00
}
componentDidMount() {
2020-03-04 03:45:16 +00:00
this.handleDequeueNotifications()
this.props.onScrollTopNotifications(true)
2019-08-13 16:54:29 +01:00
}
componentDidUpdate (prevProps, prevState) {
//Check if clicked on "notifications" button, if so, reload
if (prevProps.location.key !== this.props.location.key &&
prevProps.location.pathname === '/notifications' &&
this.props.location.pathname === '/notifications') {
this.handleReload()
}
if (prevProps.selectedFilter !== this.props.selectedFilter) {
this.setState({ changedTabs: true })
}
if (prevProps.selectedFilter === this.props.selectedFilter && prevState.changedTabs) {
this.setState({ changedTabs: false })
}
}
handleReload = throttle(() => {
this.props.onExpandNotifications()
}, 5000)
2019-08-13 16:54:29 +01:00
handleLoadOlder = debounce(() => {
2020-03-04 03:45:16 +00:00
const last = this.props.notifications.last()
this.props.onExpandNotifications({ maxId: last && last.get('id') })
2020-03-04 03:45:16 +00:00
}, 300, { leading: true })
2019-08-13 16:54:29 +01:00
handleScrollToTop = debounce(() => {
this.props.onScrollTopNotifications(true)
2020-03-04 03:45:16 +00:00
}, 100)
2019-08-13 16:54:29 +01:00
handleScroll = debounce(() => {
this.props.onScrollTopNotifications(false)
2020-03-04 03:45:16 +00:00
}, 100)
2019-08-13 16:54:29 +01:00
handleDequeueNotifications = () => {
this.props.onDequeueNotifications()
2020-03-04 03:45:16 +00:00
}
2019-08-13 16:54:29 +01:00
render() {
2020-03-04 03:45:16 +00:00
const {
notifications,
sortedNotifications,
2020-03-04 03:45:16 +00:00
isLoading,
hasMore,
totalQueuedNotificationsCount,
selectedFilter,
2020-03-04 03:45:16 +00:00
} = this.props
const { changedTabs } = this.state
2020-03-04 03:45:16 +00:00
let scrollableContent = null
let emptyContent = []
const canShowEmptyContent = !scrollableContent && !isLoading && notifications.size === 0 && selectedFilter === 'all'
2019-08-13 16:54:29 +01:00
if (isLoading && this.scrollableContent && !changedTabs) {
2020-03-04 03:45:16 +00:00
scrollableContent = this.scrollableContent
} else if ((sortedNotifications.size > 0 || hasMore) && selectedFilter !== 'follow' && !changedTabs) {
scrollableContent = sortedNotifications.map((item, index) => (
2019-08-13 16:54:29 +01:00
<NotificationContainer
2020-03-04 03:45:16 +00:00
key={`notification-${index}`}
2019-08-13 16:54:29 +01:00
notification={item}
/>
2020-03-04 03:45:16 +00:00
))
} else if ((sortedNotifications.size > 0 || hasMore) && selectedFilter === 'follow' && !changedTabs) {
const followNotifications = []
sortedNotifications.forEach((block) => {
if (block) {
const followBlock = block.get('follow')
if (followBlock && followBlock.size > 0) {
followBlock.forEach((item) => {
followNotifications.push(item)
})
}
}
})
scrollableContent = followNotifications.map((item, index) => {
return (
<Account
compact
withBio
key={`account-${index}`}
id={item.get('account')}
/>
)
})
2019-08-13 16:54:29 +01:00
}
if (canShowEmptyContent) {
emptyContent = [
<TimelineInjectionRoot type={TIMELINE_INJECTION_USER_SUGGESTIONS} key='empty-injection-0' />,
<TimelineInjectionRoot type={TIMELINE_INJECTION_FEATURED_GROUPS} key='empty-injection-1' />,
<TimelineInjectionRoot type={TIMELINE_INJECTION_USER_SUGGESTIONS} props={{suggestionType:'verified'}} key='empty-injection-2' />,
<TimelineInjectionRoot type={TIMELINE_INJECTION_GROUP_CATEGORIES} key='empty-injection-3' />,
]
}
2020-03-04 03:45:16 +00:00
this.scrollableContent = scrollableContent
2019-08-13 16:54:29 +01:00
return (
<React.Fragment>
2020-03-02 22:26:25 +00:00
<TimelineQueueButtonHeader
onClick={this.handleDequeueNotifications}
count={totalQueuedNotificationsCount}
itemType='notification'
/>
2020-03-04 03:45:16 +00:00
<Block>
<ScrollableList
scrollKey='notifications'
isLoading={isLoading}
showLoading={isLoading && sortedNotifications.size === 0 || changedTabs}
2020-03-04 03:45:16 +00:00
hasMore={hasMore}
emptyMessage={<FormattedMessage id='empty_column.notifications' defaultMessage="You don't have any notifications yet. Interact with others to start the conversation." />}
onLoadMore={this.handleLoadOlder}
onScrollToTop={this.handleScrollToTop}
onScroll={this.handleScroll}
placeholderComponent={NotificationPlaceholder}
placeholderCount={3}
2020-03-04 03:45:16 +00:00
>
{scrollableContent}
2020-03-04 03:45:16 +00:00
</ScrollableList>
</Block>
{
canShowEmptyContent &&
<div className={[_s.d, _s.mt15, _s.w100PC].join(' ')}>
{emptyContent}
</div>
}
</React.Fragment>
2020-03-02 22:26:25 +00:00
)
2019-08-13 16:54:29 +01:00
}
}
const mapStateToProps = (state) => ({
notifications: state.getIn(['notifications', 'items']),
sortedNotifications: state.getIn(['notifications', 'sortedItems']),
isLoading: state.getIn(['notifications', 'isLoading'], true),
hasMore: state.getIn(['notifications', 'hasMore']),
totalQueuedNotificationsCount: state.getIn(['notifications', 'totalQueuedNotificationsCount'], 0),
selectedFilter: state.getIn(['notifications', 'filter', 'active']),
})
const mapDispatchToProps = (dispatch) => ({
onDequeueNotifications() {
dispatch(dequeueNotifications())
},
onExpandNotifications(options) {
if (!options) dispatch(forceDequeueNotifications())
dispatch(expandNotifications(options))
},
onScrollTopNotifications(top) {
dispatch(scrollTopNotifications(top))
},
})
Notifications.propTypes = {
hasMore: PropTypes.bool,
isLoading: PropTypes.bool,
notifications: ImmutablePropTypes.list.isRequired,
onDequeueNotifications: PropTypes.func.isRequired,
onExpandNotifications: PropTypes.func.isRequired,
onScrollTopNotifications: PropTypes.func.isRequired,
sortedNotifications: ImmutablePropTypes.list.isRequired,
totalQueuedNotificationsCount: PropTypes.number,
selectedFilter: PropTypes.string.isRequired,
}
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Notifications))