content: import React from 'react';
  import PropTypes from 'prop-types';
  import ImmutablePropTypes from 'react-immutable-proptypes';
  import { connect } from 'react-redux';
  import ImmutablePureComponent from 'react-immutable-pure-component';
  import { injectIntl } from 'react-intl';
  import { setupListAdder, resetListAdder } from '../../actions/lists';
  import { createSelector } from 'reselect';
  import List from './components/list';
  import Account from './components/account';
  import NewListForm from '../lists/components/new_list_form';
  // hack
  
  const getOrderedLists = createSelector([state => state.get('lists')], lists => {
    if (!lists) {
      return lists;
    }
  
    return lists.toList().filter(item => !!item).sort((a, b) => a.get('title').localeCompare(b.get('title')));
  });
  
  const mapStateToProps = state => ({
    listIds: getOrderedLists(state).map(list=>list.get('id')),
  });
  
  const mapDispatchToProps = dispatch => ({
    onInitialize: accountId => dispatch(setupListAdder(accountId)),
    onReset: () => dispatch(resetListAdder()),
  });
  
  export default @connect(mapStateToProps, mapDispatchToProps)
  @injectIntl
  class ListAdder extends ImmutablePureComponent {
  
    static propTypes = {
      accountId: PropTypes.string.isRequired,
      onClose: PropTypes.func.isRequired,
      intl: PropTypes.object.isRequired,
      onInitialize: PropTypes.func.isRequired,
      onReset: PropTypes.func.isRequired,
      listIds: ImmutablePropTypes.list.isRequired,
    };
  
    componentDidMount () {
      const { onInitialize, accountId } = this.props;
      onInitialize(accountId);
    }
  
    componentWillUnmount () {
      const { onReset } = this.props;
      onReset();
    }
  
    render () {
      const { accountId, listIds } = this.props;
  
      return (
        <div className='modal-root__modal list-adder'>
          <div className='list-adder__account'>
            <Account accountId={accountId} />
          </div>
  
          <NewListForm />
  
  
          <div className='list-adder__lists'>
            {listIds.map(ListId => <List key={ListId} listId={ListId} />)}
          </div>
        </div>
      );
    }
  
  }
  