How do I combine ramda with recompose?

Question

I have this component;

const ReposGrid = R.pipe(
    R.prop("repos"),
 // branch(R.isEmpty, renderComponent(Loader)),
    R.map(Repo),
    ReposWraper
)

export default ReposGrid

This works fine but I want to render loader component if repos is empty. My branch from recompose just doesn't do anything. It doesn't show Loader neither displays repos when it's loaded. Can I apply R.ifElse here?

Answer 1

You might be mixing up ramda's pipe/compose and recompose's, and the arguments they take. Your chain is made up of a mix of higher order components and functions operating on props. It's best to keep the data handling in mapProps/withProps etc.

You might be able to achieve something similar to what you're after like this:

import { map, evolve, propSatisfies, isEmpty } from 'ramda'
import { compose, branch, renderComponent, mapProps, renameProp } from 'recompose'

const Repo = (repo) => <div>Repo {repo}</div>
const Loader = () => <div>Loader</div>
const RepoGridBase = props => <div>{props.children}</div>

const ReposGrid = compose(
    branch(
      propSatisfies(isEmpty, 'repos'),
      renderComponent(Loader),
    ),
    mapProps(evolve({
      repos: map(Repo)
    })),
    renameProp('repos', 'children')
)(RepoGridBase)

function App() {
  return (
    <div className="App">
      <ReposGrid repos={[]} />
      <ReposGrid repos={['one', 'two']} />
    </div>
  );
}

(this will throw key warnings, you'd probably be better of doing the map inside of a component explicitly)

codesandbox link