Reading: Add materials for F&P levels A and B

app/assets/javascripts/reader_profile_january/FAndPEnglishView.js

@@ -1,21 +1,83 @@
 import React from 'react';
 import {F_AND_P_ENGLISH} from '../reading/thresholds';
-import expandedViewPropTypes from './expandedViewPropTypes';
+import {interpretFAndPEnglish} from '../reading/fAndPInterpreter';
 import {COMPREHENSION} from './instructionalStrategies';
-import GenericDibelsView from './GenericDibelsView';
+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';
 
 
+const benchmarkAssessmentKey = F_AND_P_ENGLISH;
 export default class FAndPEnglishView extends React.Component {
   render() {
+    const {student, onClose} = this.props;
+
     return (
-      <GenericDibelsView
-        {...this.props}
+      <ExpandedLayout
         titleText="F&P English"
-        benchmarkAssessmentKey={F_AND_P_ENGLISH}
-        categoryKey={COMPREHENSION}
-        urls={{}}
+        studentFirstName={student.first_name}
+        materialsEl={this.renderMaterials()}
+        strategiesEl={this.renderStrategies()}
+        dataEl={this.renderData()}
+        onClose={onClose}
+      />
+    );
+  }
+
+  renderStrategies() {
+    const {student, instructionalStrategies} = this.props;
+    const strategies = matchStrategies(instructionalStrategies, student.grade, COMPREHENSION);
+    return <Strategies strategies={strategies} />;
+  }
+
+  // This is a bit different than others, since the materials are different depending
+  // on the level, not the time of year or student's grade level.  So here we show
+  // the materials of the students' instructional level.
+  renderMaterials() {
+    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>
+    );
+  }
+
+  renderData() {
+    const {student, readerJson} = this.props;
+    return (
+      <Data
+        studentId={student.id}
+        gradeNow={student.grade}
+        readerJson={readerJson}
+        benchmarkAssessmentKey={benchmarkAssessmentKey}
       />
     );
   }
 }
 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/FAndPEnglishView.story.js

@@ -0,0 +1,16 @@
+import {storiesOf} from '@storybook/react';
+import {action} from '@storybook/addon-actions';
+import {testProps, testRender} from './FAndPEnglishView.test';
+
+
+function storyProps(props = {}) {
+  return {
+    ...testProps(),
+    onClose: action('onClose'),
+    ...props
+  };
+}
+
+
+storiesOf('reader_profile_january/FAndPEnglishView', module) // eslint-disable-line no-undef
+  .add('default', () => testRender(storyProps()));

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

@@ -0,0 +1,77 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import renderer from 'react-test-renderer';
+import {withNowContext} from '../testing/NowContainer';
+import PerDistrictContainer from '../components/PerDistrictContainer';
+import FAndPEnglishView from './FAndPEnglishView';
+import {readInstructionalStrategies} from './instructionalStrategies';
+
+
+// in spring of KF, looking back at fall and winter scores
+const TEST_NOW_STRING = '2018-05-15T11:03:06.123Z';
+
+export function testProps(props = {}) {
+  return {
+    onClose: jest.fn(),
+    student: {
+      id: 123,
+      first_name: 'Max',
+      grade: 'KF'
+    },
+    readerJson: {
+      access: {},
+      services: [],
+      iep_contents: null,
+      feed_cards: [],
+      current_school_year: 2017,
+      benchmark_data_points: [{
+        "id": 1001,
+        "student_id": 123,
+        "benchmark_school_year": 2017,
+        "benchmark_period_key": 'fall',
+        "benchmark_assessment_key": "f_and_p_english",
+        "json": {
+          "value": "NR"
+        },
+        "educator_id": 999999,
+        "created_at": "2017-09-22T19:27:10.429Z",
+        "updated_at": "2017-09-22T19:27:10.429Z"
+      }, {
+        "id": 1002,
+        "student_id": 123,
+        "benchmark_school_year": 2017,
+        "benchmark_period_key": 'winter',
+        "benchmark_assessment_key": "f_and_p_english",
+        "json": {
+          "value": "B"
+        },
+        "educator_id": 999999,
+        "created_at": "2018-01-25T19:27:10.429Z",
+        "updated_at": "2018-01-25T19:27:10.429Z"
+      }]
+    },
+    instructionalStrategies: readInstructionalStrategies(),
+    ...props
+  };
+}
+
+export function testRender(props = {}) {
+  return (
+    withNowContext(TEST_NOW_STRING, (
+      <PerDistrictContainer districtKey="somerville">
+        <FAndPEnglishView {...props} />
+      </PerDistrictContainer>
+    ))
+  );
+}
+
+it('renders without crashing', () => {
+  const el = document.createElement('div');
+  ReactDOM.render(testRender(testProps()), el);
+});
+
+
+it('snapshots', () => {
+  const tree = renderer.create(testRender(testProps())).toJSON();
+  expect(tree).toMatchSnapshot();
+});

app/assets/javascripts/reader_profile_january/MaterialsCarousel.js

@@ -42,12 +42,12 @@ export default class MaterialsCarousel extends React.Component {
     }
 
     return (
-      <div className="MaterialsCarousel">
+      <div className="MaterialsCarousel" style={styles.root}>
         <MaterialImage fileKey={fileKeys[index]} />
         {fileKeys.length > 1 && (
           <div style={styles.nav}>
-            <div style={styles.arrow} onClick={this.onPrevious}>◄</div>
-            <div style={styles.arrow} onClick={this.onNext}>►</div>
+            <div style={{...styles.arrow, left: 0}} onClick={this.onPrevious}>◄</div>
+            <div style={{...styles.arrow, right: 0}} onClick={this.onNext}>►</div>
           </div>
         )}
       </div>
@@ -68,7 +68,7 @@ function MaterialImage({fileKey}) {
       className="MaterialImage"
       title={fileKey}
       width="100%"
-      style={{border: '1px solid #ccc'}}
+      style={styles.image}
       src={path}
     />
   );
@@ -79,14 +79,32 @@ MaterialImage.propTypes = {
 
 
 const styles = {
+  root: {
+    position: 'relative'
+  },
   nav: {
-    display: 'flex',
-    justifyContent: 'space-between'
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0
   },
   arrow: {
-    color: '#aaa',
+    color: 'white',
+    textShadow: '#999 0px 0px 1px',
     fontSize: 12,
-    cursor: 'pointer'
+    cursor: 'pointer',
+    top: 0,
+    bottom: 0,
+    width: 30,
+    position: 'absolute',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'flex-end',
+    marginBottom: 15
+  },
+  image: {
+    border: '1px solid #ccc'
   }
 };