Photos: Update to use cropped on homeroom page, release on home page

app/assets/javascripts/components/StudentPhotoCropped.js

@@ -12,15 +12,17 @@ export default class StudentPhotoCropped extends React.Component {
     const {districtKey} = this.context;
     const {studentId, style = {}} = this.props;
     const perDistrictStyles = enhancedStudentPhotoStyles(districtKey);
+
     return (
       <div
+        className="StudentPhotoCropped"
         style={{
           width: 58,
           height: 58,
           marginRight: 10,
-          border: '1px solid #aaa',
+          border: '1px solid #ddd',
           borderRadius: 3,
-          backgroundColor: '#ccc',
+          backgroundColor: '#ddd',
           backgroundImage: `url(${Routes.studentPhoto(studentId)})`,
           overflow: 'hidden',
           backgroundPosition: 'center top',

app/assets/javascripts/components/__snapshots__/StudentPhotoCropped.test.js.snap

@@ -2,15 +2,16 @@
 
 exports[`snapshots for Bedford 1`] = `
 <div
+  className="StudentPhotoCropped"
   style={
     Object {
-      "backgroundColor": "#ccc",
+      "backgroundColor": "#ddd",
       "backgroundImage": "url(/students/42/photo)",
       "backgroundPosition": "center top",
       "backgroundPositionY": -5,
       "backgroundRepeat": "no-repeat",
       "backgroundSize": "130%",
-      "border": "1px solid #aaa",
+      "border": "1px solid #ddd",
       "borderRadius": 3,
       "height": 58,
       "marginRight": 10,
@@ -23,13 +24,14 @@ exports[`snapshots for Bedford 1`] = `
 
 exports[`snapshots for New Bedford 1`] = `
 <div
+  className="StudentPhotoCropped"
   style={
     Object {
-      "backgroundColor": "#ccc",
+      "backgroundColor": "#ddd",
       "backgroundImage": "url(/students/42/photo)",
       "backgroundPosition": "center top",
       "backgroundRepeat": "no-repeat",
-      "border": "1px solid #aaa",
+      "border": "1px solid #ddd",
       "borderRadius": 3,
       "height": 58,
       "marginRight": 10,
@@ -42,15 +44,16 @@ exports[`snapshots for New Bedford 1`] = `
 
 exports[`snapshots for Somerville 1`] = `
 <div
+  className="StudentPhotoCropped"
   style={
     Object {
-      "backgroundColor": "#ccc",
+      "backgroundColor": "#ddd",
       "backgroundImage": "url(/students/42/photo)",
       "backgroundPosition": "center top",
       "backgroundPositionY": -10,
       "backgroundRepeat": "no-repeat",
       "backgroundSize": "150%",
-      "border": "1px solid #aaa",
+      "border": "1px solid #ddd",
       "borderRadius": 3,
       "height": 58,
       "marginRight": 10,
@@ -63,15 +66,16 @@ exports[`snapshots for Somerville 1`] = `
 
 exports[`snapshots for demo 1`] = `
 <div
+  className="StudentPhotoCropped"
   style={
     Object {
-      "backgroundColor": "#ccc",
+      "backgroundColor": "#ddd",
       "backgroundImage": "url(/students/42/photo)",
       "backgroundPosition": "center top",
       "backgroundPositionY": -5,
       "backgroundRepeat": "no-repeat",
       "backgroundSize": "130%",
-      "border": "1px solid #aaa",
+      "border": "1px solid #ddd",
       "borderRadius": 3,
       "height": 58,
       "marginRight": 10,

app/assets/javascripts/feed/EventNoteCard.test.js

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom';
 import renderer from 'react-test-renderer';
 import EventNoteCard from './EventNoteCard';
 import {withDefaultNowContext} from '../testing/NowContainer';
+import PerDistrictContainer from '../components/PerDistrictContainer';
 
 
 function testProps(props = {}) {
@@ -42,16 +43,25 @@ function testProps(props = {}) {
   };
 }
 
+function testEl(props = {}, context = {}) {
+  const districtKey = context.districtKey || 'somerville';
+  return withDefaultNowContext(
+    <PerDistrictContainer districtKey={districtKey}>
+      <EventNoteCard {...props} />
+    </PerDistrictContainer>
+  );
+}
+
 it('renders without crashing', () => {
   const props = testProps();
   const el = document.createElement('div');
-  ReactDOM.render(withDefaultNowContext(<EventNoteCard {...props} />), el);
+  ReactDOM.render(testEl(props), el);
 });
 
 it('matches snapshot', () => {
   const props = testProps();
   const tree = renderer
-    .create(withDefaultNowContext(<EventNoteCard {...props} />))
+    .create(testEl(props))
     .toJSON();
   expect(tree).toMatchSnapshot();
 });
@@ -60,5 +70,5 @@ it('renders when student has no homeroom', () => {
   const props = testProps();
   delete props.eventNoteCardJson.student.homeroom;
   const el = document.createElement('div');
-  ReactDOM.render(withDefaultNowContext(<EventNoteCard {...props} />), el);
+  ReactDOM.render(testEl(props), el);
 });

app/assets/javascripts/feed/FeedCardFrame.js

@@ -11,15 +11,14 @@ import {gradeText} from '../helpers/gradeText';
 // Pure UI, like a template.
 export default class FeedCardFrame extends React.Component {
   render() {
-    const {style, student, byEl, whereEl, whenEl, children, iconsEl, badgesEl} = this.props;
+    const {style, student, byEl, whereEl, whenEl, children, iconsEl, badgesEl, hidePhoto} = this.props;
     const {homeroom, school} = student;
     const shouldShowHomeroom = homeroom && isHomeroomMeaningful(school.school_type);
-    const shouldShowPhoto = (student.has_photo && window.location.search.indexOf('photo') !== -1);
     return (
       <Card className="FeedCardFrame" style={style}>
         <div style={styles.header}>
           <div style={{display: 'flex'}}>
-            {shouldShowPhoto && <StudentPhotoCropped studentId={student.id} />}
+            {!hidePhoto && <StudentPhotoCropped studentId={student.id} />}
             <div style={styles.studentHeader}>
               <div>
                 <a style={styles.person} href={`/students/${student.id}`}>{student.first_name} {student.last_name}</a>
@@ -78,6 +77,7 @@ FeedCardFrame.propTypes = {
   whenEl: PropTypes.node,
   badgesEl: PropTypes.node,
   iconsEl: PropTypes.node,
+  hidePhoto: PropTypes.bool,
   style: PropTypes.object
 };
 

app/assets/javascripts/feed/FeedCardFrame.test.js

@@ -2,6 +2,8 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import FeedCardFrame from './FeedCardFrame';
 import {withDefaultNowContext} from '../testing/NowContainer';
+import PerDistrictContainer from '../components/PerDistrictContainer';
+
 
 function testStudent() {
   return {
@@ -60,9 +62,14 @@ function testProps(student) {
   };
 }
 
-function testRender(props) {
+function testRender(props = {}, context = {}) {
+  const districtKey = context.districtKey || 'somerville';
   const el = document.createElement('div');
-  ReactDOM.render(withDefaultNowContext(<FeedCardFrame {...props} />), el);
+  ReactDOM.render(withDefaultNowContext(
+    <PerDistrictContainer districtKey={districtKey}>
+      <FeedCardFrame {...props} />
+    </PerDistrictContainer>
+  ), el);
   return el;
 }
 
@@ -84,3 +91,4 @@ it('renders homeroom for ESMS', () => {
   expect($(el).text()).toContain('HEA-011');
   expect($(el).text()).toContain('with Alex Teacher');
 });
+

app/assets/javascripts/feed/FeedView.test.js

@@ -2,13 +2,18 @@ import React from 'react';
 import renderer from 'react-test-renderer';
 import FeedView from './FeedView';
 import {withDefaultNowContext} from '../testing/NowContainer';
+import PerDistrictContainer from '../components/PerDistrictContainer';
 import homeFeedJson from '../testing/fixtures/home_feed_json';
 
 
 describe('FeedView', () => {
   it('pure component matches snapshot', () => {
     const tree = renderer
-      .create(withDefaultNowContext(<FeedView feedCards={homeFeedJson.feed_cards} />))
+      .create(withDefaultNowContext(
+        <PerDistrictContainer districtKey="somerville">
+          <FeedView feedCards={homeFeedJson.feed_cards} />
+        </PerDistrictContainer>
+      ))
       .toJSON();
     expect(tree).toMatchSnapshot();
   });

app/assets/javascripts/feed/IncidentCard.test.js

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom';
 import renderer from 'react-test-renderer';
 import IncidentCard from './IncidentCard';
 import {withDefaultNowContext} from '../testing/NowContainer';
+import PerDistrictContainer from '../components/PerDistrictContainer';
 
 
 export function testProps(props = {}) {
@@ -34,33 +35,41 @@ export function testProps(props = {}) {
   };
 }
 
+function testEl(props = {}, context = {}) {
+  const districtKey = context.districtKey || 'somerville';
+  return withDefaultNowContext(
+    <PerDistrictContainer districtKey={districtKey}>
+      <IncidentCard {...props} />
+    </PerDistrictContainer>
+  );
+}
+
 it('renders without crashing', () => {
   const props = testProps();
   const el = document.createElement('div');
-  ReactDOM.render(withDefaultNowContext(<IncidentCard {...props} />), el);
+  ReactDOM.render(testEl(props), el);
 });
 
 it('does not render homeroom for HS since it is not meaningful', () => {
   const props = testProps();
   const el = document.createElement('div');
-  ReactDOM.render(withDefaultNowContext(<IncidentCard {...props} />), el);
+  ReactDOM.render(testEl(props), el);
   expect($(el).text()).not.toContain('SHS ALL');
 });
 
 it('matches snapshot', () => {
   const props = testProps();
   const tree = renderer
-    .create(withDefaultNowContext(<IncidentCard {...props} />))
+    .create(testEl(props))
     .toJSON();
   expect(tree).toMatchSnapshot();
 });
 
-
 it('matches when no location', () => {
   const props = testProps();
   props.incidentCard.incident_location = '';
   const tree = renderer
-    .create(withDefaultNowContext(<IncidentCard {...props} />))
+    .create(testEl(props))
     .toJSON();
   expect(tree).toMatchSnapshot();
 });

app/assets/javascripts/feed/MutableFeedView.test.js

@@ -3,16 +3,18 @@ import renderer from 'react-test-renderer';
 import MutableFeedView from './MutableFeedView';
 import {withDefaultNowContext} from '../testing/NowContainer';
 import homeFeedJson from '../testing/fixtures/home_feed_json';
-
+import PerDistrictContainer from '../components/PerDistrictContainer';
 
 describe('MutableFeedView', () => {
   it('pure component matches snapshot', () => {
     const tree = renderer
       .create(withDefaultNowContext(
-        <MutableFeedView
-          defaultFeedCards={homeFeedJson.feed_cards}
-          educatorLabels={['can_mark_notes_as_restricted']}
-        />
+        <PerDistrictContainer districtKey="somerville">
+          <MutableFeedView
+            defaultFeedCards={homeFeedJson.feed_cards}
+            educatorLabels={['can_mark_notes_as_restricted']}
+          />
+        </PerDistrictContainer>
       ))
       .toJSON();
     expect(tree).toMatchSnapshot();

app/assets/javascripts/feed/__snapshots__/EventNoteCard.test.js.snap

@@ -31,6 +31,25 @@ exports[`matches snapshot 1`] = `
           }
         }
       >
+        <div
+          className="StudentPhotoCropped"
+          style={
+            Object {
+              "backgroundColor": "#ddd",
+              "backgroundImage": "url(/students/55/photo)",
+              "backgroundPosition": "center top",
+              "backgroundPositionY": -10,
+              "backgroundRepeat": "no-repeat",
+              "backgroundSize": "150%",
+              "border": "1px solid #ddd",
+              "borderRadius": 3,
+              "height": 58,
+              "marginRight": 10,
+              "overflow": "hidden",
+              "width": 58,
+            }
+          }
+        />
         <div
           style={
             Object {