learncodeutrecht · sepuckett86 · Apr 29, 2018
diff --git a/src/Components/App/App.js b/src/Components/App/App.js
@@ -19,6 +19,7 @@ export class App extends Component {
           <div className="App-title">CryptoCompare</div>
         </header>
         <p className="App-intro">
+
           <br />
           Pick two options
         </p>

diff --git a/src/Components/Button/Button.css b/src/Components/Button/Button.css
diff --git a/src/Components/Button/Button.js b/src/Components/Button/Button.js
diff --git a/src/Components/Graph/Graph.js b/src/Components/Graph/Graph.js
@@ -6,63 +6,22 @@ class Graph extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      menu1: this.props.menu1.active,
-      menu2: this.props.menu2.active
+      dataArray : [1, 2, 3]
     }
-
-    this.componentWillMount = this.componentWillMount.bind(this);
-  }
-
-  componentWillMount() {
-    this.makeGraph();
-
-  }
-
-  componentWillReceiveProps(nextProps) {
-  if (nextProps.menu1.active !== this.state.menu1.active && nextProps.menu2.active !== this.state.menu2.active) {
-		this.setState({
-      menu1: nextProps.menu1.active,
-      menu2: nextProps.menu2.active
-    })
-    this.makeGraph();
   }
-  else if (nextProps.menu1.active !== this.state.menu1.active) {
-		this.setState({
-      menu1: nextProps.menu1.active
+  componentDidMount() {
+    this.setState({
+      dataArray: this.props.dataArray
     })
     this.makeGraph();
   }
-  else if (nextProps.menu2.active !== this.state.menu2.active) {
-		this.setState({
-      menu2: nextProps.menu2.active
-    })
-    this.makeGraph();
-  }
-}
-
-  // Make array of data
-  makeDataArray() {
-    let data = [];
-    let menu1 = this.state.menu1;
-    let menu2 = this.state.menu2;
-    let results = this.props.results;
-    // Cycle through entire data set looking for a match
-    this.props.sites.forEach(site => {
-      for (let i = 0; i < results.length; i++) {
-        if (results[i].site === site) {
-          if (results[i].items.includes(menu1.active)
-          && results[i].items.includes(menu2.active)) {
-            data.push(results[i].result);
-          }
-        }
-      }
-    })
-
-    return data
+  componentDidUpdate(nextProps, nextState) {
+    if (nextProps.dataArray !== this.state.dataArray) {
+      this.makeGraph();
+    }
   }
-
   makeGraph() {
-    const data1 = this.makeDataArray();
+    const data1 = this.props.dataArray;
     return d3.select(".graph")
       .selectAll('div')
       .data(data1)

diff --git a/src/Components/Result/Result.js b/src/Components/Result/Result.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import './Result.css';
+import Graph from '../Graph/Graph';
 
 
 export class Result extends React.Component {
@@ -14,13 +15,52 @@ export class Result extends React.Component {
   }
 
   render() {
+    let result;
+    let term1 = this.props.searchTerms[0];
+    let term2 = this.props.searchTerms[1];
+    if (term1 === term2) {
+      result = (<p>Pick two different options</p>)
+    } else {
+      result = (<div>
+      <p>Comparing {term1} + {term2}:</p>
+      <div className="row">
+      <div className='col'>
+      <table className="table">
+        <thead>
+      <tr>
+        <th scope="col">Site</th>
+        <th scope="col">Result</th>
+      </tr>
+      </thead>
+      <tbody>
+      {
+        this.props.sites.map((site, i) => {
+          return <tr key={site}>
+               <th scope="row">{site}</th>
+               <td><p>{this.props.dataArray[i]}</p>
+                 </td>
+             </tr>
+           })
+         }
+       </tbody>
+      </table>
+      </div>
+
+      <div className='col'>
+        <Graph
+          dataArray={this.props.dataArray}/>
+        </div>
+      </div>
+    </div>)
+    }
     return (<div>
       <button className="btn btn-primary"
         onClick={this.handleClick}>GO</button>
       <hr />
       <div id="result">
-      { this.props.showResult ===  true ? this.props.generateResult()
+      { this.props.showResult ===  true ? result
       : null }
+
       </div>
     </div>)
   }

diff --git a/src/Containers/AppContainer.js b/src/Containers/AppContainer.js
@@ -2,6 +2,7 @@
 
 import React, { Component } from 'react';
 import { App } from '../Components/App/App';
+import Crypto from '../Utils/Crypto';
 
 class AppContainer extends Component {
   constructor(props) {
@@ -69,13 +70,23 @@ class AppContainer extends Component {
           items: ['B', 'C'],
           result: 60
         },
-      ]
+      ],
+      data: ''
     }
 
     this.updateMenu = this.updateMenu.bind(this);
     this.updateSearch = this.updateSearch.bind(this);
   }
 
+
+  // Before render, sets state to json response from Crypto API
+  componentWillMount() {
+    let data = Crypto.getData();
+    this.setState({
+      data: data
+    })
+  }
+
   // Updates active menu item for display in menu
   updateMenu(id, active) {
     let menus = this.state.menus;
@@ -106,6 +117,7 @@ class AppContainer extends Component {
         updateMenu={this.updateMenu}
         updateSearch={this.updateSearch}
         searchTerms={this.state.searchTerms}
+        data={this.state.data}
         />
     );
   }

diff --git a/src/Containers/ResultContainer.js b/src/Containers/ResultContainer.js
@@ -1,77 +1,50 @@
 import React, { Component } from 'react';
 import { Result } from '../Components/Result/Result';
-import Graph from '../Components/Graph/Graph';
 
 class ResultContainer extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      showResult: false
+      showResult: false,
+      dataArray: []
     }
     this.updateShowResult = this.updateShowResult.bind(this);
-    this.generateResult = this.generateResult.bind(this);
+    this.setDataArray = this.setDataArray.bind(this);
   }
-  // Look up data for particular site
-  checkActive(site) {
-    // Define what user wants to compare
-    let menu1 = this.props.searchTerms[0];
-    let menu2 = this.props.searchTerms[1];
-    // Entire data set
-    let results = this.props.results;
-    // Cycle through entire data set looking for a match
-    for (let i = 0; i < results.length; i++) {
-      if (results[i].site === site) {
-        if (results[i].items.includes(menu1)
-        && results[i].items.includes(menu2)) {
-          return results[i].result;
+
+  componentWillReceiveProps(nextProps) {
+    this.setDataArray();
+    }
+
+  // Generate data to display
+  // Takes searchTerms and returns single values for each site
+  // Array returned is in same order as sites array
+  generateDataArray() {
+    let dataArray = [];
+    const term1 = this.props.searchTerms[0];
+    const term2 = this.props.searchTerms[1];
+    const sites = this.props.sites;
+    const results = this.props.results;
+    sites.forEach(site => {
+      // Examine each result in results for site and term match
+      // Add match to dataArray
+      for (let i = 0; i < results.length; i++) {
+        if (results[i].site === site && results[i].items.includes(term1) === true && results[i].items.includes(term2) === true) {
+            dataArray.push(results[i].result);
+          }
         }
       }
-    }
+    )
+    console.log(this.props.searchTerms)
+    console.log(dataArray)
+    return dataArray;
   }
 
-  // Takes searchTerms and produces a table based on results
-  generateResult() {
-    let menu1 = this.props.searchTerms[0];
-    let menu2 = this.props.searchTerms[1];
-
-    // Check if search terms are the same
-    if(menu1 === menu2) {
-      return <p>Pick two different options</p>
-
-    // Return table and graph in two columns
-    } else {
-      return (
-            <div>
-            <p>Comparing {menu1} + {menu2}:</p>
-            <div className="row">
-            <div className='col'>
-            <table className="table">
-              <thead>
-            <tr>
-              <th scope="col">Site</th>
-              <th scope="col">Result</th>
-            </tr>
-          </thead>
-            <tbody>
-            {
-              this.props.sites.map(site => {
-                return <tr key={site}>
-                     <th scope="row">{site}</th>
-                     <td><p>{this.checkActive(site)}</p>
-                       </td>
-                   </tr>
-                 })
-               }
-             </tbody>
-            </table>
-          </div>
-
-     <div className='col'>
-       {/*Graph goes here*/}
-     </div>
-     </div>
-     </div>)
-    }
+  setDataArray() {
+    let dataArray = this.generateDataArray();
+    this.setState({
+      dataArray: dataArray
+    })
   }
 
   updateShowResult() {
@@ -85,7 +58,12 @@ class ResultContainer extends Component {
             generateResult={this.generateResult}
             showResult={this.state.showResult}
             updateSearch={this.props.updateSearch}
-            updateShowResult={this.updateShowResult}/>;
+            updateShowResult={this.updateShowResult}
+            setDataArray={this.setDataArray}
+            dataArray={this.state.dataArray}
+            searchTerms={this.props.searchTerms}
+            sites={this.props.sites}
+            />;
   }
 
 

diff --git a/src/Utils/Crypto.js b/src/Utils/Crypto.js
@@ -0,0 +1,21 @@
+import 'whatwg-fetch';
+
+const Crypto = {};
+const baseUrl = 'http://188.166.66.158:80/compare/test_one';
+const starApi = 'https://swapi.co/api/people/1/'
+
+Crypto.getData = () => {
+  const url = `${baseUrl}`;
+
+  return fetch(url).then(response => {
+    if (!response.ok) {
+      return new Promise(resolve => resolve([]));
+    }
+    return response.json().then(jsonResponse => {
+      console.log(jsonResponse.data);
+      return jsonResponse.data;
+    });
+  });
+};
+
+export default Crypto;