sunoru/mastodon
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Adding notifications column

Browse source
This commit is contained in:
Eugen Rochko 2016-11-20 19:39:18 +01:00
parent da2ef4d676
commit 38dd85daab
30 changed files with 512 additions and 76 deletions
Download patch file Download diff file Expand all files Collapse all files

2
app/assets/javascripts/components/features/compose/components/suggestions_box.jsx
View file

@ -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 = {

2
app/assets/javascripts/components/features/favourites/index.jsx
View file

@ -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';

99
app/assets/javascripts/components/features/followers/components/account.jsx
View file

@ -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);

30
app/assets/javascripts/components/features/followers/containers/account_container.jsx
View file

@ -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);

2
app/assets/javascripts/components/features/followers/index.jsx
View file

@ -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'])

2
app/assets/javascripts/components/features/following/index.jsx
View file

@ -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'])

79
app/assets/javascripts/components/features/notifications/components/notification.jsx Normal file
View file

@ -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;

15
app/assets/javascripts/components/features/notifications/containers/notification_container.jsx Normal file
View file

@ -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);

61
app/assets/javascripts/components/features/notifications/index.jsx Normal file
View file

@ -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));

2
app/assets/javascripts/components/features/reblogs/index.jsx
View file

@ -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';

18
app/assets/javascripts/components/features/ui/containers/notifications_container.jsx
View file

@ -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));
}
};
};