RenderProps challenges

renderprops.js

// Using RenderProps (https://github.com/ReactTraining/react-subjects/blob/master/subjects/RenderProps/exercise.js),
// how can I:
//
// 1) compose multiple fetches to be run simultaneously? In the example below, fetching credits would be blocked until
// debits have been fetched.
//
// 2) test the component without the fetches happening? Normally I'll have a component that takes props, and connect it
// to redux, and export both the connected component (as default) and the so-called presentational component as a named
// const. This allows me to preview the render using e.g. React Storybook.

class App extends React.Component {
  render() {
    return (
      <div className="accounting-dashboard">
        <h1>Debits and credits, ordered by date</h1>
        <Debits>
          {({ debits }) => (
            <Credits>
              {({ credits }) => {
                const orderedTransactions = _.orderStuffByDate(debits, credits)
                return orderedTransactions.map(t => <div>Amount: {t.amount}</div>)
              }}
            </Credits>
          )}
        </Debits>
      </div>
    )
  }
}

1. Just depends on how Debits and Credits are implemented. The way I would do them they'd be fetching in parallel:

<Debits>
  {({ debits, error:debitsError }) => (
    <div>
      {/*
        This renders immediately, while fetching, so you can display a spinner
        or whatever, for example:
      */}

      {debits == null && <p>Loading Debits...</p>}

      {/*
        That also means `Credits` can start loading too. In this way, the
        hierarchy can be a bit deceiving, since there's no actual hierarchical
        relationship between the two.
      */}

      <Credits>
        {({ credits, error:creditsError }) => (
          credits ? (
            <div>{credits.map(renderCredit)}</div>
          ) : (
            <div>Loading credits</div>
          )
        )}
      </Credits>
    </div>
  )}
</Debits>

// My render would look something like this:

<Debits>
  {({ debits, error:debitsError }) => (
    <Credits>
      {({ credits, error:creditsError }) => (
        debits && credits ? (
          <Ledger credits={credits} debits={debits}/>
        ) : debitsError || creditsError ? (
          <div>
            {debitsError && <Error error={debitsError}/>}
            {creditsError && <Error error={creditsError}/>}
          </div>
        ) : (
          <Spinner/>
        )
      )}
    </Credits>
  )}
</Debits>

And then for 2 you'd just test <Ledger/> same idea. These "fetch" components fetch state, and then you can render your "presentational" components. No screwing around w/ connect and exporting multiple things though.