Added click to refresh on Home and Notifications

• Added:
- click to refresh on Home and Notifications... If click on notifications or home button, it refreshes the data
This commit is contained in:
mgabdev 2020-06-10 17:44:38 -04:00
parent 8ba98c5192
commit 4e72076b98
4 changed files with 93 additions and 21 deletions

View File

@ -114,6 +114,14 @@ export function updateNotificationsQueue(notification, intlMessages, intlLocale,
}
};
export function forceDequeueNotifications() {
return (dispatch,) => {
dispatch({
type: NOTIFICATIONS_DEQUEUE,
})
}
}
export function dequeueNotifications() {
return (dispatch, getState) => {
const queuedNotifications = getState().getIn(['notifications', 'queuedNotifications'], ImmutableList());

View File

@ -48,6 +48,15 @@ export function updateTimelineQueue(timeline, status, accept) {
}
};
export function forceDequeueTimeline(timeline) {
return (dispatch) => {
dispatch({
type: TIMELINE_DEQUEUE,
timeline,
})
}
}
export function dequeueTimeline(timeline, expandFunc, optionalExpandArgs) {
return (dispatch, getState) => {
const queuedItems = getState().getIn(['timelines', timeline, 'queuedItems'], ImmutableList());

View File

@ -1,5 +1,10 @@
import { defineMessages, injectIntl } from 'react-intl'
import { expandHomeTimeline } from '../actions/timelines'
import { withRouter } from 'react-router-dom'
import throttle from 'lodash.throttle'
import {
expandHomeTimeline,
forceDequeueTimeline,
} from '../actions/timelines'
import StatusList from '../components/status_list'
const messages = defineMessages({
@ -11,19 +16,23 @@ const mapStateToProps = (state) => ({
isPartial: state.getIn(['timelines', 'home', 'isPartial']),
})
const mapDispatchToProps = (dispatch) => ({
onExpandHomeTimeline(options) {
if (!options) dispatch(forceDequeueTimeline('home'))
dispatch(expandHomeTimeline(options))
},
})
export default
@connect(mapStateToProps)
@injectIntl
@withRouter
@connect(mapStateToProps, mapDispatchToProps)
class HomeTimeline extends PureComponent {
static propTypes = {
dispatch: PropTypes.func.isRequired,
intl: PropTypes.object.isRequired,
isPartial: PropTypes.bool,
}
handleLoadMore = (maxId) => {
this.props.dispatch(expandHomeTimeline({ maxId }))
onExpandHomeTimeline: PropTypes.func.isRequired,
}
componentDidMount () {
@ -32,18 +41,33 @@ class HomeTimeline extends PureComponent {
componentDidUpdate (prevProps) {
this._checkIfReloadNeeded(prevProps.isPartial, this.props.isPartial)
//Check if clicked on "home" button, if so, reload
if (prevProps.location.key !== this.props.location.key &&
prevProps.location.pathname === '/home' &&
this.props.location.pathname === '/home') {
this.handleReload()
}
}
componentWillUnmount () {
this._stopPolling()
}
handleLoadMore = (maxId) => {
this.props.onExpandHomeTimeline({ maxId })
}
handleReload = throttle(() => {
this.props.onExpandHomeTimeline()
}, 5000)
_checkIfReloadNeeded (wasPartial, isPartial) {
const { dispatch } = this.props
const { onExpandHomeTimeline } = this.props
if (!wasPartial && isPartial) {
this.polling = setInterval(() => {
dispatch(expandHomeTimeline())
onExpandHomeTimeline()
}, 3000)
} else if (wasPartial && !isPartial) {
this._stopPolling()

View File

@ -1,12 +1,15 @@
import { Fragment } from 'react'
import { withRouter } from 'react-router-dom'
import ImmutablePropTypes from 'react-immutable-proptypes'
import ImmutablePureComponent from 'react-immutable-pure-component'
import { FormattedMessage } from 'react-intl'
import debounce from 'lodash.debounce'
import throttle from 'lodash.throttle'
import {
expandNotifications,
scrollTopNotifications,
dequeueNotifications,
forceDequeueNotifications,
} from '../actions/notifications'
import NotificationContainer from '../containers/notification_container'
import ScrollableList from '../components/scrollable_list'
@ -21,17 +24,32 @@ const mapStateToProps = (state) => ({
totalQueuedNotificationsCount: state.getIn(['notifications', 'totalQueuedNotificationsCount'], 0),
})
const mapDispatchToProps = (dispatch) => ({
onDequeueNotifications() {
dispatch(dequeueNotifications())
},
onExpandNotifications(options) {
if (!options) dispatch(forceDequeueNotifications())
dispatch(expandNotifications(options))
},
onScrollTopNotifications(top) {
dispatch(scrollTopNotifications(top))
},
})
export default
@connect(mapStateToProps)
@withRouter
@connect(mapStateToProps, mapDispatchToProps)
class Notifications extends ImmutablePureComponent {
static propTypes = {
sortedNotifications: ImmutablePropTypes.list.isRequired,
notifications: ImmutablePropTypes.list.isRequired,
dispatch: PropTypes.func.isRequired,
isLoading: PropTypes.bool,
hasMore: PropTypes.bool,
dequeueNotifications: PropTypes.func,
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,
}
@ -39,29 +57,42 @@ class Notifications extends ImmutablePureComponent {
this.handleLoadOlder.cancel()
this.handleScrollToTop.cancel()
this.handleScroll.cancel()
this.props.dispatch(scrollTopNotifications(false))
this.props.onScrollTopNotifications(false)
}
componentDidMount() {
this.handleDequeueNotifications()
this.props.dispatch(scrollTopNotifications(true))
this.props.onScrollTopNotifications(true)
}
componentDidUpdate (prevProps) {
//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()
}
}
handleReload = throttle(() => {
this.props.onExpandNotifications()
}, 5000)
handleLoadOlder = debounce(() => {
const last = this.props.notifications.last()
this.props.dispatch(expandNotifications({ maxId: last && last.get('id') }))
this.props.onExpandNotifications({ maxId: last && last.get('id') })
}, 300, { leading: true })
handleScrollToTop = debounce(() => {
this.props.dispatch(scrollTopNotifications(true))
this.props.onScrollTopNotifications(true)
}, 100)
handleScroll = debounce(() => {
this.props.dispatch(scrollTopNotifications(false))
this.props.onScrollTopNotifications(false)
}, 100)
handleDequeueNotifications = () => {
this.props.dispatch(dequeueNotifications())
this.props.onDequeueNotifications()
}
render() {