Implement resource passing

Author: Ronni Persson

package.json

@@ -54,13 +54,17 @@
     "jest-enzyme": "^6.0.0",
     "react": "^16.3.2",
     "react-dom": "^16.3.2",
+    "redux": "^4.0.0",
+    "redux-mock-store": "^1.5.3",
     "redux-thunk": "^2.2.0",
     "regenerator-runtime": "^0.11.1",
     "rimraf": "^2.6.2",
     "rollup": "^0.56.4"
   },
   "dependencies": {
-    "redux-json-api": "^2.0.0"
+    "react-redux": "^5.0.7",
+    "redux-json-api": "^2.0.0",
+    "reselect": "^3.0.1"
   },
   "peerDependencies": {
     "react": "^16.3.2"

src/DataSet.js

@@ -1,13 +1,15 @@
 /* @flow */
 
 import { PureComponent } from 'react';
-import type { JsonApiResource } from 'json-api';
+import { connect } from 'react-redux';
+import type { JSONAPIResource, JSONAPIResourceIdentifier } from 'json-api';
 import type { RenderProp } from './Query';
+import { selectResources } from './selectors';
 
 type Props = {
   children: RenderProp,
   loading: boolean,
-  resources: Array<JsonApiResource<any>>
+  resources: Array<JSONAPIResource>
 };
 
 export class DataSet extends PureComponent<Props> {
@@ -24,4 +26,8 @@ export class DataSet extends PureComponent<Props> {
   }
 }
 
-export default DataSet;
+const mapStateToProps = (state, props) => ({
+  resources: selectResources(state, props),
+});
+
+export default connect(mapStateToProps)(DataSet);

src/Query.js

@@ -1,13 +1,13 @@
 /* @flow */
 
-import type { JsonApiResource } from 'json-api';
+import type { JSONAPIResource } from 'json-api';
 import React, { type Node, PureComponent } from 'react';
 import { readEndpoint } from 'redux-json-api';
 import DataSet from './DataSet';
 
 export type RenderProp = ({
   loading: boolean,
-  resources: Array<JsonApiResource<any>>
+  resources: Array<JSONAPIResource>
 }) => Node
 
 type Props = {|
@@ -21,6 +21,10 @@ type State = {|
 |};
 
 class Query extends PureComponent<Props, State> {
+  state = {
+    resourceIds: [],
+  };
+
   componentDidMount() {
     this.fetchData();
   }

src/__tests__/DataSet.test.js

@@ -1,24 +1,46 @@
 /* @flow */
 import React from 'react';
+import configureStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
 import { mount } from 'enzyme';
-import type { JsonApiResource } from 'json-api';
-import DataSet from '../DataSet';
+import type { JSONAPIResource } from 'json-api';
+import ConnectedDataSet, { DataSet } from '../DataSet';
 
-type User = JsonApiResource<'users', {
-  name: string
-}>;
+let mockResources;
+jest.mock('../selectors', () => ({
+  selectResources: () => mockResources,
+}));
 
-const createMockUser = (name: string): User => ({
+const mockStore = configureStore([thunk]);
+
+const createMockUser = (name: string): JSONAPIResource => ({
   type: 'users',
   id: '1',
   attributes: {
     name,
   },
 });
 
+beforeEach(() => {
+  mockResources = undefined;
+});
+
+it('should pass specified resource to render prop', () => {
+  const child = jest.fn(() => <div />);
+  const resources = [createMockUser('Line')];
+  mockResources = resources;
+  mount(<ConnectedDataSet
+    resourceIds={resources.map(({ id, type }) => ({ id, type }))}
+    store={mockStore({})}
+  >
+    {child}
+  </ConnectedDataSet>);
+  expect(child).toHaveBeenCalledWith({ loading: false, resources });
+});
+
 it('should pass resources to render prop', () => {
   const child = jest.fn(() => <div />);
-  const resources: Array<User> = [createMockUser('name')];
+  const resources: Array<JSONAPIResource> = [createMockUser('name')];
   mount(<DataSet resources={resources}>{child}</DataSet>);
   expect(child).toHaveBeenCalledWith({ loading: false, resources });
 });

src/__tests__/Query.test.js

@@ -13,6 +13,7 @@ jest.mock('redux-json-api', () => ({
 
 beforeEach(() => {
   props = {
+    children: () => <div />,
     dispatch: jest.fn(io => io),
     endpoint: '/posts',
   };

src/selectors.js

@@ -0,0 +1,18 @@
+/* @flow */
+
+import { createSelector } from 'reselect';
+import type { JSONAPIResourceIdentifier } from 'json-api';
+
+const selectApiScope = state => state.api;
+
+const selectResourceIds = (state, props): Array<JSONAPIResourceIdentifier> => props.resourceIds;
+
+export const selectResources = createSelector(
+  [selectApiScope, selectResourceIds],
+  (api, resourceIds) => resourceIds.map(resourceId =>
+    api[resourceId.type].data.find(resource =>
+      resource.id === resourceId.id)),
+);
+
+// dummy
+export const someOtherSelect = createSelector();

yarn.lock

@@ -2427,6 +2427,10 @@ [email protected]:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/hoek/-/hoek-4.2.1.tgz#9634502aa12c445dd5a7c5734b572bb8738aacbb"
 
+hoist-non-react-statics@^2.5.0:
+  version "2.5.5"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47"
+
 home-or-tmp@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/home-or-tmp/-/home-or-tmp-2.0.0.tgz#e36c3f2d2cae7d746a857e38d18d5f32a7882db8"
@@ -2528,7 +2532,7 @@ inquirer@^3.0.6:
     strip-ansi "^4.0.0"
     through "^2.3.6"
 
-invariant@^2.2.0, invariant@^2.2.2:
+invariant@^2.0.0, invariant@^2.2.0, invariant@^2.2.2:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
   dependencies:
@@ -3339,6 +3343,10 @@ locate-path@^2.0.0:
     p-locate "^2.0.0"
     path-exists "^3.0.0"
 
+lodash-es@^4.17.5:
+  version "4.17.10"
+  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.10.tgz#62cd7104cdf5dd87f235a837f0ede0e8e5117e05"
+
 lodash._basefor@^3.0.0:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/lodash._basefor/-/lodash._basefor-3.0.3.tgz#7550b4e9218ef09fad24343b612021c79b4c20c2"
@@ -3390,6 +3398,10 @@ lodash.isplainobject@^3.2.0:
     lodash.isarguments "^3.0.0"
     lodash.keysin "^3.0.0"
 
+lodash.isplainobject@^4.0.6:
+  version "4.0.6"
+  resolved "https://registry.yarnpkg.com/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz#7c526a52d89b45c45cc690b88163be0497f550cb"
+
 lodash.istypedarray@^3.0.0:
   version "3.0.6"
   resolved "https://registry.yarnpkg.com/lodash.istypedarray/-/lodash.istypedarray-3.0.6.tgz#c9a477498607501d8e8494d283b87c39281cef62"
@@ -3413,7 +3425,7 @@ lodash.sortby@^4.7.0:
   version "4.7.0"
   resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
 
-lodash@^4.13.1, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.3.0:
+lodash@^4.13.1, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.0, lodash@^4.3.0:
   version "4.17.10"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.10.tgz#1b7793cf7259ea38fb3661d4d38b3260af8ae4e7"
 
@@ -4162,6 +4174,17 @@ react-reconciler@^0.7.0:
     object-assign "^4.1.1"
     prop-types "^15.6.0"
 
+react-redux@^5.0.7:
+  version "5.0.7"
+  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-5.0.7.tgz#0dc1076d9afb4670f993ffaef44b8f8c1155a4c8"
+  dependencies:
+    hoist-non-react-statics "^2.5.0"
+    invariant "^2.0.0"
+    lodash "^4.17.5"
+    lodash-es "^4.17.5"
+    loose-envify "^1.1.0"
+    prop-types "^15.6.0"
+
 react-test-renderer@^16.0.0-0:
   version "16.3.2"
   resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.3.2.tgz#3d1ed74fda8db42521fdf03328e933312214749a"
@@ -4271,10 +4294,23 @@ redux-json-api@^2.0.0:
     pluralize "^1.2.1"
     redux-actions "^0.9.1"
 
+redux-mock-store@^1.5.3:
+  version "1.5.3"
+  resolved "https://registry.yarnpkg.com/redux-mock-store/-/redux-mock-store-1.5.3.tgz#1f10528949b7ce8056c2532624f7cafa98576c6d"
+  dependencies:
+    lodash.isplainobject "^4.0.6"
+
 redux-thunk@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.2.0.tgz#e615a16e16b47a19a515766133d1e3e99b7852e5"
 
+redux@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/redux/-/redux-4.0.0.tgz#aa698a92b729315d22b34a0553d7e6533555cc03"
+  dependencies:
+    loose-envify "^1.1.0"
+    symbol-observable "^1.2.0"
+
 regenerate@^1.2.1:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.0.tgz#4a856ec4b56e4077c557589cae85e7a4c8869a11"
@@ -4403,6 +4439,10 @@ require-uncached@^1.0.3:
     caller-path "^0.1.0"
     resolve-from "^1.0.0"
 
+reselect@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/reselect/-/reselect-3.0.1.tgz#efdaa98ea7451324d092b2b2163a6a1d7a9a2147"
+
 resolve-cwd@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"
@@ -4797,6 +4837,10 @@ supports-color@^5.3.0:
   dependencies:
     has-flag "^3.0.0"
 
+symbol-observable@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
+
 symbol-tree@^3.2.2:
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.2.tgz#ae27db38f660a7ae2e1c3b7d1bc290819b8519e6"