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

   1 import React from 'react';
   2 import { connect } from 'react-redux';
   3 import ImmutablePropTypes from 'react-immutable-proptypes';
   4 import PropTypes from 'prop-types';
   5 import LoadingIndicator from '../../components/loading_indicator';
   6 import Column from '../ui/components/column';
   7 import ColumnBackButtonSlim from '../../components/column_back_button_slim';
   8 import DomainContainer from '../../containers/domain_container';
   9 import { fetchDomainBlocks, expandDomainBlocks } from '../../actions/domain_blocks';
  10 import { defineMessages, injectIntl } from 'react-intl';
  11 import ImmutablePureComponent from 'react-immutable-pure-component';
  12 import { debounce } from 'lodash';
  13 import ScrollableList from '../../components/scrollable_list';
  14
  15 const messages = defineMessages({
  16   heading: { id: 'column.domain_blocks', defaultMessage: 'Hidden domains' },
  17   unblockDomain: { id: 'account.unblock_domain', defaultMessage: 'Unhide {domain}' },
  18 });
  19
  20 const mapStateToProps = state => ({
  21   domains: state.getIn(['domain_lists', 'blocks', 'items']),
  22 });
  23
  24 @connect(mapStateToProps)
  25 @injectIntl
  26 export default class Blocks extends ImmutablePureComponent {
  27
  28   static propTypes = {
  29     params: PropTypes.object.isRequired,
  30     dispatch: PropTypes.func.isRequired,
  31     domains: ImmutablePropTypes.list,
  32     intl: PropTypes.object.isRequired,
  33   };
  34
  35   componentWillMount () {
  36     this.props.dispatch(fetchDomainBlocks());
  37   }
  38
  39   handleLoadMore = debounce(() => {
  40     this.props.dispatch(expandDomainBlocks());
  41   }, 300, { leading: true });
  42
  43   render () {
  44     const { intl, domains } = this.props;
  45
  46     if (!domains) {
  47       return (
  48         <Column>
  49           <LoadingIndicator />
  50         </Column>
  51       );
  52     }
  53
  54     return (
  55       <Column icon='ban' heading={intl.formatMessage(messages.heading)}>
  56         <ColumnBackButtonSlim />
  57         <ScrollableList scrollKey='domain_blocks' onLoadMore={this.handleLoadMore}>
  58           {domains.map(domain =>
  59             <DomainContainer key={domain} domain={domain} />
  60           )}
  61         </ScrollableList>
  62       </Column>
  63     );
  64   }
  65
  66 }