content: import React from 'react';
  import { connect } from 'react-redux';
  import PropTypes from 'prop-types';
  import ImmutablePropTypes from 'react-immutable-proptypes';
  import LoadingIndicator from '../../components/loading_indicator';
  import Column from '../ui/components/column';
  import ColumnBackButtonSlim from '../../components/column_back_button_slim';
  import { fetchLists } from '../../actions/lists';
  import { defineMessages, injectIntl } from 'react-intl';
  import ImmutablePureComponent from 'react-immutable-pure-component';
  import ColumnLink from '../ui/components/column_link';
  import ColumnSubheading from '../ui/components/column_subheading';
  import NewListForm from './components/new_list_form';
  import { createSelector } from 'reselect';
  
  const messages = defineMessages({
    heading: { id: 'column.lists', defaultMessage: 'Lists' },
    subheading: { id: 'lists.subheading', defaultMessage: 'Your lists' },
  });
  
  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 => ({
    lists: getOrderedLists(state),
  });
  
  @connect(mapStateToProps)
  @injectIntl
  export default class Lists extends ImmutablePureComponent {
  
    static propTypes = {
      params: PropTypes.object.isRequired,
      dispatch: PropTypes.func.isRequired,
      lists: ImmutablePropTypes.list,
      intl: PropTypes.object.isRequired,
    };
  
    componentWillMount () {
      this.props.dispatch(fetchLists());
    }
  
    render () {
      const { intl, lists } = this.props;
  
      if (!lists) {
        return (
          <Column>
            <LoadingIndicator />
          </Column>
        );
      }
  
      return (
        <Column icon='bars' heading={intl.formatMessage(messages.heading)}>
          <ColumnBackButtonSlim />
  
          <NewListForm />
  
          <div className='scrollable'>
            <ColumnSubheading text={intl.formatMessage(messages.subheading)} />
  
            {lists.map(list =>
              <ColumnLink key={list.get('id')} to={`/timelines/list/${list.get('id')}`} icon='bars' text={list.get('title')} />
            )}
          </div>
        </Column>
      );
    }
  
  }
  