Merge pull request #11 from log-oscon/feature/public-denormalize

Expose a denormalization for selectors

Author: xipasduarte

CHANGELOG.md

@@ -12,6 +12,7 @@ Some guidelines in reading this document:
 
 ## [new release]
 
+* Expose a denormalization mechanism so consumer can transform local ids into resources denormalized ([#11](https://github.com/log-oscon/redux-wpapi/pull/11))
 * Fix the Promise return from middleware dispatch, which should always resolve to `selectQuery` result ([#9](https://github.com/log-oscon/redux-wpapi/pull/9))
 
 ## 1.0.1

src/ReduxWPAPI.js

@@ -10,6 +10,7 @@ import isArray from 'lodash/isArray';
 import isUndefined from 'lodash/isUndefined';
 import { selectQuery } from './selectors';
 import WPAPIAdapter from './adapters/wpapi';
+import { lastCacheUpdate as lastCacheUpdateSymbol } from './symbols';
 
 import {
   REDUX_WP_API_CALL,
@@ -87,7 +88,7 @@ export default class ReduxWPAPI {
       }
 
       if (cache) {
-        lastCacheUpdate = cache.lastCacheUpdate;
+        lastCacheUpdate = cache[lastCacheUpdateSymbol];
       } else {
         cache = state.getIn(['requestsByQuery', payload.cacheID, payload.page]);
         data = state.get('data');
@@ -329,9 +330,9 @@ export default class ReduxWPAPI {
     let resourceTransformed = {
       ...oldState,
       ...resource,
+      ...meta,
       _links,
       _embedded,
-      lastCacheUpdate: meta.lastCacheUpdate,
     };
 
     if (this.adapter.transformResource) {

src/index.js

@@ -3,4 +3,5 @@ import ReduxWPAPI from './ReduxWPAPI';
 export default ReduxWPAPI;
 export * as RequestStatus from './constants/requestStatus';
 export callAPI from './actions/callAPI';
-export { selectQuery } from './selectors';
+export * as Symbols from './symbols';
+export { selectQuery, withDenormalize } from './selectors';

src/selectors.js

@@ -1,13 +1,21 @@
+import isFunction from 'lodash/isFunction';
 import { createSelector } from 'reselect';
+
 import { pending } from './constants/requestStatus';
 import { mapDeep } from './helpers';
+import { id as idSymbol } from './symbols';
 
 export const denormalize = (resources, id, memoized = {}) => {
   /* eslint-disable no-param-reassign, no-underscore-dangle */
   if (memoized[id]) return memoized[id];
 
   const resource = resources.get(id);
+  if (!resource) {
+    return null;
+  }
+
   memoized[id] = {
+    [idSymbol]: id,
     ...resource,
     ...mapDeep(resource._embedded || {},
       embeddedId => denormalize(resources, embeddedId, memoized)
@@ -19,6 +27,20 @@ export const denormalize = (resources, id, memoized = {}) => {
 
 export const localResources = state => state.wp.getIn(['resources']);
 
+export const withDenormalize = thunk =>
+  createSelector(
+    localResources,
+    thunk,
+    (resources, target) => {
+      if (!isFunction(target)) {
+        return target;
+      }
+
+      const memo = {};
+      return target(id => denormalize(resources, id, memo));
+    }
+  );
+
 export const selectQuery = name => createSelector(
   createSelector(
     state => state.wp.getIn(['requestsByName', name]),

src/symbols.js

@@ -0,0 +1,2 @@
+export const id = Symbol('ResourceLocalID');
+export const lastCacheUpdate = Symbol('lastCacheUpdate');

test/middleware.spec.js

@@ -14,6 +14,7 @@ import { createFakeStore } from './mocks/store';
 import { initialReducerState } from '../src/ReduxWPAPI';
 import { REDUX_WP_API_CALL, REDUX_WP_API_CACHE_HIT } from '../src/constants/actions';
 import { resolved, rejected } from '../src/constants/requestStatus';
+import { lastCacheUpdate as lastCacheUpdateSymbol } from '../src/symbols';
 
 const createCallAPIActionFrom = ({
   meta: { name },
@@ -33,10 +34,10 @@ const successfulQueryBySlugState = initialReducerState.set(
   new Immutable.List([
     {
       ...successfulQueryBySlug.payload.response[0]._embedded.author[0],
-      lastCacheUpdate: Date.now() },
+      [lastCacheUpdateSymbol]: Date.now() },
     {
       ...successfulQueryBySlug.payload.response[0],
-      lastCacheUpdate: Date.now(),
+      [lastCacheUpdateSymbol]: Date.now(),
       _embedded: { author: 0 },
     },
   ])

test/selector.spec.js

@@ -1,11 +1,13 @@
 import { describe, it } from 'mocha';
 import expect from 'expect';
 import Immutable from 'immutable';
+import { createSelector } from 'reselect';
+
 import { initialReducerState } from '../src/ReduxWPAPI';
-import { selectQuery } from '../src/selectors';
+import { selectQuery, withDenormalize } from '../src/selectors';
 import { pending, resolved } from '../src/constants/requestStatus';
 
-describe('Selector', () => {
+describe('Selector selectQuery', () => {
   it('should return a Request for empty state', () => {
     const state = { wp: initialReducerState };
     expect(selectQuery('test')(state))
@@ -141,3 +143,31 @@ describe('Selector', () => {
   });
 });
 
+
+describe('withDenormalize', () => {
+  it('should allow consumers to denormalize resources by local ids within selector', () => {
+    const resources = [
+      { id: 1,
+        title: 'lol',
+        _links: { parent: { url: 'http://dumb.com/test/2' } },
+        _embedded: { parent: 1 },
+      },
+      { id: 2, title: 'lol 2' },
+    ];
+    const storeState = {
+      wp: (
+        initialReducerState
+        .setIn(['resources'], new Immutable.List(resources))
+      ),
+    };
+
+    const selector = withDenormalize(
+      createSelector(
+        () => 1,
+        id => denormalize => denormalize(id)
+      )
+    );
+    const selectedState = selector(storeState);
+    expect(selectedState).toInclude(resources[1]);
+  });
+});