accountsSelectContainer.js

//@flow
import { connect } from "react-redux";
import {
  entitiesOptionsSelector
} from "src/crud";
import { entitySelectTemplate } from "src/containerTemplates";
import basicActions, {
  fetchAccountSuggestions
} from "./actions";
import AccountsAutosuggestC from "./AccountsAutosuggest";
import AccountsSelectC from "./AccountsSelect";

const { filter } = basicActions;

export const AccountsAutosuggest = connect(
  ({
    entities: {
      customers: { byId: customersById }
    }
  }) => ({
    customersById
  }),
  {
    fetchAccountSuggestions,
  }
)(AccountsAutosuggestC);

const accountOptionsSelector = entitiesOptionsSelector({
  getLabel: ({ number, currency }) => `${number}.${currency}`
});

export const AccountsSelect = entitySelectTemplate("accounts", filter, {
  mapState: ({ entities: { accounts: { byId } } }, { error, fetching }, { customer }) => {
    const { accounts: customerAccounts } = customer || { accounts: { ids: [] } };
    const { ids, valid } = customerAccounts || { ids: [], valid: false };
    const items = accountOptionsSelector({ ids, byId, error });
    return {
      accounts: byId,
      error,
      items,
      fetching,
      valid
    };
  },
  dispatches: (dispatch) => ({
    fetch: ({ customer }) => customer && customer.id
      && dispatch(filter({ customerId: customer.id }))
  })
})(AccountsSelectC);