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

   1 import React from 'react';
   2 import { connect } from 'react-redux';
   3 import PropTypes from 'prop-types';
   4 import ImmutablePropTypes from 'react-immutable-proptypes';
   5 import LoadingIndicator from '../../components/loading_indicator';
   6 import { ScrollContainer } from 'react-router-scroll';
   7 import Column from '../ui/components/column';
   8 import ColumnBackButtonSlim from '../../components/column_back_button_slim';
   9 import AccountContainer from '../../containers/account_container';
  10 import { fetchMutes, expandMutes } from '../../actions/mutes';
  11 import { defineMessages, injectIntl } from 'react-intl';
  12 import ImmutablePureComponent from 'react-immutable-pure-component';
  13
  14 const messages = defineMessages({
  15   heading: { id: 'column.mutes', defaultMessage: 'Muted users' },
  16 });
  17
  18 const mapStateToProps = state => ({
  19   accountIds: state.getIn(['user_lists', 'mutes', 'items']),
  20 });
  21
  22 class Mutes extends ImmutablePureComponent {
  23
  24   componentWillMount () {
  25     this.props.dispatch(fetchMutes());
  26   }
  27
  28   handleScroll = (e) => {
  29     const { scrollTop, scrollHeight, clientHeight } = e.target;
  30
  31     if (scrollTop === scrollHeight - clientHeight) {
  32       this.props.dispatch(expandMutes());
  33     }
  34   }
  35
  36   render () {
  37     const { intl, accountIds } = this.props;
  38
  39     if (!accountIds) {
  40       return (
  41         <Column>
  42           <LoadingIndicator />
  43         </Column>
  44       );
  45     }
  46
  47     return (
  48       <Column icon='volume-off' heading={intl.formatMessage(messages.heading)}>
  49         <ColumnBackButtonSlim />
  50         <ScrollContainer scrollKey='mutes'>
  51           <div className='scrollable mutes' onScroll={this.handleScroll}>
  52             {accountIds.map(id =>
  53               <AccountContainer key={id} id={id} />
  54             )}
  55           </div>
  56         </ScrollContainer>
  57       </Column>
  58     );
  59   }
  60
  61 }
  62
  63 Mutes.propTypes = {
  64   params: PropTypes.object.isRequired,
  65   dispatch: PropTypes.func.isRequired,
  66   accountIds: ImmutablePropTypes.list,
  67   intl: PropTypes.object.isRequired,
  68 };
  69
  70 export default connect(mapStateToProps)(injectIntl(Mutes));