turingschool-examples · ashleylevi · Nov 27, 2018 · Nov 27, 2018 · Nov 28, 2018 · Nov 28, 2018
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,9 +3,12 @@
   "version": "0.1.0",
   "private": true,
   "devDependencies": {
+    "enzyme": "^3.7.0",
+    "enzyme-adapter-react-16": "^1.7.0",
     "react-scripts": "1.1.0"
   },
   "dependencies": {
+    "prop-types": "^15.6.2",
     "react": "^16.2.0",
     "react-dom": "^16.2.0"
   },

diff --git a/public/index.html b/public/index.html
@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
     <title>Headcount 2.0</title>
   </head>
   <body>

diff --git a/src/App.css b/src/App.css
@@ -1 +1,14 @@
 /*APP COMPONENT RELATED CSS GOES HERE*/
+
+.header {
+  font-size: 80px;
+  color: #FFF;
+  letter-spacing: 3px;
+  border-bottom: 5px solid white;
+  margin: 0 120px 50px 120px;
+  /* width: 700px; */
+}
+
+.num {
+  color: #337AB7;
+}
diff --git a/src/App.js b/src/App.js
@@ -1,12 +1,81 @@
 import React, { Component } from 'react';
+import Data from './data/kindergartners_in_full_day_program.js';
+import DistrictRepository from './helper.js';
+import CardContainer from './CardContainer.js';
+import Search from './Search.js'
 import './App.css';
+import CompareCardContainer from './CompareCardContainer.js';
+
 
 class App extends Component {
+  constructor(){
+    super()
+    this.state = {
+      data: {},
+      compareCard1: null,
+      compareCard2: null,
+      middleCard: null
+  }
+}
+
+  componentDidMount = () => {
+    const districtRepository = new DistrictRepository(Data);
+    this.setState({
+      data: districtRepository.stats
+    })
+  }
+
+  displaySearch = (searchValue) => {
+    const districtRepository = new DistrictRepository(Data);
+    const searchedSchoolsArr = districtRepository.findAllMatches(searchValue);
+    let searchedSchoolsObj = searchedSchoolsArr.reduce((obj, currSchool) => {
+      obj[currSchool] = districtRepository.stats[currSchool];
+      return obj;
+    }, {})
+    this.setState({
+      data: searchedSchoolsObj
+    })
+  }
+
+  displaySelected = (card) => {
+    const districtRepository = new DistrictRepository(Data);
+    const selected = districtRepository.findByName(card.location);
+    selected.selected = true;
+    card.selected = true;
+    if (!this.state.compareCard1) {
+      this.setState({
+        compareCard1: selected
+      })
+    } else {
+      this.setState({
+      compareCard2: selected
+    })
+  }
+}
+
+// updateSelected = () => {
+
+// }
+
+compareCards = (card1, card2) => {
+  const districtRepository = new DistrictRepository(Data);
+  const comparedAvg = districtRepository.compareDistrictAverages(card1, card2);
+  return comparedAvg;
+}
+
   render() {
     return (
-      <div>Welcome To Headcount 2.0</div>
+      <div>
+        <h1 className="header">HeadCount <span className="num">2.0</span></h1>
+        <Search displaySearch={this.displaySearch} />
+        <CompareCardContainer appState={this.state} compareCards={this.compareCards} />
+        <CardContainer data={this.state.data} displaySelected={this.displaySelected} compareCard1={this.state.compareCard1} compareCard2={this.state.compareCard2}/>
+      </div>
+
     );
-  }
+
 }
+}
+
 
 export default App;
diff --git a/src/App.test.js b/src/App.test.js
@@ -1,8 +1,104 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
+import { shallow } from 'enzyme';
+
+describe('App', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = shallow(<App />)
+  })
+
+  it('matches the snapshot', () => {
+    expect(wrapper).toMatchSnapshot()
+  })
+
+  it('displaySearch updates data in state', () => {
+    const initialState = {data: {
+      'ACADEMY 20': {
+      location: "ACADEMY 20",
+      // selected: false,
+      stats:
+      {2012: 0.479,
+      2013: 0.488,
+      2014: 0.49}
+      }
+    }, 
+      'ADAMS COUNTY 14': {
+      location: "ADAMS COUNTY 14",
+      // selected: false,
+      stats:
+      {2012: 0.479,
+      2013: 0.488,
+      2014: 0.49}
+      }, 
+
+      'COLORADO': {
+      location: "COLORADO",
+      // selected: false,
+      stats:
+      {2012: 0.479,
+      2013: 0.488,
+      2014: 0.49}
+      }
+    }
+
+    const expected = {'ADAMS COUNTY 14': {
+      location: "ADAMS COUNTY 14",
+      // selected: false,
+      stats:
+      {2004: 0.228,
+      2005: 0.3,
+      2006: 0.293,
+      2007: 0.306,
+      2008: 0.673,
+      2009: 1,
+      2010: 1,
+      2011: 1,
+      2012: 1,
+      2013: 0.998,
+      2014: 1}
+      }
+    }
+
+    wrapper.setState({ data: initialState })
+    wrapper.instance().displaySearch('ADAMS COUNTY 14')
+    expect(wrapper.state('data')).toEqual(expected)
+  });
+
+  describe('App', () => {
+    it('displaySelected updates compareCard1 and comparedCard2 in state', () => {
+      const initialState = null;
+      const expected = {
+        location: "ADAMS COUNTY 14",
+        // selected: false,
+        stats:
+        {2004: 0.228,
+        2005: 0.3,
+        2006: 0.293,
+        2007: 0.306,
+        2008: 0.673,
+        2009: 1,
+        2010: 1,
+        2011: 1,
+        2012: 1,
+        2013: 0.998,
+        2014: 1
+        }
+      }
+
+      wrapper.setState({ compareCard1: initialState })
+      wrapper.setState({ compareCard2: initialState })
+      wrapper.instance().displaySelected(expected)
+      wrapper.instance().displaySelected(expected)
+      expect(wrapper.state('compareCard1')).toEqual(expected)
+      expect(wrapper.state('compareCard2')).toEqual(expected)
+    })
+  })
+
+
+
+})
+
 
-it('renders without crashing', () => {
-  const div = document.createElement('div');
-  // ReactDOM.render(<App />, div);
-});
diff --git a/src/Card.css b/src/Card.css
@@ -0,0 +1,57 @@
+@import url('https://fonts.googleapis.com/css?family=Roboto');
+
+.card-wrapper {
+  border: 1px solid black;
+  border-radius: 10%;
+  width: 300px;
+  margin: 20px;
+  box-shadow: 3px 0 3px #bababa, -0.2em 0 0.2em #bababa;
+  background-color: #fff;
+}
+
+.selected {
+  border: 5px solid #337AB7;
+  box-shadow: none;
+}
+
+ul {
+  list-style-type: none;
+  margin-bottom: 20px;
+  padding-left: 0;
+}
+
+h1 {
+  text-align: center;
+  margin: 10px 10px 20px 10px;
+  font-size: 20px;
+}
+
+p {
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 0;
+  font-size: 12px;
+}
+
+li {
+  text-align: center;
+  display: flex;
+  justify-content: space-between;
+  justify-content: space-around;
+}
+
+#high {
+  color: #F96854;
+}
+
+#low {
+  color: #337AB7;
+
+}
+.year {
+  color: #262730;
+}
+
+h1, .year, .percentage, .location {
+  font-weight: 700;
+}
diff --git a/src/Card.js b/src/Card.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import PropTypes from 'prop-types'
+import './Card.css'
+
+const Card = (props) => {
+  let classBorder = 'card-wrapper';
+  const stats = Object.keys(props.cardInfo.stats).map((currStat) => {
+    let classString = 'low';
+    if (props.cardInfo.stats[currStat] > 0.5) {
+      classString = 'high';
+    }
+    if (props.cardInfo.selected === true) {
+      classBorder = 'card-wrapper selected';
+    }
+    if (props.cardInfo.selected === false) {
+      classBorder = 'card-wrapper';
+    }
+    return <li><span className="year">{currStat}</span> <span className="percentage" id={classString}>{props.cardInfo.stats[currStat]}</span></li>
+
+  })
+
+  return(
+    <div className={classBorder} key={props.cardInfo.id} onClick={() => props.displaySelected(props.cardInfo)}>
+      <h1 className="location">{props.cardInfo.location}</h1>
+        <p>
+          <h3>YEAR</h3> 
+          <h3>% ENROLLMENT</h3>
+        </p>
+      <ul className="stats">{stats}</ul>
+    </div>
+  )
+}
+
+Card.propTypes = {
+  cardInfo: PropTypes.object.isRequired 
+}
+
+export default Card;
diff --git a/src/CardContainer.css b/src/CardContainer.css
@@ -0,0 +1,7 @@
+.card-container {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-auto-flow: dense;
+  grid-gap: 10px;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+}
diff --git a/src/CardContainer.js b/src/CardContainer.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import Card from './Card.js';
+import PropTypes from 'prop-types';
+import './CardContainer.css';
+
+const CardContainer = (props) => {
+  const cards = Object.keys(props.data).map((currCard) => {
+    return <Card cardInfo={props.data[currCard]} displaySelected={props.displaySelected} compareCard1={props.compareCard1} compareCard2={props.compareCard2} />
+
+  })
+
+  return(
+    <div className="card-container">
+      { cards }
+    </div>
+  )
+}
+
+CardContainer.propTypes = {
+  data: PropTypes.object
+}
+
+export default CardContainer;
diff --git a/src/CompareCard.css b/src/CompareCard.css
@@ -0,0 +1,29 @@
+@import url('https://fonts.googleapis.com/css?family=Roboto');
+
+.compare-card {
+  border: 5px solid #337AB7;
+  border-radius: 10%;
+  width: 300px;
+  margin: 20px;  
+  background-color: #fff;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.location {
+  margin-bottom: 0;
+}
+
+.location-num {
+  color:#337AB7;
+}
+
+.compare-num {
+  color: #F96854;
+  font-size: 35px;
+}
+
+span {
+  color: #000;
+}