You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

66 lines
2.0 KiB

  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. const messages = defineMessages({
  15. heading: { id: 'column.domain_blocks', defaultMessage: 'Hidden domains' },
  16. unblockDomain: { id: 'account.unblock_domain', defaultMessage: 'Unhide {domain}' },
  17. });
  18. const mapStateToProps = state => ({
  19. domains: state.getIn(['domain_lists', 'blocks', 'items']),
  20. });
  21. @connect(mapStateToProps)
  22. @injectIntl
  23. export default class Blocks extends ImmutablePureComponent {
  24. static propTypes = {
  25. params: PropTypes.object.isRequired,
  26. dispatch: PropTypes.func.isRequired,
  27. domains: ImmutablePropTypes.list,
  28. intl: PropTypes.object.isRequired,
  29. };
  30. componentWillMount () {
  31. this.props.dispatch(fetchDomainBlocks());
  32. }
  33. handleLoadMore = debounce(() => {
  34. this.props.dispatch(expandDomainBlocks());
  35. }, 300, { leading: true });
  36. render () {
  37. const { intl, domains } = this.props;
  38. if (!domains) {
  39. return (
  40. <Column>
  41. <LoadingIndicator />
  42. </Column>
  43. );
  44. }
  45. return (
  46. <Column icon='minus-circle' heading={intl.formatMessage(messages.heading)}>
  47. <ColumnBackButtonSlim />
  48. <ScrollableList scrollKey='domain_blocks' onLoadMore={this.handleLoadMore}>
  49. {domains.map(domain =>
  50. <DomainContainer key={domain} domain={domain} />
  51. )}
  52. </ScrollableList>
  53. </Column>
  54. );
  55. }
  56. }