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:
parent
8ba98c5192
commit
4e72076b98
@ -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());
|
||||
|
@ -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());
|
||||
|
@ -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()
|
||||
|
@ -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() {
|
||||
|
Loading…
x
Reference in New Issue
Block a user