app/javascript/mastodon/features/favourites/index.js

   1 import React from 'react';
   2 import { connect } from 'react-redux';
   3 import ImmutablePureComponent from 'react-immutable-pure-component';
   4 import PropTypes from 'prop-types';
   5 import ImmutablePropTypes from 'react-immutable-proptypes';
   6 import LoadingIndicator from '../../components/loading_indicator';
   7 import { fetchFavourites } from '../../actions/interactions';
   8 import { FormattedMessage } from 'react-intl';
   9 import AccountContainer from '../../containers/account_container';
  10 import Column from '../ui/components/column';
  11 import ColumnBackButton from '../../components/column_back_button';
  12 import ScrollableList from '../../components/scrollable_list';
  13
  14 const mapStateToProps = (state, props) => ({
  15   accountIds: state.getIn(['user_lists', 'favourited_by', props.params.statusId]),
  16 });
  17
  18 @connect(mapStateToProps)
  19 export default class Favourites extends ImmutablePureComponent {
  20
  21   static propTypes = {
  22     params: PropTypes.object.isRequired,
  23     dispatch: PropTypes.func.isRequired,
  24     shouldUpdateScroll: PropTypes.func,
  25     accountIds: ImmutablePropTypes.list,
  26   };
  27
  28   componentWillMount () {
  29     this.props.dispatch(fetchFavourites(this.props.params.statusId));
  30   }
  31
  32   componentWillReceiveProps (nextProps) {
  33     if (nextProps.params.statusId !== this.props.params.statusId && nextProps.params.statusId) {
  34       this.props.dispatch(fetchFavourites(nextProps.params.statusId));
  35     }
  36   }
  37
  38   render () {
  39     const { shouldUpdateScroll, accountIds } = this.props;
  40
  41     if (!accountIds) {
  42       return (
  43         <Column>
  44           <LoadingIndicator />
  45         </Column>
  46       );
  47     }
  48
  49     const emptyMessage = <FormattedMessage id='empty_column.favourites' defaultMessage='No one has favourited this toot yet. When someone does, they will show up here.' />;
  50
  51     return (
  52       <Column>
  53         <ColumnBackButton />
  54
  55         <ScrollableList
  56           scrollKey='favourites'
  57           shouldUpdateScroll={shouldUpdateScroll}
  58           emptyMessage={emptyMessage}
  59         >
  60           {accountIds.map(id =>
  61             <AccountContainer key={id} id={id} withNote={false} />
  62           )}
  63         </ScrollableList>
  64       </Column>
  65     );
  66   }
  67
  68 }