Styling

package.json

@@ -3,6 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "devDependencies": {
+    "enzyme": "^3.6.0",
+    "enzyme-adapter-react-16": "^1.5.0",
     "react-scripts": "1.1.0"
   },
   "dependencies": {

src/App.js

@@ -1,12 +1,34 @@
 import React, { Component } from 'react';
 import './App.css';
+import CardContainer from './CardContainer'
+import DistrictRepository from './helper';
+import kinderData from './data/kindergartners_in_full_day_program.js';
 
 class App extends Component {
+  constructor() {
+    super()
+
+    this.state = {
+      districts: []
+    }
+  }
+
+  componentDidMount = () => {
+    const districts = new DistrictRepository(kinderData)
+    const districtData = districts.findAllMatches()
+
+    this.setState({
+      districts: districtData
+    })
+  }
+
   render() {
     return (
-      <div>Welcome To Headcount 2.0</div>
+      <div>
+        <CardContainer districts={this.state.districts}/>
+      </div>
     );
   }
 }
 
-export default App;
+export default App;

src/CardContainer.css

@@ -0,0 +1,6 @@
+.card-container {
+  display: grid;
+  grid-gap: 7px;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  margin: 20px;
+}

src/CardContainer.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import DistrictCard from './DistrictCard';
+import './CardContainer.css'
+
+const CardContainer = (props) => {
+  const cards = props.districts.map(district => {
+    return (<DistrictCard location={district.location}
+                          stats={district.stats}
+                          key={district.location}/>)
+  })
+
+  return(
+    <div className='card-container'>
+      { cards }
+    </div>
+    )
+}
+
+export default CardContainer;

src/DistrictCard.css

@@ -0,0 +1,25 @@
+.card {
+  width: 200px;
+  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2);
+  margin: 0;
+  border-radius: 15px;
+  padding: 20px;
+  border: 1px solid rgba(220, 220, 220, 0.3);
+  text-align: center;
+}
+
+.card:hover {
+  cursor: pointer;
+  transform: scale(1.02);
+  transition: all .2s ease-in-out;
+}
+
+.less-than-half {
+  color: red;
+  margin: 0;
+}
+
+.greater-than-half {
+  color: green;
+  margin: 0;
+}

src/DistrictCard.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import './DistrictCard.css'
+
+const DistrictCard = (props) => {
+  const info = Object.keys(props.stats.data).map(year => {
+    return <p className={props.stats.data[year] < .5 ? 'less-than-half' : 'greater-than-half'} key={year}>{year} : {props.stats.data[year]}</p>
+  })
+
+  return (
+    <div className='card'>
+      <p>{props.location}</p>
+        { info }
+    </div>
+    )
+}
+
+export default DistrictCard;

src/helper.js

@@ -1,3 +1,48 @@
-export default class DistrictRepository {
+class DistrictRepository {
+  constructor(data) {
+    this.stats = this.sanitizeData(data);
+  }
+
+  sanitizeData = (data) => {
+    return data.reduce((schoolData, school) => {
+      const upperLocation = school.Location.toUpperCase();
+      const data = (parseFloat(parseFloat(school.Data).toFixed(3)))
 
+      if (!Object.keys(schoolData).includes(upperLocation)) {
+        schoolData[upperLocation] = { data: {[school.TimeFrame]: data || 0}};
+      } else {
+        schoolData[upperLocation].data[school.TimeFrame] = data || 0;
+      }
+      return schoolData;
+    }, {})
+  }
+
+  findByName = (name) => {
+    if (name) {
+    const upperName = name.toUpperCase();
+
+      if (this.stats[upperName]) {
+        const foundSchoolData = this.stats[upperName];
+        const result = {location: upperName, stats: foundSchoolData.data}
+        return result;
+      } else {
+        return undefined;
+      }
+    }
+  }
+
+  findAllMatches = (query) => {
+    if(!query) {
+      return Object.keys(this.stats).map(key => {
+        return {location: key, stats: this.stats[key]};
+      })
+    } else {
+      const upperQuery = query.toUpperCase();
+
+      return Object.keys(this.stats).filter(key => 
+        key.includes(upperQuery));
+    }
+  }
 }
+
+export default DistrictRepository;

src/index.css

@@ -1,4 +1,8 @@
-body {
+* {
+    box-sizing: border-box;
+  }
+
+  body {
   margin: 0;
   padding: 0;
   font-family: sans-serif;

src/test/unit/iteration-0.test.js

@@ -14,5 +14,4 @@ describe('DistrictRepository iteration 0', () =>  {
     // expect(district.stats.length).toBe(181);
     expect(Object.keys(district.stats).length).toBe(181);
   });
-
-});
+});

src/test/unit/iteration-1-part2.test.js

@@ -5,6 +5,7 @@ describe('DistrictRepository iteration 1 - part 2', () =>  {
   const district = new DistrictRepository(kinderData);
 
   test('findAllMatches defaults to returning all data in an array', () => {
+    // console.log(district.stats)
     expect(district.findAllMatches().length).toBe(181);
   });
 
@@ -17,5 +18,4 @@ describe('DistrictRepository iteration 1 - part 2', () =>  {
     expect(district.findAllMatches('packers').length).toBe(0);
     expect(district.findAllMatches('df').length).toBe(0);
   });
-
-});
+});

src/test/unit/iteration-2.test.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { shallow } from 'enzyme';
+import Enzyme from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+Enzyme.configure({ adapter: new Adapter() });
+import CardContainer from '../../CardContainer'
+
+describe('CardContainer iteration 2', () => {
+
+  // test('should have 181 district cards initially', () => {
+  //   const wrapper = shallow(<CardContainer />);
+
+  //   expect(wrapper).toMatchSnapshot();
+  // });
+
+  // test('should have a default state', () => {
+  //   const wrapper = shallow(<CardContainer />)
+  //   const expected = { cards: [] }
+
+  //   expect(wrapper.state()).toEqual(expected);
+  // })
+})

src/test/unit/iteration-4.test.js

@@ -21,6 +21,7 @@ describe('DistrictRepository iteration 0', () =>  {
   test('compareDistrictAverages ACADEMY 20 against Colorado', () => {
     const result = { "ACADEMY 20": 0.407, "COLORADO": 0.53, "compared": 0.768}
     expect(district.compareDistrictAverages('ACADEMY 20', 'Colorado')).toEqual(result);
+    // avg1 / avg2
   });
 
 });