accounts_containers.js

//@flow
import React from "react";
import { connect } from "react-redux";
import { push } from "connected-react-router";
import {
  crudTemplate,
  createLocationSelector,
} from "src/crud";
import {
  selectCustomer,
} from "src/customers/actions";
import { CRUDList } from "src/components";
import AccountForm from "./AccountForm";
import Accounts from "./Accounts";
import AccountDetails from "./AccountDetails";
import actions from "./actions";
import CustomerAccountsC from "./CustomerAccounts";

const {
  deactivate,
  activate,
  ...entitiesActions
} = actions;

const { remove } = entitiesActions;

const {
  mainTemplate,
  formTemplate,
  detailTemplate,
  listTemplate
} = crudTemplate("customers/:uid/accounts", {
  entityName: "accounts",
  singleResourcePath: ({ locationParams: { uid } }) => `customers/${uid}/accounts`,
  entitiesActions,
  DetailComponent: AccountDetails,
  listStateOverride: (state, { customer }) => customer.accounts
    || {
      ids: [], updatingVersion: false, total: 0, valid: false
    }
});

const detailDispatchConfig = (dispatch) => ({
  close: (id, { locationParams, item: { customerId } }) => {
    const { uid } = locationParams;
    dispatch(remove(id, { customerId: uid || customerId }));
  },
  deactivate: (body, { locationParams, item: { customerId } }) => {
    const { uid } = locationParams;
    dispatch(deactivate(body, { customerId: uid || customerId }));
  },
  activate: (body, { locationParams, item: { customerId } }) => {
    const { uid } = locationParams;
    dispatch(activate(body, { customerId: uid || customerId }));
  },
  goToTransactions: (id, { locationParams, item: { customerId } }) => {
    const { uid } = locationParams;
    dispatch(push(`/customer_transactions/${uid || customerId}/accounts/${id}`));
  }
});

const Detail = detailTemplate({
  dispatches: detailDispatchConfig
})(AccountDetails);

const Form = formTemplate()(AccountForm);

const List = listTemplate()(CRUDList);

const MainC = mainTemplate({
  mapState: ({
    entities: {
      customers: { selected }
    },
    entities: { customers: { byId: byIdA } }
  }, { customer }) => ({
    customer: customer || byIdA[selected]
  })
})(Accounts);

export const Main = ({ customer, ...props }: { customer: Object }) => (
  <MainC
    {...props}
    renderDetail={(p) => (
      <Detail
        {...p}
        renderEdit={(p1) => <Form {...p1} customer={customer} />}
        customer={customer}
      />
    )}
    renderForm={(p) => <Form {...p} customer={customer} />}
    renderList={(p) => <List {...p} customer={customer} />}
  />
);

const locationSelector = createLocationSelector();

export const CustomerAccounts = connect(({
  router: { location: { pathname } },
  entities: { customers: { byId, selected, fetchingSelected } },
  session: { permissions }
}) => {
  const locationParams = locationSelector({ pathname, resource: "/customer_accounts/:uid?" });
  const { uid } = locationParams;
  const customerId = selected || uid;
  const customer = byId[customerId];
  return {
    customerId,
    customer,
    fetchingSelected,
    permissions,
    locationParams,
    renderAccounts: Main
  };
},
(dispatch) => ({
  refresh: ({ id }) => {
    if (id) {
      dispatch(selectCustomer(id));
      dispatch(push(`/customer_accounts/${id}`));
    }
  }
}))(CustomerAccountsC);

customers_container.js

//@flow
import React from "react";
import { connect } from "react-redux";
import { push } from "connected-react-router";
import {
  selectedSelector,
  createLocationSelector
} from "src/crud";
import { selectCustomer } from "src/customers/actions";
import { selectAccount } from "src/accounts/actions";
import customerScopedActions from "src/customers/accounts/actions";
import Transactions from "src/transactions";
import CustomerTransactions from "./CustomerTransactions";

const {
  fetchOne: fetchAccount,
} = customerScopedActions;

const customerSelector = selectedSelector();
const accountSelector = selectedSelector();

const getLocationParams = createLocationSelector();

const renderTransactions = (props) => <Transactions {...props} />;

export default connect(
  ({
    entities: {
      customers: { byId: byIdA, selected: selectedCustomer },
      accounts: { byId: byIdB, fetching: fetchingAccount, selected: selectedAccount }
    },
    router: { location: { pathname } }
  }) => {
    const { uid } = getLocationParams({
      pathname,
      resource: "/customer_transactions/:uid?"
    });
    const { accId } = getLocationParams({
      pathname,
      resource: "/customer_transactions/:uid/accounts/:accId?"
    });
    const customerId = selectedCustomer || uid;
    const accountId = selectedAccount || accId;
    const customer = customerSelector({ byId: byIdA, selectedId: customerId });
    const account = accountSelector({ byId: byIdB, selectedId: accountId });
    const transactionFilterParams = { customerId, accountId };
    return {
      uid,
      customer,
      customerId,
      account,
      accountId,
      renderTransactions,
      transactionFilterParams,
      fetchingAccount
    };
  },
  (dispatch) => ({
    accountLoader: ({ accountId, customerId }) => {
      if (accountId && customerId) {
        dispatch(fetchAccount(accountId, { customer: { id: customerId } }));
      }
    },
    refresh: ({ id }) => {
      if (id) {
        // dispatch(invalidateCache(["transactions"]));
        dispatch(selectCustomer(id));
        dispatch(push(`/customer_transactions/${id}`));
      }
    },
    refreshWithAccount: ({ id, customerId }) => {
      if (id && customerId) {
        // dispatch(invalidateCache(["transactions"]));
        dispatch(selectCustomer(customerId));
        dispatch(selectAccount(id));
        dispatch(push(`/customer_transactions/${customerId}/accounts/${id}`));
      }
    }
  })
)(CustomerTransactions);