import createSelector from 'reselect';
import fp from 'lodash/fp';

export getState = state => state;

export getProps = (_, props) => props;
// ^ just including this to mention I like to make prop access explicit, as it reminds
// me there's an explicit coupling introduced by using component props in a selector.

export const getEntities => createSelector(getState, fp.get('entities'));
export const getArticles => createSelector(getEntities, fp.get('articles'));
export const getArticleIdFromProps => createSelector(getProps, fp.get('activeArticleId'));
// ^ I also like to explicity indicate (in the selector name) when
// a select is reliant on a prop in order to expose that coupling.
export const getArticle => createSelector(
   getArticleIdFromProps,
   getArticles,
   fp.get // lodash/fp makes point-free function application particularly easy here.
);
/*
  These selectors then get exposed on window.selectors in debug mode.
  Prop-based selectors are ignored, thus window.selectors.getEntities &
  window.selectors.getArticles will be computed, but getArticle and
  getArticleIdFromProps will not.
  
  A potential solution that I often use is to store route params in
  Redux, so we could compute `activeArticle` using a selector provided by react-router-redux:
*/

export const getActiveArticle = createSelector(
  getArticles,
  createMatchSelector({ path: '/articles/:articleId' }), // https://github.com/ReactTraining/react-router/blob/master/packages/react-router-redux/modules/selectors.js
  ((articles, match) => ({
    activeArticleId: articles[match.params.articleId] // assuming I don't need to do any null checks for this example…
  })
);