Fix tests - pass code schools as a prop to child components

Author: alexspence

src/scenes/home/codeSchools/approvedSchools/approvedSchools.js

@@ -1,5 +1,6 @@
 import _ from 'lodash';
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import Section from 'shared/components/section/section';
 import SchoolCard from 'shared/components/schoolCard/schoolCard';
 import styles from './approvedSchools.css';
@@ -10,16 +11,15 @@ class ApprovedSchools extends Component {
     this.state = {
       vaSchools: null
     };
+  }
 
-    fetch('https://api.operationcode.org/api/v1/code_schools.json')
-    .then(response => response.json()).then(data =>
-      this.setState({ vaSchools: this.getApprovedSchools(data) })
-    );
+  componentWillMount() {
+    this.setState({ vaSchools: this.loadSchools() });
   }
 
-  getApprovedSchools = (schools) => {
+  loadSchools() {
     let approvedSchools = [];
-    schools.forEach((school) => {
+    this.props.schools.forEach((school) => {
       const locations = school.locations.filter(location => location.va_accepted === true);
       if (locations.length > 0) {
         approvedSchools = approvedSchools.concat(locations.map(location =>
@@ -31,8 +31,7 @@ class ApprovedSchools extends Component {
   }
 
   render() {
-    console.log(JSON.stringify(this.state.vaSchools, null, 2));
-    const vaSchools = !this.state.vaSchools ? null : this.state.vaSchools
+    const vaSchools = this.state.vaSchools
       .map(school =>
         (
           <SchoolCard
@@ -75,4 +74,8 @@ class ApprovedSchools extends Component {
   }
 }
 
+ApprovedSchools.propTypes = {
+  schools: PropTypes.array.isRequired // eslint-disable-line
+};
+
 export default ApprovedSchools;

src/scenes/home/codeSchools/codeSchools.js

@@ -13,10 +13,17 @@ class CodeSchools extends Component {
     super(props);
 
     this.state = {
-      schools: {}
+      schools: null
     };
   }
-
+  componentWillMount() {
+    return fetch('https://api.operationcode.org/api/v1/code_schools.json').then(response =>
+      response.json().then((data) => {
+        console.log(data); // eslint-disable-line
+        this.setState({ schools: data });
+      })
+    );
+  }
   render() {
     return (
       <div>
@@ -64,10 +71,10 @@ class CodeSchools extends Component {
           </div>
         </Section>
 
-        <ApprovedSchools />
-        <PartnerSchools />
-        <OnlineSchools />
-        <StateSortedSchools />
+        {this.state.schools && <ApprovedSchools schools={this.state.schools} />}
+        {this.state.schools && <PartnerSchools schools={this.state.schools} />}
+        {this.state.schools && <OnlineSchools schools={this.state.schools} />}
+        {this.state.schools && <StateSortedSchools schools={this.state.schools} />}
       </div>
     );
   }

src/scenes/home/codeSchools/onlineSchools/onlineSchools.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import Section from 'shared/components/section/section';
 import SchoolCard from 'shared/components/schoolCard/schoolCard';
 import ImageCard from 'shared/components/imageCard/imageCard';
@@ -13,32 +14,31 @@ class OnlineSchools extends Component {
     this.state = {
       eSchools: null
     };
+  }
 
-    fetch('https://api.operationcode.org/api/v1/code_schools.json')
-    .then(response => response.json()).then(data =>
-      this.setState({ eSchools: data })
-    );
+  componentWillMount() {
+    this.setState({ eSchools: this.loadSchools() });
   }
 
+  loadSchools() {
+    return this.props.schools.filter(school => school.has_online);
+  }
   render() {
-    const eSchools = !this.state.eSchools ? null : this.state.eSchools
-      .filter(school => school.has_online)
-      .map(school =>
-        (
-          <SchoolCard
-            key={school.name}
-            alt={school.name}
-            schoolName={school.name}
-            link={school.url}
-            schoolAddress="Online"
-            logo={school.logo}
-            GI={school.va_accepted ? 'Yes' : 'No'}
-            fullTime={school.full_time ? 'Full-Time' : 'Flexible'}
-            hardware={school.hardware_included ? 'Yes' : 'No'}
-          />
-        )
-      );
-
+    const eSchools = this.state.eSchools.map(school =>
+      (
+        <SchoolCard
+          key={school.name}
+          alt={school.name}
+          schoolName={school.name}
+          link={school.url}
+          schoolAddress="Online"
+          logo={school.logo}
+          GI={school.va_accepted ? 'Yes' : 'No'}
+          fullTime={school.full_time ? 'Full-Time' : 'Flexible'}
+          hardware={school.hardware_included ? 'Yes' : 'No'}
+        />
+      )
+    );
     return (
       <Section
         id="onlineSchools"
@@ -99,4 +99,8 @@ class OnlineSchools extends Component {
   }
 }
 
+OnlineSchools.propTypes = {
+  schools: PropTypes.array.isRequired // eslint-disable-line
+};
+
 export default OnlineSchools;

src/scenes/home/codeSchools/stateSortedSchools/stateSortedSchools.js

@@ -1,25 +1,18 @@
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import Section from 'shared/components/section/section';
 import SchoolCard from 'shared/components/schoolCard/schoolCard';
 import FormInput from 'shared/components/form/formInput/formInput';
 import styles from './stateSortedSchools.css';
 import stateCodes from '../stateCodes.json';
 
-const gettingSchoolData = fetch('https://api.operationcode.org/api/v1/code_schools.json')
-  .then(response => response.json());
-
 class StateSortedSchools extends Component {
   constructor(props) {
     super(props);
     this.state = {
       query: null,
-      schools: null,
       schoolsByState: null
     };
-
-    gettingSchoolData.then(data =>
-      this.setState({ schools: data })
-    );
   }
 
   onSearchChange = (value) => {
@@ -44,7 +37,7 @@ class StateSortedSchools extends Component {
       return school.state.includes(input) || stateName.includes(input);
     }
 
-    this.state.schools.forEach((school) => {
+    this.props.schools.forEach((school) => {
       school.locations.filter(_school => matchesState(_school, userInput)).forEach((location) => {
         schools.push({
           name: school.name,
@@ -105,4 +98,8 @@ class StateSortedSchools extends Component {
   }
 }
 
+StateSortedSchools.propTypes = {
+  schools: PropTypes.array.isRequired // eslint-disable-line
+};
+
 export default StateSortedSchools;