Add column title to “Favourited by” and “Boosted by” columns
This commit is contained in:
parent
fc2f7ee871
commit
cb410f80a4
|
@ -7,20 +7,27 @@ import { fetchFavourites } from 'flavours/glitch/actions/interactions';
|
||||||
import { ScrollContainer } from 'react-router-scroll-4';
|
import { ScrollContainer } from 'react-router-scroll-4';
|
||||||
import AccountContainer from 'flavours/glitch/containers/account_container';
|
import AccountContainer from 'flavours/glitch/containers/account_container';
|
||||||
import Column from 'flavours/glitch/features/ui/components/column';
|
import Column from 'flavours/glitch/features/ui/components/column';
|
||||||
import ColumnBackButton from 'flavours/glitch/components/column_back_button';
|
import ColumnHeader from 'flavours/glitch/components/column_header';
|
||||||
|
import { defineMessages, injectIntl } from 'react-intl';
|
||||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||||
|
|
||||||
|
const messages = defineMessages({
|
||||||
|
heading: { id: 'column.favourited_by', defaultMessage: 'Favourited by' },
|
||||||
|
});
|
||||||
|
|
||||||
const mapStateToProps = (state, props) => ({
|
const mapStateToProps = (state, props) => ({
|
||||||
accountIds: state.getIn(['user_lists', 'favourited_by', props.params.statusId]),
|
accountIds: state.getIn(['user_lists', 'favourited_by', props.params.statusId]),
|
||||||
});
|
});
|
||||||
|
|
||||||
@connect(mapStateToProps)
|
@connect(mapStateToProps)
|
||||||
|
@injectIntl
|
||||||
export default class Favourites extends ImmutablePureComponent {
|
export default class Favourites extends ImmutablePureComponent {
|
||||||
|
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
params: PropTypes.object.isRequired,
|
params: PropTypes.object.isRequired,
|
||||||
dispatch: PropTypes.func.isRequired,
|
dispatch: PropTypes.func.isRequired,
|
||||||
accountIds: ImmutablePropTypes.list,
|
accountIds: ImmutablePropTypes.list,
|
||||||
|
intl: PropTypes.object.isRequired,
|
||||||
};
|
};
|
||||||
|
|
||||||
componentWillMount () {
|
componentWillMount () {
|
||||||
|
@ -38,8 +45,16 @@ export default class Favourites extends ImmutablePureComponent {
|
||||||
return !(location.state && location.state.mastodonModalOpen);
|
return !(location.state && location.state.mastodonModalOpen);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
handleHeaderClick = () => {
|
||||||
|
this.column.scrollTop();
|
||||||
|
}
|
||||||
|
|
||||||
|
setRef = c => {
|
||||||
|
this.column = c;
|
||||||
|
}
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
const { accountIds } = this.props;
|
const { intl, accountIds } = this.props;
|
||||||
|
|
||||||
if (!accountIds) {
|
if (!accountIds) {
|
||||||
return (
|
return (
|
||||||
|
@ -50,8 +65,13 @@ export default class Favourites extends ImmutablePureComponent {
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Column>
|
<Column ref={this.setRef}>
|
||||||
<ColumnBackButton />
|
<ColumnHeader
|
||||||
|
icon='star'
|
||||||
|
title={intl.formatMessage(messages.heading)}
|
||||||
|
onClick={this.handleHeaderClick}
|
||||||
|
showBackButton
|
||||||
|
/>
|
||||||
|
|
||||||
<ScrollContainer scrollKey='favourites' shouldUpdateScroll={this.shouldUpdateScroll}>
|
<ScrollContainer scrollKey='favourites' shouldUpdateScroll={this.shouldUpdateScroll}>
|
||||||
<div className='scrollable'>
|
<div className='scrollable'>
|
||||||
|
|
|
@ -7,20 +7,27 @@ import { fetchReblogs } from 'flavours/glitch/actions/interactions';
|
||||||
import { ScrollContainer } from 'react-router-scroll-4';
|
import { ScrollContainer } from 'react-router-scroll-4';
|
||||||
import AccountContainer from 'flavours/glitch/containers/account_container';
|
import AccountContainer from 'flavours/glitch/containers/account_container';
|
||||||
import Column from 'flavours/glitch/features/ui/components/column';
|
import Column from 'flavours/glitch/features/ui/components/column';
|
||||||
import ColumnBackButton from 'flavours/glitch/components/column_back_button';
|
import ColumnHeader from 'flavours/glitch/components/column_header';
|
||||||
|
import { defineMessages, injectIntl } from 'react-intl';
|
||||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||||
|
|
||||||
|
const messages = defineMessages({
|
||||||
|
heading: { id: 'column.reblogged_by', defaultMessage: 'Boosted by' },
|
||||||
|
});
|
||||||
|
|
||||||
const mapStateToProps = (state, props) => ({
|
const mapStateToProps = (state, props) => ({
|
||||||
accountIds: state.getIn(['user_lists', 'reblogged_by', props.params.statusId]),
|
accountIds: state.getIn(['user_lists', 'reblogged_by', props.params.statusId]),
|
||||||
});
|
});
|
||||||
|
|
||||||
@connect(mapStateToProps)
|
@connect(mapStateToProps)
|
||||||
|
@injectIntl
|
||||||
export default class Reblogs extends ImmutablePureComponent {
|
export default class Reblogs extends ImmutablePureComponent {
|
||||||
|
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
params: PropTypes.object.isRequired,
|
params: PropTypes.object.isRequired,
|
||||||
dispatch: PropTypes.func.isRequired,
|
dispatch: PropTypes.func.isRequired,
|
||||||
accountIds: ImmutablePropTypes.list,
|
accountIds: ImmutablePropTypes.list,
|
||||||
|
intl: PropTypes.object.isRequired,
|
||||||
};
|
};
|
||||||
|
|
||||||
componentWillMount () {
|
componentWillMount () {
|
||||||
|
@ -38,8 +45,16 @@ export default class Reblogs extends ImmutablePureComponent {
|
||||||
return !(location.state && location.state.mastodonModalOpen);
|
return !(location.state && location.state.mastodonModalOpen);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
handleHeaderClick = () => {
|
||||||
|
this.column.scrollTop();
|
||||||
|
}
|
||||||
|
|
||||||
|
setRef = c => {
|
||||||
|
this.column = c;
|
||||||
|
}
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
const { accountIds } = this.props;
|
const { intl, accountIds } = this.props;
|
||||||
|
|
||||||
if (!accountIds) {
|
if (!accountIds) {
|
||||||
return (
|
return (
|
||||||
|
@ -50,8 +65,13 @@ export default class Reblogs extends ImmutablePureComponent {
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Column>
|
<Column ref={this.setRef}>
|
||||||
<ColumnBackButton />
|
<ColumnHeader
|
||||||
|
icon='retweet'
|
||||||
|
title={intl.formatMessage(messages.heading)}
|
||||||
|
onClick={this.handleHeaderClick}
|
||||||
|
showBackButton
|
||||||
|
/>
|
||||||
|
|
||||||
<ScrollContainer scrollKey='reblogs' shouldUpdateScroll={this.shouldUpdateScroll}>
|
<ScrollContainer scrollKey='reblogs' shouldUpdateScroll={this.shouldUpdateScroll}>
|
||||||
<div className='scrollable reblogs'>
|
<div className='scrollable reblogs'>
|
||||||
|
|
Reference in New Issue