Add column header to reactions page

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak 2022-01-01 23:41:25 +01:00
parent b9dcbe85a1
commit 28b72dc01d

View file

@ -4,16 +4,20 @@ import { OrderedSet as ImmutableOrderedSet } from 'immutable';
import ImmutablePureComponent from 'react-immutable-pure-component'; import ImmutablePureComponent from 'react-immutable-pure-component';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import { injectIntl, defineMessages, FormattedMessage } from 'react-intl';
import LoadingIndicator from '../../components/loading_indicator'; import LoadingIndicator from '../../components/loading_indicator';
import MissingIndicator from '../../components/missing_indicator'; import MissingIndicator from '../../components/missing_indicator';
import { fetchFavourites, fetchReactions } from '../../actions/interactions'; import { fetchFavourites, fetchReactions } from '../../actions/interactions';
import { fetchStatus } from '../../actions/statuses'; import { fetchStatus } from '../../actions/statuses';
import { FormattedMessage } from 'react-intl';
import AccountContainer from '../../containers/account_container'; 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';
const messages = defineMessages({
heading: { id: 'column.reactions', defaultMessage: 'Reactions' },
});
const mapStateToProps = (state, props) => { const mapStateToProps = (state, props) => {
const getStatus = makeGetStatus(); const getStatus = makeGetStatus();
const status = getStatus(state, { const status = getStatus(state, {
@ -35,6 +39,7 @@ const mapStateToProps = (state, props) => {
}; };
export default @connect(mapStateToProps) export default @connect(mapStateToProps)
@injectIntl
class Reactions extends ImmutablePureComponent { class Reactions extends ImmutablePureComponent {
static contextTypes = { static contextTypes = {
@ -78,14 +83,11 @@ class Reactions extends ImmutablePureComponent {
}; };
render() { render() {
const { params, reactions, accounts, status } = this.props; const { intl, params, reactions, accounts, status } = this.props;
const { username, statusId } = params;
const back = `/@${username}/posts/${statusId}`;
if (!accounts) { if (!accounts) {
return ( return (
<Column back={back}> <Column>
<LoadingIndicator /> <LoadingIndicator />
</Column> </Column>
); );
@ -93,7 +95,7 @@ class Reactions extends ImmutablePureComponent {
if (!status) { if (!status) {
return ( return (
<Column back={back}> <Column>
<MissingIndicator /> <MissingIndicator />
</Column> </Column>
); );
@ -102,7 +104,7 @@ class Reactions extends ImmutablePureComponent {
const emptyMessage = <FormattedMessage id='status.reactions.empty' defaultMessage='No one has reacted to this post yet. When someone does, they will show up here.' />; const emptyMessage = <FormattedMessage id='status.reactions.empty' defaultMessage='No one has reacted to this post yet. When someone does, they will show up here.' />;
return ( return (
<Column back={back}> <Column heading={intl.formatMessage(messages.heading)}>
{ {
reactions.size > 0 && ( reactions.size > 0 && (
<div className='reaction__filter-bar'> <div className='reaction__filter-bar'>