diff options
Diffstat (limited to 'app/assets/javascripts/components/features')
11 files changed, 169 insertions, 143 deletions
diff --git a/app/assets/javascripts/components/features/compose/components/suggestions_box.jsx b/app/assets/javascripts/components/features/compose/components/suggestions_box.jsx index 697902275..6850629ba 100644 --- a/app/assets/javascripts/components/features/compose/components/suggestions_box.jsx +++ b/app/assets/javascripts/components/features/compose/components/suggestions_box.jsx @@ -1,6 +1,6 @@ import PureRenderMixin from 'react-addons-pure-render-mixin'; import ImmutablePropTypes from 'react-immutable-proptypes'; -import AccountContainer from '../../followers/containers/account_container'; +import AccountContainer from '../../../containers/account_container'; import { FormattedMessage } from 'react-intl'; const outerStyle = { diff --git a/app/assets/javascripts/components/features/favourites/index.jsx b/app/assets/javascripts/components/features/favourites/index.jsx index 5c9ea498b..994803175 100644 --- a/app/assets/javascripts/components/features/favourites/index.jsx +++ b/app/assets/javascripts/components/features/favourites/index.jsx @@ -4,7 +4,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes'; import LoadingIndicator from '../../components/loading_indicator'; import { fetchFavourites } from '../../actions/interactions'; import { ScrollContainer } from 'react-router-scroll'; -import AccountContainer from '../followers/containers/account_container'; +import AccountContainer from '../../containers/account_container'; import Column from '../ui/components/column'; import ColumnBackButton from '../../components/column_back_button'; diff --git a/app/assets/javascripts/components/features/followers/components/account.jsx b/app/assets/javascripts/components/features/followers/components/account.jsx deleted file mode 100644 index 4a1fca6da..000000000 --- a/app/assets/javascripts/components/features/followers/components/account.jsx +++ /dev/null @@ -1,99 +0,0 @@ -import PureRenderMixin from 'react-addons-pure-render-mixin'; -import ImmutablePropTypes from 'react-immutable-proptypes'; -import Avatar from '../../../components/avatar'; -import DisplayName from '../../../components/display_name'; -import { Link } from 'react-router'; -import IconButton from '../../../components/icon_button'; -import { defineMessages, injectIntl } from 'react-intl'; - -const messages = defineMessages({ - follow: { id: 'account.follow', defaultMessage: 'Follow' } -}); - -const outerStyle = { - padding: '10px', - borderBottom: '1px solid #363c4b' -}; - -const itemStyle = { - flex: '1 1 auto', - display: 'block', - color: '#9baec8', - overflow: 'hidden', - textDecoration: 'none', - fontSize: '14px' -}; - -const noteStyle = { - paddingTop: '5px', - fontSize: '12px', - color: '#616b86' -}; - -const buttonsStyle = { - padding: '10px' -}; - -const Account = React.createClass({ - - propTypes: { - account: ImmutablePropTypes.map.isRequired, - me: React.PropTypes.number.isRequired, - onFollow: React.PropTypes.func.isRequired, - withNote: React.PropTypes.bool - }, - - getDefaultProps () { - return { - withNote: true - }; - }, - - mixins: [PureRenderMixin], - - handleFollow () { - this.props.onFollow(this.props.account); - }, - - render () { - const { account, me, withNote, intl } = this.props; - - if (!account) { - return <div />; - } - - let note, buttons; - - if (account.get('note').length > 0 && withNote) { - note = <div style={noteStyle}>{account.get('note')}</div>; - } - - if (account.get('id') !== me) { - const following = account.getIn(['relationship', 'following']); - - buttons = ( - <div style={buttonsStyle}> - <IconButton icon={following ? 'user-times' : 'user-plus'} title={intl.formatMessage(messages.follow)} onClick={this.handleFollow} active={following} /> - </div> - ); - } - - return ( - <div style={outerStyle}> - <div style={{ display: 'flex' }}> - <Link key={account.get('id')} style={itemStyle} className='account__display-name' to={`/accounts/${account.get('id')}`}> - <div style={{ float: 'left', marginRight: '10px' }}><Avatar src={account.get('avatar')} size={36} /></div> - <DisplayName account={account} /> - </Link> - - {buttons} - </div> - - {note} - </div> - ); - } - -}); - -export default injectIntl(Account); diff --git a/app/assets/javascripts/components/features/followers/containers/account_container.jsx b/app/assets/javascripts/components/features/followers/containers/account_container.jsx deleted file mode 100644 index c5d5c5881..000000000 --- a/app/assets/javascripts/components/features/followers/containers/account_container.jsx +++ /dev/null @@ -1,30 +0,0 @@ -import { connect } from 'react-redux'; -import { makeGetAccount } from '../../../selectors'; -import Account from '../components/account'; -import { - followAccount, - unfollowAccount -} from '../../../actions/accounts'; - -const makeMapStateToProps = () => { - const getAccount = makeGetAccount(); - - const mapStateToProps = (state, props) => ({ - account: getAccount(state, props.id), - me: state.getIn(['meta', 'me']) - }); - - return mapStateToProps; -}; - -const mapDispatchToProps = (dispatch) => ({ - onFollow (account) { - if (account.getIn(['relationship', 'following'])) { - dispatch(unfollowAccount(account.get('id'))); - } else { - dispatch(followAccount(account.get('id'))); - } - } -}); - -export default connect(makeMapStateToProps, mapDispatchToProps)(Account); diff --git a/app/assets/javascripts/components/features/followers/index.jsx b/app/assets/javascripts/components/features/followers/index.jsx index 13eed69ca..38755d862 100644 --- a/app/assets/javascripts/components/features/followers/index.jsx +++ b/app/assets/javascripts/components/features/followers/index.jsx @@ -7,7 +7,7 @@ import { expandFollowers } from '../../actions/accounts'; import { ScrollContainer } from 'react-router-scroll'; -import AccountContainer from './containers/account_container'; +import AccountContainer from '../../containers/account_container'; const mapStateToProps = (state, props) => ({ accountIds: state.getIn(['user_lists', 'followers', Number(props.params.accountId), 'items']) diff --git a/app/assets/javascripts/components/features/following/index.jsx b/app/assets/javascripts/components/features/following/index.jsx index 865b39736..c4ec7bb67 100644 --- a/app/assets/javascripts/components/features/following/index.jsx +++ b/app/assets/javascripts/components/features/following/index.jsx @@ -7,7 +7,7 @@ import { expandFollowing } from '../../actions/accounts'; import { ScrollContainer } from 'react-router-scroll'; -import AccountContainer from '../followers/containers/account_container'; +import AccountContainer from '../../containers/account_container'; const mapStateToProps = (state, props) => ({ accountIds: state.getIn(['user_lists', 'following', Number(props.params.accountId), 'items']) 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..9c8b07dea --- /dev/null +++ b/app/assets/javascripts/components/features/notifications/index.jsx @@ -0,0 +1,61 @@ +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 + }, + + 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 } = this.props; + + return ( + <Column icon='bell' heading={intl.formatMessage(messages.title)}> + <ScrollContainer scrollKey='notifications'> + <div className='scrollable' onScroll={this.handleScroll}> + <div> + {notifications.map(item => <NotificationContainer key={item.get('id')} notification={item} accountId={item.get('account')} />)} + </div> + </div> + </ScrollContainer> + </Column> + ); + } + +}); + +export default connect(mapStateToProps)(injectIntl(Notifications)); diff --git a/app/assets/javascripts/components/features/reblogs/index.jsx b/app/assets/javascripts/components/features/reblogs/index.jsx index 5f22065f6..a1028870b 100644 --- a/app/assets/javascripts/components/features/reblogs/index.jsx +++ b/app/assets/javascripts/components/features/reblogs/index.jsx @@ -4,7 +4,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes'; import LoadingIndicator from '../../components/loading_indicator'; import { fetchReblogs } from '../../actions/interactions'; import { ScrollContainer } from 'react-router-scroll'; -import AccountContainer from '../followers/containers/account_container'; +import AccountContainer from '../../containers/account_container'; import Column from '../ui/components/column'; import ColumnBackButton from '../../components/column_back_button'; diff --git a/app/assets/javascripts/components/features/ui/containers/notifications_container.jsx b/app/assets/javascripts/components/features/ui/containers/notifications_container.jsx index eb12989e5..529ebf6c8 100644 --- a/app/assets/javascripts/components/features/ui/containers/notifications_container.jsx +++ b/app/assets/javascripts/components/features/ui/containers/notifications_container.jsx @@ -1,19 +1,19 @@ -import { connect } from 'react-redux'; -import { NotificationStack } from 'react-notification'; +import { connect } from 'react-redux'; +import { NotificationStack } from 'react-notification'; import { - dismissNotification, - clearNotifications -} from '../../../actions/notifications'; -import { getNotifications } from '../../../selectors'; + dismissAlert, + clearAlerts +} from '../../../actions/alerts'; +import { getAlerts } from '../../../selectors'; const mapStateToProps = (state, props) => ({ - notifications: getNotifications(state) + notifications: getAlerts(state) }); const mapDispatchToProps = (dispatch) => { return { - onDismiss: notifiction => { - dispatch(dismissNotification(notifiction)); + onDismiss: alert => { + dispatch(dismissAlert(alert)); } }; }; |