app/javascript/flavours/glitch/features/list_adder/index.js

   1 import React from 'react';
   2 import PropTypes from 'prop-types';
   3 import ImmutablePropTypes from 'react-immutable-proptypes';
   4 import { connect } from 'react-redux';
   5 import ImmutablePureComponent from 'react-immutable-pure-component';
   6 import { injectIntl } from 'react-intl';
   7 import { setupListAdder, resetListAdder } from '../../actions/lists';
   8 import { createSelector } from 'reselect';
   9 import List from './components/list';
  10 import Account from './components/account';
  11 import NewListForm from '../lists/components/new_list_form';
  12 // hack
  13
  14 const getOrderedLists = createSelector([state => state.get('lists')], lists => {
  15   if (!lists) {
  16     return lists;
  17   }
  18
  19   return lists.toList().filter(item => !!item).sort((a, b) => a.get('title').localeCompare(b.get('title')));
  20 });
  21
  22 const mapStateToProps = state => ({
  23   listIds: getOrderedLists(state).map(list=>list.get('id')),
  24 });
  25
  26 const mapDispatchToProps = dispatch => ({
  27   onInitialize: accountId => dispatch(setupListAdder(accountId)),
  28   onReset: () => dispatch(resetListAdder()),
  29 });
  30
  31 export default @connect(mapStateToProps, mapDispatchToProps)
  32 @injectIntl
  33 class ListAdder extends ImmutablePureComponent {
  34
  35   static propTypes = {
  36     accountId: PropTypes.string.isRequired,
  37     onClose: PropTypes.func.isRequired,
  38     intl: PropTypes.object.isRequired,
  39     onInitialize: PropTypes.func.isRequired,
  40     onReset: PropTypes.func.isRequired,
  41     listIds: ImmutablePropTypes.list.isRequired,
  42   };
  43
  44   componentDidMount () {
  45     const { onInitialize, accountId } = this.props;
  46     onInitialize(accountId);
  47   }
  48
  49   componentWillUnmount () {
  50     const { onReset } = this.props;
  51     onReset();
  52   }
  53
  54   render () {
  55     const { accountId, listIds } = this.props;
  56
  57     return (
  58       <div className='modal-root__modal list-adder'>
  59         <div className='list-adder__account'>
  60           <Account accountId={accountId} />
  61         </div>
  62
  63         <NewListForm />
  64
  65
  66         <div className='list-adder__lists'>
  67           {listIds.map(ListId => <List key={ListId} listId={ListId} />)}
  68         </div>
  69       </div>
  70     );
  71   }
  72
  73 }