Merge pull request #427 from codaco/fix/refactor-narrative-selector

Refactor narrative selectors to defer to codebook selectors

src/components/StageEditor/sections/NarrativePresets/__tests__/selectors.test.js

@@ -46,27 +46,27 @@ const mockState = {
 describe('NarrativePresets', () => {
   describe('selectors', () => {
     it('get layout variables for node type', () => {
-      const result = getLayoutVariablesForNodeType(mockState, { nodeType });
+      const result = getLayoutVariablesForNodeType(mockState, nodeType);
 
       expect(result).toEqual([{
         value: '1234-1234-1',
         label: 'my layout',
-        color: '',
+        type: 'layout',
       }]);
     });
 
     it('get highlight variables for node type', () => {
-      const result = getHighlightVariablesForNodeType(mockState, { nodeType });
+      const result = getHighlightVariablesForNodeType(mockState, nodeType);
 
       expect(result).toEqual([{
         value: '1234-1234-3',
         label: 'my boolean',
-        color: '',
+        type: 'boolean',
       }]);
     });
 
     it('get group variables for node type', () => {
-      const result = getGroupVariablesForNodeType(mockState, { nodeType });
+      const result = getGroupVariablesForNodeType(mockState, nodeType);
 
       expect(result).toEqual([
         {
@@ -76,13 +76,13 @@ describe('NarrativePresets', () => {
         {
           value: '1234-1234-2',
           label: 'my category',
-          color: '',
+          type: 'categorical',
         },
       ]);
     });
 
     it('get edges for node type', () => {
-      const result = getEdgesForNodeType(mockState, { nodeType });
+      const result = getEdgesForNodeType(mockState, nodeType);
 
       expect(result).toEqual([{
         value: '1234-5',

src/components/StageEditor/sections/NarrativePresets/selectors.js

@@ -1,63 +1,38 @@
-import { get, map, reduce } from 'lodash';
+import { map } from 'lodash';
 import { getCodebook } from '../../../../selectors/protocol';
+import { getVariableOptionsForNodeType } from '../../../../selectors/codebook';
 
-// TODO: refactor this to use new selector
-export const getVariablesForNodeType = (state, props) => {
-  const nodeType = props.nodeType;
-  const codebook = getCodebook(state);
-  return get(codebook, ['node', nodeType, 'variables'], {});
-};
+export const getLayoutVariablesForNodeType = (state, nodeType) => {
+  const variables = getVariableOptionsForNodeType(state, nodeType);
 
-const asOption = (value, key) =>
-  ({
-    label: get(value, 'name', ''),
-    value: key,
-    color: get(value, 'color', ''),
-  });
-
-const filterAsOption = rule =>
-  (memo, item, id) => {
-    if (!rule(item)) { return memo; }
-    return [
-      ...memo,
-      asOption(item, id),
-    ];
-  };
-
-export const getLayoutVariablesForNodeType = (state, props) => {
-  const variables = getVariablesForNodeType(state, props);
-
-  return reduce(
-    variables,
-    filterAsOption(item => item.type === 'layout'),
-    [],
-  );
+  return variables.filter(item => item.type === 'layout');
 };
 
-export const getHighlightVariablesForNodeType = (state, props) => {
-  const variables = getVariablesForNodeType(state, props);
+export const getHighlightVariablesForNodeType = (state, nodeType) => {
+  const variables = getVariableOptionsForNodeType(state, nodeType);
 
-  return reduce(
-    variables,
-    filterAsOption(item => item.type === 'boolean'),
-    [],
-  );
+  return variables.filter(item => item.type === 'boolean');
 };
 
-export const getGroupVariablesForNodeType = (state, props) => {
-  const variables = getVariablesForNodeType(state, props);
+export const getGroupVariablesForNodeType = (state, nodeType) => {
+  const variables = getVariableOptionsForNodeType(state, nodeType);
 
-  const options = reduce(
-    variables,
-    filterAsOption(item => item.type === 'categorical'),
-    [{ label: '\u2014 None \u2014', value: '' }],
+  const categoricalOptions = variables.filter(
+    item => item.type === 'categorical',
   );
 
-  return options;
+  return [
+    { label: '\u2014 None \u2014', value: '' },
+    ...categoricalOptions,
+  ];
 };
 
 export const getEdgesForNodeType = (state) => {
   const codebook = getCodebook(state);
 
-  return map(codebook.edge, asOption);
+  return map(codebook.edge, (edge, edgeId) => ({
+    label: edge.name,
+    color: edge.color,
+    value: edgeId,
+  }));
 };

src/components/StageEditor/sections/NarrativePresets/withOptionsForPreset.js

@@ -7,11 +7,11 @@ import {
 } from './selectors';
 
 
-const mapStateToProps = (state, props) => {
-  const layoutVariblesForNodeType = getLayoutVariablesForNodeType(state, props);
-  const highlightVariablesForNodeType = getHighlightVariablesForNodeType(state, props);
-  const groupVariablesForNodeType = getGroupVariablesForNodeType(state, props);
-  const edgesForNodeType = getEdgesForNodeType(state, props);
+const mapStateToProps = (state, { nodeType }) => {
+  const layoutVariblesForNodeType = getLayoutVariablesForNodeType(state, nodeType);
+  const highlightVariablesForNodeType = getHighlightVariablesForNodeType(state, nodeType);
+  const groupVariablesForNodeType = getGroupVariablesForNodeType(state, nodeType);
+  const edgesForNodeType = getEdgesForNodeType(state, nodeType);
 
   return {
     layoutVariblesForNodeType,

src/selectors/codebook.js

@@ -10,7 +10,6 @@ const getVariablesAsOptions = variables =>
     (variable, id) => ({
       label: variable.name,
       value: id,
-      color: variable.color,
       type: variable.type,
     }),
   );