Ui

src/components/App.js

@@ -0,0 +1,39 @@
+import React, { Component } from 'react';
+import CardContainer from './CardContainer';
+import '../css/App.css';
+
+import kinderData from '../data/kindergartners_in_full_day_program.js';
+import DistrictRepository from './helper'
+
+
+class App extends Component {
+  constructor() {
+    super()
+    this.state = {
+      cards: [],
+      compare: []
+    }
+  }
+
+  componentDidMount() {
+    this.displayAllCards(kinderData);
+  }
+
+  displayAllCards = (data) => {
+    const helper = new DistrictRepository(data);
+    const cards = helper.findAllMatches();
+    this.setState({ cards })
+  }
+
+  render() {
+    return (
+      <div>
+        {/* <Search/>
+        <Compare/> */}
+        <CardContainer cards={this.state.cards}/>
+      </div>
+    );
+  }
+}
+
+export default App;

src/components/Card.js

@@ -0,0 +1,24 @@
+import React, { Component } from 'react';
+
+class Card extends Component {
+  constructor() {
+    super()
+    this.state = {
+
+    }
+  }
+
+  render() {
+    const stats =  this.props.stats;
+    return (
+      <div className='card'>
+        <h4 className='card-title'>{this.props.location}</h4>
+        <ul>
+          {Object.keys(stats).map(stat => <li>{stat}: {stats[stat]}</li>)}
+        </ul>
+      </div>
+    )
+  }
+}
+
+export default Card;

src/components/CardContainer.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import Card from './Card';
+
+const CardContainer = ({cards}) => {
+
+  const allCards = cards.map(card => <Card location={card.location} stats={card.stats}/>)
+  return(
+    <div className='card-container'>
+     { allCards }
+    </div>
+  )
+}
+
+export default CardContainer;

src/components/Compare.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import Card from './Card';
+
+const Compare = ({cards}) => {
+
+  // const allCards = cards.map(card => <Card location={card.location} stats={card.stats}/>)
+  return(
+    <div className='card-container'>
+
+    </div>
+  )
+}
+
+export default Compare;

src/components/Search.js

@@ -0,0 +1,21 @@
+import React, { Component } from 'react';
+
+class Search extends Component {
+  constructor() {
+    super()
+    this.state = {
+
+    }
+  }
+
+  render() {
+
+    return (
+      <div className='search'>
+
+      </div>
+    )
+  }
+}
+
+export default Search;

src/components/helper.js

@@ -0,0 +1,53 @@
+export default class DistrictRepository {
+  constructor(stats) {
+    this.stats = this.cleanData(stats)
+  }
+
+  cleanData(stats) {
+    return stats.reduce((acc, district) => {
+      const TimeFrame = district.TimeFrame;
+      const Data = Math.round(district.Data * 1000) / 1000 || 0
+      const location = district.Location.toUpperCase();
+      if (!acc[location]) {
+        acc[location] = {
+          [TimeFrame]: Data
+        }
+      } else {
+        acc[location][TimeFrame] = Data
+      }
+      return acc;
+    }, {})
+  }
+
+  findByName(string) {
+    if (string) {
+      string = string.toUpperCase()
+      return Object.keys(this.stats).includes(string) 
+        ? { location: string, stats: this.stats[string]}
+        : undefined 
+    } else {
+      return undefined;
+    }
+  }
+
+  findAllMatches(string) {
+    if (string) {
+      string = string.toUpperCase();
+      return Object.keys(this.stats).reduce((acc, district) => {
+        if (district.includes(string)) {
+          acc.push({ location: string, stats: this.stats[string]})
+        }
+        return acc;
+      }, [])
+    } else { 
+      return Object.keys(this.stats).map(district => {
+        return { stats: this.stats[district], location: district}
+      })
+    }
+  }
+
+  compareDistrictAverages() {
+
+  }
+}
+

src/css/App.css

@@ -0,0 +1,21 @@
+.card-container {
+  justify-content: center;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.card {
+  border: 1px solid black;
+  width: 320px;
+  margin: 20px;
+}
+
+.card-title {
+  text-align: center;
+}
+
+ul {
+  margin-left:35%;
+  padding: 0;
+  list-style: none;
+}

src/index.js

@@ -2,6 +2,6 @@ import React from 'react';
 import { render } from 'react-dom';
 import './index.css';
 
-import App from './App';
+import App from './components/App';
 
 render( <App />, document.getElementById('root') );

src/App.test.js → src/test/unit/App.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import App from './App';
+import App from '../../components/App';
 
 it('renders without crashing', () => {
   const div = document.createElement('div');

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

@@ -1,4 +1,4 @@
-import DistrictRepository from '../../helper.js';
+import DistrictRepository from '../../components/helper.js';
 import kinderData from '../../data/kindergartners_in_full_day_program.js';
 
 describe('DistrictRepository iteration 0', () =>  {

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

@@ -1,4 +1,4 @@
-import DistrictRepository from '../../helper.js';
+import DistrictRepository from '../../components/helper.js';
 import kinderData from '../../data/kindergartners_in_full_day_program.js';
 
 describe('DistrictRepository iteration 1 - part 1', () =>  {
@@ -13,17 +13,17 @@ describe('DistrictRepository iteration 1 - part 1', () =>  {
   });
 
   test('findByName returns an object with its individual district information', () => {
-
     expect(typeof district.findByName('Colorado')).toEqual('object');
     expect(district.findByName('Colorado').location).toEqual('COLORADO');
   });
 
-  test('findByName search is not case sensitive', () => {
+  test('findByName search is not case sensitive', () => {   
     expect(district.findByName('ColoRAdo').location).toEqual('COLORADO');
     expect(district.findByName('ACADEmY 20').location).toEqual('ACADEMY 20');
   });
 
   test('each district has a data object containing each year and its data as key value pairs.', () => {
+
     const academy = district.findByName('ACADEmY 20');
 
     expect(academy.location).toEqual('ACADEMY 20');

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

@@ -1,8 +1,9 @@
-import DistrictRepository from '../../helper.js';
+import DistrictRepository from '../../components/helper.js';
 import kinderData from '../../data/kindergartners_in_full_day_program.js';
 
 describe('DistrictRepository iteration 1 - part 2', () =>  {
   const district = new DistrictRepository(kinderData);
+
 
   test('findAllMatches defaults to returning all data in an array', () => {
     expect(district.findAllMatches().length).toBe(181);

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

@@ -1,7 +1,7 @@
-import DistrictRepository from '../../helper.js';
+import DistrictRepository from '../../components/helper.js';
 import kinderData from '../../data/kindergartners_in_full_day_program.js';
 
-describe('DistrictRepository iteration 0', () =>  {
+describe('DistrictRepository iteration 4', () =>  {
   const district = new DistrictRepository(kinderData);
 
   test('findAverage for ACADEMY 20', () => {