diff options
Diffstat (limited to 'app/assets/javascripts/components/features/notifications')
3 files changed, 168 insertions, 0 deletions
diff --git a/app/assets/javascripts/components/features/notifications/components/notification.jsx b/app/assets/javascripts/components/features/notifications/components/notification.jsx new file mode 100644 index 000000000..be8cf3616 --- /dev/null +++ b/app/assets/javascripts/components/features/notifications/components/notification.jsx @@ -0,0 +1,79 @@ +import PureRenderMixin from 'react-addons-pure-render-mixin'; +import ImmutablePropTypes from 'react-immutable-proptypes'; +import StatusContainer from '../../../containers/status_container'; +import AccountContainer from '../../../containers/account_container'; +import { FormattedMessage } from 'react-intl'; +import { Link } from 'react-router'; + +const messageStyle = { + padding: '8px 10px', + paddingBottom: '0', + cursor: 'default', + color: '#d9e1e8', + fontSize: '15px' +}; + +const linkStyle = { + fontWeight: '500' +}; + +const Notification = React.createClass({ + + propTypes: { + notification: ImmutablePropTypes.map.isRequired + }, + + mixins: [PureRenderMixin], + + renderFollow (account, link) { + return ( + <div className='notification'> + <div style={messageStyle}><i className='fa fa-fw fa-user-plus' style={{ color: '#2b90d9' }} /> <FormattedMessage id='notification.follow' defaultMessage='{name} followed you' values={{ name: link }} /></div> + <AccountContainer id={account.get('id')} withNote={false} /> + </div> + ); + }, + + renderMention (notification) { + return <StatusContainer id={notification.get('status')} />; + }, + + renderFavourite (notification, link) { + return ( + <div className='notification'> + <div style={messageStyle}><i className='fa fa-fw fa-star' style={{ color: '#ca8f04' }} /> <FormattedMessage id='notification.favourite' defaultMessage='{name} favourited your status' values={{ name: link }} /></div> + <StatusContainer id={notification.get('status')} muted={true} /> + </div> + ); + }, + + renderReblog (notification, link) { + return ( + <div className='notification'> + <div style={messageStyle}><i className='fa fa-fw fa-retweet' style={{ color: '#2b90d9' }} /> <FormattedMessage id='notification.reblog' defaultMessage='{name} reblogged your status' values={{ name: link }} /></div> + <StatusContainer id={notification.get('status')} muted={true} /> + </div> + ); + }, + + render () { + const { notification } = this.props; + const account = notification.get('account'); + const displayName = account.get('display_name').length > 0 ? account.get('display_name') : account.get('username'); + const link = <Link className='notification__display-name' style={linkStyle} to={`/accounts/${account.get('id')}`}>{displayName}</Link>; + + switch(notification.get('type')) { + case 'follow': + return this.renderFollow(account, link); + case 'mention': + return this.renderMention(notification); + case 'favourite': + return this.renderFavourite(notification, link); + case 'reblog': + return this.renderReblog(notification, link); + } + } + +}); + +export default Notification; diff --git a/app/assets/javascripts/components/features/notifications/containers/notification_container.jsx b/app/assets/javascripts/components/features/notifications/containers/notification_container.jsx new file mode 100644 index 000000000..4ca1b1b7b --- /dev/null +++ b/app/assets/javascripts/components/features/notifications/containers/notification_container.jsx @@ -0,0 +1,15 @@ +import { connect } from 'react-redux'; +import { makeGetNotification } from '../../../selectors'; +import Notification from '../components/notification'; + +const makeMapStateToProps = () => { + const getNotification = makeGetNotification(); + + const mapStateToProps = (state, props) => ({ + notification: getNotification(state, props.notification, props.accountId) + }); + + return mapStateToProps; +}; + +export default connect(makeMapStateToProps)(Notification); diff --git a/app/assets/javascripts/components/features/notifications/index.jsx b/app/assets/javascripts/components/features/notifications/index.jsx new file mode 100644 index 000000000..00feeece7 --- /dev/null +++ b/app/assets/javascripts/components/features/notifications/index.jsx @@ -0,0 +1,74 @@ +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 { + refreshNotifications, + expandNotifications +} from '../../actions/notifications'; +import NotificationContainer from './containers/notification_container'; +import { ScrollContainer } from 'react-router-scroll'; +import { defineMessages, injectIntl } from 'react-intl'; + +const messages = defineMessages({ + title: { id: 'column.notifications', defaultMessage: 'Notifications' } +}); + +const mapStateToProps = state => ({ + notifications: state.getIn(['notifications', 'items']) +}); + +const Notifications = React.createClass({ + + propTypes: { + notifications: ImmutablePropTypes.list.isRequired, + dispatch: React.PropTypes.func.isRequired, + trackScroll: React.PropTypes.bool + }, + + mixins: [PureRenderMixin], + + componentWillMount () { + const { dispatch } = this.props; + dispatch(refreshNotifications()); + }, + + 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)}> + {scrollableArea} + </Column> + ); + } + } + +}); + +export default connect(mapStateToProps)(injectIntl(Notifications)); |