Add notification quick-filter bar in the frontend app (#9399)
* create FilterBar componer and its container, unstyled * introduce basic styling for FilterBar * add selection css * allow FilterBar to display active CSS with js * connect the FilterBar to the Redux state * change getNotifications to use filter * remove temporary comments * add an option to turn the FilterBar off in settings * fix showFilterBar data type to boolean * fix eslint errors * add English and Polish translations * allowed filter bar overflow to accomodate for longer languages * fix mispelled translation key * add unified CSS look * replace text in FilterBar with icons * add tooltips * replace text @ with an icon * introduce simple and advanced filtering view * add ability to toggle the advanced view * add Polish translations * change Advanced View description to be more clear * make each filter flush notifications and load new ones, fixing pagination * simplify getNotifications once frontend filtering is not needed for FilterBar * add a semicolon * Revert "simplify getNotifications once frontend filtering is not needed for FilterBar" This reverts commit 9f4be7857135b0327814bd22a3e8a4e7b546f7cc. * reset filter to 'all' when turning off FilterBarmaster
Paweł Ngei
6 years ago
committed by
Eugen Rochko
parent
5f0d3e8bad
commit
13dce12665
@ -0,0 +1,93 @@ |
||||
import React from 'react'; |
||||
import PropTypes from 'prop-types'; |
||||
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; |
||||
|
||||
const tooltips = defineMessages({ |
||||
mentions: { id: 'notifications.filter.mentions', defaultMessage: 'Mentions' }, |
||||
favourites: { id: 'notifications.filter.favourites', defaultMessage: 'Favourites' }, |
||||
boosts: { id: 'notifications.filter.boosts', defaultMessage: 'Boosts' }, |
||||
follows: { id: 'notifications.filter.follows', defaultMessage: 'Follows' }, |
||||
}); |
||||
|
||||
export default @injectIntl |
||||
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)} |
||||
> |
||||
<i className='fa fa-fw fa-at' /> |
||||
</button> |
||||
<button |
||||
className={selectedFilter === 'favourite' ? 'active' : ''} |
||||
onClick={this.onClick('favourite')} |
||||
title={intl.formatMessage(tooltips.favourites)} |
||||
> |
||||
<i className='fa fa-fw fa-star' /> |
||||
</button> |
||||
<button |
||||
className={selectedFilter === 'reblog' ? 'active' : ''} |
||||
onClick={this.onClick('reblog')} |
||||
title={intl.formatMessage(tooltips.boosts)} |
||||
> |
||||
<i className='fa fa-fw fa-retweet' /> |
||||
</button> |
||||
<button |
||||
className={selectedFilter === 'follow' ? 'active' : ''} |
||||
onClick={this.onClick('follow')} |
||||
title={intl.formatMessage(tooltips.follows)} |
||||
> |
||||
<i className='fa fa-fw fa-user-plus' /> |
||||
</button> |
||||
</div> |
||||
); |
||||
return renderedElement; |
||||
} |
||||
|
||||
} |
||||
@ -0,0 +1,16 @@ |
||||
import { connect } from 'react-redux'; |
||||
import FilterBar from '../components/filter_bar'; |
||||
import { setFilter } from '../../../actions/notifications'; |
||||
|
||||
const makeMapStateToProps = state => ({ |
||||
selectedFilter: state.getIn(['settings', 'notifications', 'quickFilter', 'active']), |
||||
advancedMode: state.getIn(['settings', 'notifications', 'quickFilter', 'advanced']), |
||||
}); |
||||
|
||||
const mapDispatchToProps = (dispatch) => ({ |
||||
selectFilter (newActiveFilter) { |
||||
dispatch(setFilter(newActiveFilter)); |
||||
}, |
||||
}); |
||||
|
||||
export default connect(makeMapStateToProps, mapDispatchToProps)(FilterBar); |
||||
Loading…
Reference in new issue