2018-12-16 04:56:41 +00:00
|
|
|
import React from 'react';
|
|
|
|
import PropTypes from 'prop-types';
|
|
|
|
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
|
2019-01-31 23:14:05 +00:00
|
|
|
import Icon from 'mastodon/components/icon';
|
2018-12-16 04:56:41 +00:00
|
|
|
|
|
|
|
const tooltips = defineMessages({
|
|
|
|
mentions: { id: 'notifications.filter.mentions', defaultMessage: 'Mentions' },
|
|
|
|
favourites: { id: 'notifications.filter.favourites', defaultMessage: 'Favourites' },
|
|
|
|
boosts: { id: 'notifications.filter.boosts', defaultMessage: 'Boosts' },
|
2019-03-13 18:29:54 +00:00
|
|
|
polls: { id: 'notifications.filter.polls', defaultMessage: 'Poll results' },
|
2018-12-16 04:56:41 +00:00
|
|
|
follows: { id: 'notifications.filter.follows', defaultMessage: 'Follows' },
|
2020-09-18 15:26:45 +00:00
|
|
|
statuses: { id: 'notifications.filter.statuses', defaultMessage: 'Updates from people you follow' },
|
2018-12-16 04:56:41 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
class FilterBar extends React.PureComponent {
|
|
|
|
|
|
|
|
static propTypes = {
|
|
|
|
selectFilter: PropTypes.func.isRequired,
|
|
|
|
selectedFilter: PropTypes.string.isRequired,
|
|
|
|
advancedMode: PropTypes.bool.isRequired,
|
|
|
|
intl: PropTypes.object.isRequired,
|
|
|
|
};
|
|
|
|
|
|
|
|
onClick (notificationType) {
|
|
|
|
return () => this.props.selectFilter(notificationType);
|
|
|
|
}
|
|
|
|
|
|
|
|
render () {
|
|
|
|
const { selectedFilter, advancedMode, intl } = this.props;
|
|
|
|
const renderedElement = !advancedMode ? (
|
|
|
|
<div className='notification__filter-bar'>
|
|
|
|
<button
|
|
|
|
className={selectedFilter === 'all' ? 'active' : ''}
|
|
|
|
onClick={this.onClick('all')}
|
|
|
|
>
|
|
|
|
<FormattedMessage
|
|
|
|
id='notifications.filter.all'
|
|
|
|
defaultMessage='All'
|
|
|
|
/>
|
|
|
|
</button>
|
|
|
|
<button
|
|
|
|
className={selectedFilter === 'mention' ? 'active' : ''}
|
|
|
|
onClick={this.onClick('mention')}
|
|
|
|
>
|
|
|
|
<FormattedMessage
|
|
|
|
id='notifications.filter.mentions'
|
|
|
|
defaultMessage='Mentions'
|
|
|
|
/>
|
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
) : (
|
|
|
|
<div className='notification__filter-bar'>
|
|
|
|
<button
|
|
|
|
className={selectedFilter === 'all' ? 'active' : ''}
|
|
|
|
onClick={this.onClick('all')}
|
|
|
|
>
|
|
|
|
<FormattedMessage
|
|
|
|
id='notifications.filter.all'
|
|
|
|
defaultMessage='All'
|
|
|
|
/>
|
|
|
|
</button>
|
|
|
|
<button
|
|
|
|
className={selectedFilter === 'mention' ? 'active' : ''}
|
|
|
|
onClick={this.onClick('mention')}
|
|
|
|
title={intl.formatMessage(tooltips.mentions)}
|
|
|
|
>
|
2019-09-29 20:20:56 +00:00
|
|
|
<Icon id='reply-all' fixedWidth />
|
2018-12-16 04:56:41 +00:00
|
|
|
</button>
|
|
|
|
<button
|
|
|
|
className={selectedFilter === 'favourite' ? 'active' : ''}
|
|
|
|
onClick={this.onClick('favourite')}
|
|
|
|
title={intl.formatMessage(tooltips.favourites)}
|
|
|
|
>
|
2019-01-31 23:14:05 +00:00
|
|
|
<Icon id='star' fixedWidth />
|
2018-12-16 04:56:41 +00:00
|
|
|
</button>
|
|
|
|
<button
|
|
|
|
className={selectedFilter === 'reblog' ? 'active' : ''}
|
|
|
|
onClick={this.onClick('reblog')}
|
|
|
|
title={intl.formatMessage(tooltips.boosts)}
|
|
|
|
>
|
2019-01-31 23:14:05 +00:00
|
|
|
<Icon id='retweet' fixedWidth />
|
2018-12-16 04:56:41 +00:00
|
|
|
</button>
|
2019-03-13 18:29:54 +00:00
|
|
|
<button
|
|
|
|
className={selectedFilter === 'poll' ? 'active' : ''}
|
|
|
|
onClick={this.onClick('poll')}
|
|
|
|
title={intl.formatMessage(tooltips.polls)}
|
|
|
|
>
|
|
|
|
<Icon id='tasks' fixedWidth />
|
|
|
|
</button>
|
2020-09-18 15:26:45 +00:00
|
|
|
<button
|
|
|
|
className={selectedFilter === 'status' ? 'active' : ''}
|
|
|
|
onClick={this.onClick('status')}
|
|
|
|
title={intl.formatMessage(tooltips.statuses)}
|
|
|
|
>
|
|
|
|
<Icon id='home' fixedWidth />
|
|
|
|
</button>
|
2018-12-16 04:56:41 +00:00
|
|
|
<button
|
|
|
|
className={selectedFilter === 'follow' ? 'active' : ''}
|
|
|
|
onClick={this.onClick('follow')}
|
|
|
|
title={intl.formatMessage(tooltips.follows)}
|
|
|
|
>
|
2019-01-31 23:14:05 +00:00
|
|
|
<Icon id='user-plus' fixedWidth />
|
2018-12-16 04:56:41 +00:00
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
return renderedElement;
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
2023-03-24 02:17:53 +00:00
|
|
|
|
|
|
|
export default injectIntl(FilterBar);
|