chinwagsocial/app/assets/javascripts/components/features/notifications/index.jsx
Eugen Rochko 46be4631ae Fix #222 - Update followers count when following/unfollowing
Also, since the root component connects to the stream that updates home/notification columns,
there is pretty much no case for refreshing those columns beyond initial load. So, move the
loading of those columns into the root component, to prevent unneccessary reloads when switching tabs
on mobile or resizing desktop window between mobile/desktop layouts
2017-01-19 10:54:18 +01:00

82 lines
2.5 KiB
JavaScript

import { connect } from 'react-redux';
import PureRenderMixin from 'react-addons-pure-render-mixin';
import ImmutablePropTypes from 'react-immutable-proptypes';
import Column from '../ui/components/column';
import { expandNotifications } from '../../actions/notifications';
import NotificationContainer from './containers/notification_container';
import { ScrollContainer } from 'react-router-scroll';
import { defineMessages, injectIntl } from 'react-intl';
import ColumnSettingsContainer from './containers/column_settings_container';
import { createSelector } from 'reselect';
import Immutable from 'immutable';
const messages = defineMessages({
title: { id: 'column.notifications', defaultMessage: 'Notifications' }
});
const getNotifications = createSelector([
state => Immutable.List(state.getIn(['settings', 'notifications', 'shows']).filter(item => !item).keys()),
state => state.getIn(['notifications', 'items'])
], (excludedTypes, notifications) => notifications.filterNot(item => excludedTypes.includes(item.get('type'))));
const mapStateToProps = state => ({
notifications: getNotifications(state)
});
const Notifications = React.createClass({
propTypes: {
notifications: ImmutablePropTypes.list.isRequired,
dispatch: React.PropTypes.func.isRequired,
trackScroll: React.PropTypes.bool,
intl: React.PropTypes.object.isRequired
},
getDefaultProps () {
return {
trackScroll: true
};
},
mixins: [PureRenderMixin],
handleScroll (e) {
const { scrollTop, scrollHeight, clientHeight } = e.target;
if (scrollTop === scrollHeight - clientHeight) {
this.props.dispatch(expandNotifications());
}
},
render () {
const { intl, notifications, trackScroll } = this.props;
const scrollableArea = (
<div className='scrollable' onScroll={this.handleScroll}>
<div>
{notifications.map(item => <NotificationContainer key={item.get('id')} notification={item} accountId={item.get('account')} />)}
</div>
</div>
);
if (trackScroll) {
return (
<Column icon='bell' heading={intl.formatMessage(messages.title)}>
<ScrollContainer scrollKey='notifications'>
{scrollableArea}
</ScrollContainer>
</Column>
);
} else {
return (
<Column icon='bell' heading={intl.formatMessage(messages.title)}>
<ColumnSettingsContainer />
{scrollableArea}
</Column>
);
}
}
});
export default connect(mapStateToProps)(injectIntl(Notifications));