Iteration 2

package.json

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

src/App.css

@@ -1 +1,4 @@
 /*APP COMPONENT RELATED CSS GOES HERE*/
+* {
+    font-family: Arial, Helvetica, sans-serif;
+}

src/App.js

@@ -1,10 +1,44 @@
 import React, { Component } from 'react';
+import DistrictRepository from './helper.js';
+import data from './data/kindergartners_in_full_day_program.js';
+import CardContainer from './CardContainer.js';
 import './App.css';
+import Search from './Search.js';
 
 class App extends Component {
+  constructor() {
+    super();
+    this.state = {
+      data: {}
+    }
+  }
+
+  componentDidMount() {
+    const district = new DistrictRepository(data);
+    this.setState({
+      data: district.stats
+    });
+  }
+
+  displaySearch = (searchValue) => {
+    const district = new DistrictRepository(data);
+    const searchedSchoolsArr = district.findAllMatches(searchValue);
+    let searchedSchoolsObj = searchedSchoolsArr.reduce((acc, currSchool) => {
+      acc[currSchool] = district.stats[currSchool];
+      return acc;
+    },{});
+    this.setState({
+      data: searchedSchoolsObj
+    })
+  }
+
   render() {
     return (
-      <div>Welcome To Headcount 2.0</div>
+      <div>
+          <h1> HeadCount 2.0</h1>
+          <Search displaySearch={this.displaySearch}/>
+          <CardContainer data={this.state.data} />
+      </div>
     );
   }
 }

src/Card.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import './styles/Card.css';
+
+
+const Card = (props) => {
+    const stats = Object.keys(props.cardInfo.stats).map(currStat => {
+        let classString = 'green';
+        if (props.cardInfo.stats[currStat] > 0.5) {
+            classString = 'red'; 
+        }
+        return <li 
+        className={classString}>
+            <span className='year'>
+            {currStat}
+            </span>
+            <span className='percentage'>
+            {props.cardInfo.stats[currStat]} 
+            </span>
+        </li>
+    });
+    return (
+        <div className="card"> 
+            <h1> {props.cardInfo.location} </h1>
+                <p> 
+                    <h3> year </h3>
+                    <h3> % enrollment </h3>
+                </p>
+            <ul> {stats} </ul>
+        </div>
+    );
+}
+
+export default Card;

src/CardContainer.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import Card from './Card.js';
+import './styles/CardContainer.css';
+
+const CardContainer = ({data}) => {
+
+    const cards = Object.keys(data).map((currCard) => {
+        return <Card cardInfo={data[currCard]} />
+    })
+    return (
+        <div className = "card-container">
+            {cards}
+        </div>
+        )
+    }
+
+export default CardContainer;

src/Search.js

@@ -0,0 +1,19 @@
+import React, { Component } from 'react';
+import './styles/Search.css'
+
+class Search extends Component {
+    handleSearch = (event) => {
+        const search = event.target.value;
+        this.props.displaySearch(search);
+    }
+
+    render() {
+        return (
+            <form>
+                <input placeholder="Search for a school.." onChange={this.handleSearch}/>
+            </form>
+        )
+    }
+}
+
+export default Search;

src/helper.js

@@ -1,3 +1,38 @@
 export default class DistrictRepository {
+ constructor(data) {
+   this.stats = data.reduce((newObj, currentElement) => {
+    const upperCaseLocation = currentElement.Location.toUpperCase();
+    if (!newObj[upperCaseLocation]) {
+      newObj[upperCaseLocation] = {}
+    }
+      let percentage;
+      if (!isNaN(currentElement.Data)) {
+        percentage = Math.round(1000*currentElement.Data)/1000;
+      } else {
+        percentage = 0;
+      }
+      newObj[upperCaseLocation].stats = {...newObj[upperCaseLocation].stats, [currentElement.TimeFrame]: percentage};
+      newObj[upperCaseLocation].location = upperCaseLocation;
+    return newObj;
+   },  {})
+  }
+  findByName = (location) => {
+    if (!location) {
+     return 
+   }
+    const searchedLocation = location.toUpperCase();
+    return this.stats[searchedLocation];
+  }
 
-}
+  findAllMatches = (searchValue) => {
+    if (!searchValue) {
+      return Object.keys(this.stats);
+    } else {
+      return Object.keys(this.stats).filter((currentValue) => {
+        if (currentValue.includes(searchValue.toUpperCase())) {
+          return currentValue;
+        }
+      });
+    }
+  }
+}

src/setupTests.js

@@ -0,0 +1,5 @@
+
+import { configure } from 'enzyme'; 
+import Adapter from 'enzyme-adapter-react-16';
+
+configure({ adapter: new Adapter() }); 

src/styles/Card.css

@@ -0,0 +1,43 @@
+.card {
+    display: flex;
+    background-color: aquamarine;
+    border: solid 1px black;
+    padding: 20px;
+    border-radius: 10px;
+    flex-direction: column;
+    margin: 40px;
+}
+ul {
+    font-size: 20px;
+    list-style: none;
+    /* line-height: 20px; */
+    margin-top: 0;
+}
+
+
+li.red {
+    color: blue;
+}
+li {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    width: 80%;
+}
+
+li.green {
+    color: grey;
+}
+
+.year {
+    margin: 4px;
+    font-style: bold;
+}
+
+p {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    margin-bottom: 0;
+}

src/styles/CardContainer.css

@@ -0,0 +1,4 @@
+.card-container {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+}

src/styles/Search.css

@@ -0,0 +1,11 @@
+form {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    height: 40px;
+    /* width: 200px; */
+}
+
+input {
+    font-size: 24px;
+}

src/test/unit/CardContainer.test.js

@@ -0,0 +1,63 @@
+import kinderData from '../../data/kindergartners_in_full_day_program.js';
+import DistrictRepository from '../../helper.js';
+import { shallow, mount } from 'enzyme';
+import React from 'react';
+import CardContainer from '../../CardContainer.js';
+
+
+describe ('Card', () => {
+    const mockData2 = [{
+        location:
+        "COLORADO", 
+        stats: {
+          2004: 0.24,
+          2005: 0.278,
+          2006: 0.337,
+          2007: 0.395,
+          2008: 0.536,
+          2009: 0.598,
+          2010: 0.64,
+          2011: 0.672,
+          2012: 0.695,
+          2013: 0.703,
+          2014: 0.741
+        }}, 
+
+        {location: "ACADEMY 20", 
+        stats: {
+          2004: 0.24,
+          2005: 0.278,
+          2006: 0.337,
+          2007: 0.395,
+          2008: 0.536,
+          2009: 0.598,
+          2010: 0.64,
+          2011: 0.672,
+          2012: 0.695,
+          2013: 0.703,
+          2014: 0.741
+        }}, 
+
+        {location: "ADAMS COUNTY 14", 
+        stats: {
+          2004: 0.24,
+          2005: 0.278,
+          2006: 0.337,
+          2007: 0.395,
+          2008: 0.536,
+          2009: 0.598,
+          2010: 0.64,
+          2011: 0.672,
+          2012: 0.695,
+          2013: 0.703,
+          2014: 0.741
+        }}, 
+      ];
+
+    it('should match the snapshot with all data passed in correctly', () => {
+        const wrapper = mount (
+            <CardContainer data = {mockData2} />
+        )
+            expect(wrapper).toMatchSnapshot();
+    })
+});