containers.js

//@flow
import React from "react";
import {
  crudTemplate,
  legacyEntitiesOptionsSelector
} from "src/crud";
import actions from "./actions";
import Transactions from "./Transactions";
import TransactionsList from "./TransactionsList";
import TransactionsFilter from "./TransactionsFilter";
import TransactionDetails from "./TransactionDetails";

//FIXME change this URI pattern to be like a query params pattern
const {
  mainTemplate,
  filterTemplate,
  detailTemplate
} = crudTemplate("customer_transactions/:uid?(/accounts/:accId?)", {
  entityName: "transactions",
  singleResourcePath: ({ locationParams: { uid, accId } }) => `customers_transactions/${uid}/accounts/${accId}`,
  entitiesActions: actions,
  ListComponent: TransactionsList
});

const { revert, cancel } = actions;

const getTransactionTypeOptions = legacyEntitiesOptionsSelector();
const getTransactionStatusesOptions = legacyEntitiesOptionsSelector();
const getTransactionChannelsOptions = legacyEntitiesOptionsSelector();

const Filter = filterTemplate({
  mapState: ({
    types: {
      entities: {
        transactionTypes, transactionStatuses, channels
      },
      result: { transactionTypes: ids1, transactionStatuses: ids2, channels: ids3 }
    },
    entities: { customers: { byId, selected } }
  }, baseState, { customer }) => ({
    customer: customer || byId[selected],
    transactionTypes: getTransactionTypeOptions({
      byId: transactionTypes,
      ids: ids1,
      optional: true
    }),
    channels: getTransactionChannelsOptions({
      byId: channels,
      ids: ids3,
      optional: true
    }),
    statuses: getTransactionStatusesOptions({
      byId: transactionStatuses,
      ids: ids2,
      optional: true
    })
  })
})(TransactionsFilter);

const renderFilter = (props) => <Filter {...props} />;

const Detail = detailTemplate({
  mapState: ({ entities: { transactions: { warnOnChange } } }) => ({ warnOnChange }),
  dispatches: (dispatch) => ({
    cancel: (item) => dispatch(cancel(item)),
    revert: (id, item) => dispatch(revert(id, item)),
  })
})(TransactionDetails);

const renderDetail = (props) => <Detail {...props} />;

export default mainTemplate({
  mapState: ({ entities: { accounts: { byId } } }) => ({
    accountsById: byId,
    renderFilter,
    renderDetail
  })
})(Transactions);