12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273 |
- 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>
- );
- }
- }
|