diff --git a/src/Components/App/App.js b/src/Components/App/App.js
index aa073b0f..29476343 100644
--- a/src/Components/App/App.js
+++ b/src/Components/App/App.js
@@ -19,6 +19,7 @@ export class App extends Component {
CryptoCompare
+
Pick two options
diff --git a/src/Components/Button/Button.css b/src/Components/Button/Button.css
deleted file mode 100644
index 10949852..00000000
--- a/src/Components/Button/Button.css
+++ /dev/null
@@ -1,4 +0,0 @@
-button {
- margin: 2%;
- font-family: 'Montserrat', sans-serif;
-}
diff --git a/src/Components/Button/Button.js b/src/Components/Button/Button.js
deleted file mode 100644
index 37fbe2ce..00000000
--- a/src/Components/Button/Button.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react';
-import './Button.css';
-
-class Button extends React.Component {
- constructor(props){
- super(props);
-
- this.handleClick = this.handleClick.bind(this);
- }
- handleClick() {
- this.props.onClick();
- }
- render() {
- return(
-
- )
- }
-}
-
-export default Button;
diff --git a/src/Components/Graph/Graph.js b/src/Components/Graph/Graph.js
index 4fd5b291..ed3444fc 100644
--- 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
index 7aa87ff0..928268cb 100644
--- 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 = (Pick two different options
)
+ } else {
+ result = (
+
Comparing {term1} + {term2}:
+
+
+
+
+
+ | Site |
+ Result |
+
+
+
+ {
+ this.props.sites.map((site, i) => {
+ return
+ | {site} |
+ {this.props.dataArray[i]}
+ |
+
+ })
+ }
+
+
+
+
+
+
+
+
+
- { this.props.showResult === true ? this.props.generateResult()
+ { this.props.showResult === true ? result
: null }
+
)
}
diff --git a/src/Containers/AppContainer.js b/src/Containers/AppContainer.js
index 1994aee5..c6a640c0 100644
--- 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
index cee366bc..5fe2dc2f 100644
--- 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 Pick two different options
-
- // Return table and graph in two columns
- } else {
- return (
-
-
Comparing {menu1} + {menu2}:
-
-
-
-
-
- | Site |
- Result |
-
-
-
- {
- this.props.sites.map(site => {
- return
- | {site} |
- {this.checkActive(site)}
- |
-
- })
- }
-
-
-
-
-
- {/*Graph goes here*/}
-
-
-