Reading: Add F&P materials

app/assets/javascripts/reader_profile_january/FAndPEnglishTab.js

@@ -1,22 +1,16 @@
 import React from 'react';
 import tabProptypes from './tabPropTypes';
-import {mostRecentDataPoint} from './dibelsParsing';
 import {F_AND_P_ENGLISH} from '../reading/thresholds';
-import {Tab} from './Tabs';
+import GenericDibelsTab from './GenericDibelsTab';
 
 
 export default class FAndPEnglishTab extends React.Component {
   render() {
-    const {style, onClick, readerJson} = this.props;
-
-    const dataPoint = mostRecentDataPoint(readerJson, F_AND_P_ENGLISH);
-    if (!dataPoint) return null;
     return (
-      <Tab
-        style={style}
-        text="F&P English"
-        orange={null} // TODO(kr)
-        onClick={onClick}
+      <GenericDibelsTab
+        {...this.props}
+        tabText="F&P English"
+        benchmarkAssessmentKey={F_AND_P_ENGLISH}
       />
     );
   }

app/assets/javascripts/reader_profile_january/FAndPEnglishView.js

@@ -1,14 +1,13 @@
 import React from 'react';
 import {F_AND_P_ENGLISH} from '../reading/thresholds';
-import {interpretFAndPEnglish} from '../reading/fAndPInterpreter';
 import {COMPREHENSION} from './instructionalStrategies';
 import {matchStrategies} from './instructionalStrategies';
 import {mostRecentDataPoint} from './dibelsParsing';
 import expandedViewPropTypes from './expandedViewPropTypes';
 import ExpandedLayout from './ExpandedLayout';
-import MaterialsCarousel from './MaterialsCarousel';
 import Strategies from './Strategies';
 import Data from './Data';
+import FAndPMaterials from './FAndPMaterials';
 
 
 const benchmarkAssessmentKey = F_AND_P_ENGLISH;
@@ -41,17 +40,7 @@ export default class FAndPEnglishView extends React.Component {
     const {readerJson} = this.props;
     const dataPoint = mostRecentDataPoint(readerJson, benchmarkAssessmentKey);
     if (!dataPoint) return null;
-    const level = interpretFAndPEnglish(dataPoint.json.value);
-    if (!level) return null;
-    const fileKeys = MATERIAL_URLS[level];
-    if (!fileKeys) return null;
-
-    return (
-      <div>
-        <MaterialsCarousel fileKeys={fileKeys} />
-        <div style={styles.level}>Instructional level: {level}</div>
-      </div>
-    );
+    return <FAndPMaterials rawLevelText={dataPoint.json.value} />;
   }
 
   renderData() {
@@ -68,16 +57,3 @@ export default class FAndPEnglishView extends React.Component {
 }
 FAndPEnglishView.propTypes = expandedViewPropTypes;
 
-const styles = {
-  level: {
-    paddingLeft: 5,
-    fontSize: 12
-  }
-};
-
-const MATERIAL_URLS = {
-  'A': ['FP-A1-cover', 'FP-A1-page', 'FP-A2-cover', 'FP-A2-page'],
-  'B': ['FP-B1-cover', 'FP-B1-page', 'FP-B2-cover', 'FP-B2-page']
-};
-
-

app/assets/javascripts/reader_profile_january/FAndPMaterials.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {interpretFAndPEnglish} from '../reading/fAndPInterpreter';
+import MaterialsCarousel from './MaterialsCarousel';
+
+
+export default function FAndPMaterials({rawLevelText}) {
+  const level = interpretFAndPEnglish(rawLevelText);
+  if (!level) return null;
+  const fileKeys = MATERIAL_URLS[level];
+  if (!fileKeys) return null;
+
+  return (
+    <div>
+      <MaterialsCarousel fileKeys={fileKeys} />
+      <div style={styles.level}>Instructional level: {level}</div>
+    </div>
+  );
+}
+FAndPMaterials.propTypes = {
+  rawLevelText: PropTypes.string.isRequired
+};
+
+const styles = {
+  level: {
+    paddingLeft: 5,
+    fontSize: 12
+  }
+};
+
+
+export const MATERIAL_URLS = {
+  'A': ['FP-A1-page', 'FP-A2-page'],
+  'B': ['FP-B1-page', 'FP-B2-page'],
+  'C': ['FP-C1-page', 'FP-C2-page'],
+  'D': ['FP-D1-page', 'FP-D2-page'],
+  'E': ['FP-E1-page', 'FP-E2-page'],
+  'F': ['FP-F1-page', 'FP-F2-page'],
+  'G': ['FP-G1-page', 'FP-G2-page'],
+  'H': ['FP-H1-page', 'FP-H2-page'],
+  'I': ['FP-I1-page', 'FP-I2-page'],
+  'J': ['FP-J1-page', 'FP-J2-page'],
+  'K': ['FP-K1-page', 'FP-K2-page'],
+  'L': ['FP-L1-page', 'FP-L2-page', 'FP-L3-page', 'FP-L4-page'],
+  'M': ['FP-M1-page', 'FP-M2-page', 'FP-M3-page', 'FP-M4-page', 'FP-M5-page'],
+  'N': ['FP-N1-page', 'FP-N2-page', 'FP-N3-page', 'FP-N4-page'],
+  'O': ['FP-O1-page', 'FP-O2-page'],
+  'P': ['FP-P1-page', 'FP-P2-page'],
+  'Q': ['FP-Q1-page', 'FP-Q2-page'],
+  'R': ['FP-R1-page', 'FP-R2-page'],
+  'S': ['FP-S1-page', 'FP-S2-page'],
+  'T': ['FP-T1-page', 'FP-T2-page'],
+  'U': ['FP-U1-page', 'FP-U2-page'],
+  'V': ['FP-V1-page', 'FP-V2-page'],
+  'W': ['FP-W1-page', 'FP-W2-page'],
+  'X': ['FP-X1-page', 'FP-X2-page'],
+  'Y': ['FP-Y1-page', 'FP-Y2-page'],
+  'Z': ['FP-Z1-page', 'FP-Z2-page']
+};

app/assets/javascripts/reader_profile_january/FAndPMaterials.story.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import {storiesOf} from '@storybook/react';
+import FAndPMaterials from './FAndPMaterials';
+import {UnrolledForTest} from './FAndPMaterials.test';
+
+
+function renderLevel(rawLevelText) {
+  return <div style={styles.container}><FAndPMaterials rawLevelText={rawLevelText} /></div>;
+}
+
+storiesOf('reader_profile_january/FAndPMaterials', module) // eslint-disable-line no-undef
+  .add('default', () => (
+    <div>
+      {renderLevel("A")}
+      {renderLevel("B")}
+      {renderLevel("C")}
+      {renderLevel("D")}
+      {renderLevel("E")}
+      {renderLevel("F")}
+      {renderLevel("G")}
+      {renderLevel("H")}
+      {renderLevel("I")}
+      {renderLevel("J")}
+      {renderLevel("K")}
+      {renderLevel("L")}
+      {renderLevel("M")}
+      {renderLevel("N")}
+      {renderLevel("O")}
+      {renderLevel("P")}
+      {renderLevel("Q")}
+      {renderLevel("R")}
+      {renderLevel("S")}
+      {renderLevel("T")}
+      {renderLevel("U")}
+      {renderLevel("V")}
+      {renderLevel("W")}
+      {renderLevel("X")}
+      {renderLevel("Y")}
+      {renderLevel("Z")}
+    </div>
+  ))
+  .add('unrolled', () => <UnrolledForTest levelStyle={styles.container} />);
+
+const styles = {
+  container: {
+    display: 'inline-block',
+    padding: 10,
+    height: 150,
+    width: 200
+  }
+};

app/assets/javascripts/reader_profile_january/FAndPMaterials.test.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ReactDOM from 'react-dom';
+import renderer from 'react-test-renderer';
+import FAndPMaterials, {MATERIAL_URLS} from './FAndPMaterials';
+import MaterialsCarousel from './MaterialsCarousel';
+
+
+export function UnrolledForTest({levelStyle = {}}) {
+  return (
+    <div>
+      {Object.keys(MATERIAL_URLS).map(level => {
+        const fileKeys = MATERIAL_URLS[level];
+        if (!fileKeys) return null;
+        return (
+          <div key={level} style={levelStyle}>
+            <h2>{level}</h2>
+            {fileKeys.map(fileKey => <MaterialsCarousel key={fileKey} fileKeys={[fileKey]} />)}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+UnrolledForTest.propTypes = {
+  levelStyle: PropTypes.object
+};
+
+export function testRender(props = {}) {
+  return <FAndPMaterials {...props} />;
+}
+
+it('renders without crashing', () => {
+  const el = document.createElement('div');
+  ReactDOM.render(<FAndPMaterials rawLevelText="A" />, el);
+});
+
+
+it('snapshots', () => {
+  const tree = renderer.create(<FAndPMaterials rawLevelText="A" />).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it('snapshots unrolled', () => {
+  const tree = renderer.create(<UnrolledForTest />).toJSON();
+  expect(tree).toMatchSnapshot();
+});

app/assets/javascripts/reader_profile_january/MaterialsCarousel.js

@@ -111,8 +111,5 @@ const styles = {
 
 // Check env to see if this is running in dev mode in Storybook.
 function isStorybookDev() {
-  if (!window.process || !window.process.env) return false;
-  if (window.process.env.NODE_ENV !== 'development') return false;
-  if (window.process.env.STORYBOOK_RUNNING !== 'true') return false;
-  return true;
+  return (window.STORYBOOK_IS_RUNNING === 'yes_storybook_is_running');
 }

app/assets/javascripts/reader_profile_january/__snapshots__/FAndPEnglishView.test.js.snap

@@ -72,13 +72,13 @@ exports[`snapshots 1`] = `
           >
             <img
               className="MaterialImage"
-              src="/img/reading/FP-B1-cover.jpg"
+              src="/img/reading/FP-B1-page.jpg"
               style={
                 Object {
                   "border": "1px solid #ccc",
                 }
               }
-              title="FP-B1-cover"
+              title="FP-B1-page"
               width="100%"
             />
             <div