nullable-component.tsx

/**
* To avoid null state
*/
export const NullableComponent = (
  component: Component,
  vnodeForNull: VNode | null = null,
  componentSinks: Array<string> = ["DOM", "onion"]
) => (sources: Sources): Sinks => {
  const t$ = sources.onion.state$.map(
    state =>
      state === null
        ? {
            DOM: xs.of(
              vnodeForNull !== null ? vnodeForNull : <div>No data</div>
            )
          }
        : component(sources)
  );
  return componentSinks
    .map(sinkName => [
      [sinkName],
      t$.map(s => R.propOr(xs.of(), sinkName, s)).flatten()
    ])
    .reduce((acc, val) => ({ ...acc, [val[0]]: val[1] }), {});
};

// lens
export const currentProjectLens = {
  get: state => state.projects.find(p => p._id === state.app.projCurId) || null,
  set: (state, childState) => ({
    ...state,
    projects: state.projects.map(
      (item: any) => (item._id === childState._id ? childState : item)
    )
  })
};

// connecting component
  const projectContainer = isolate(
    NullableComponent(ProjectContainer, null, ["DOM", "onion", "feathers"]),
    { onion: currentProjectLens }
  )(sources);