Merge branch 'reactions-page' into 'develop'

Reactions page improvements

See merge request soapbox-pub/soapbox-fe!736
public-report
Alex Gleason 2021-09-10 00:58:37 +00:00
commit a48e7f28b0
2 zmienionych plików z 18 dodań i 10 usunięć

Wyświetl plik

@ -16,10 +16,8 @@ export default class ColumnBackButton extends React.PureComponent {
handleClick = () => { handleClick = () => {
const { to } = this.props; const { to } = this.props;
if (to) { if (window.history && window.history.length === 1) {
this.context.router.history.push(to); this.context.router.history.push(to ? to : '/');
} else if (window.history && window.history.length === 1) {
this.context.router.history.push('/');
} else { } else {
this.context.router.history.goBack(); this.context.router.history.goBack();
} }

Wyświetl plik

@ -13,7 +13,6 @@ import AccountContainer from '../../containers/account_container';
import Column from '../ui/components/column'; import Column from '../ui/components/column';
import ScrollableList from '../../components/scrollable_list'; import ScrollableList from '../../components/scrollable_list';
import { makeGetStatus } from '../../selectors'; import { makeGetStatus } from '../../selectors';
import { NavLink } from 'react-router-dom';
const mapStateToProps = (state, props) => { const mapStateToProps = (state, props) => {
const getStatus = makeGetStatus(); const getStatus = makeGetStatus();
@ -38,11 +37,15 @@ const mapStateToProps = (state, props) => {
export default @connect(mapStateToProps) export default @connect(mapStateToProps)
class Reactions extends ImmutablePureComponent { class Reactions extends ImmutablePureComponent {
static contextTypes = {
router: PropTypes.object.isRequired,
};
static propTypes = { static propTypes = {
params: PropTypes.object.isRequired, params: PropTypes.object.isRequired,
dispatch: PropTypes.array.isRequired, dispatch: PropTypes.func.isRequired,
reactions: PropTypes.array, reactions: ImmutablePropTypes.orderedSet,
accounts: PropTypes.array, accounts: ImmutablePropTypes.orderedSet,
status: ImmutablePropTypes.map, status: ImmutablePropTypes.map,
}; };
@ -61,6 +64,13 @@ class Reactions extends ImmutablePureComponent {
} }
} }
handleFilterChange = (reaction) => () => {
const { params } = this.props;
const { username, statusId } = params;
this.context.router.history.replace(`/@${username}/posts/${statusId}/reactions/${reaction}`);
};
render() { render() {
const { params, reactions, accounts, status } = this.props; const { params, reactions, accounts, status } = this.props;
const { username, statusId } = params; const { username, statusId } = params;
@ -90,8 +100,8 @@ class Reactions extends ImmutablePureComponent {
{ {
reactions.size > 0 && ( reactions.size > 0 && (
<div className='reaction__filter-bar'> <div className='reaction__filter-bar'>
<NavLink to={`/@${username}/posts/${statusId}/reactions`} exact>All</NavLink> <button onClick={this.handleFilterChange('')}>All</button>
{reactions?.map(reaction => <NavLink to={`/@${username}/posts/${statusId}/reactions/${reaction.name}`}>{reaction.name} {reaction.count}</NavLink>)} {reactions?.filter(reaction => reaction.count).map(reaction => <button key={reaction.name} onClick={this.handleFilterChange(reaction.name)}>{reaction.name} {reaction.count}</button>)}
</div> </div>
) )
} }