From edb88520059b3491b5c475bf8fef2ff736600525 Mon Sep 17 00:00:00 2001 From: Susan Puckett Date: Wed, 18 Apr 2018 15:00:19 +0200 Subject: [PATCH 1/6] Update README.md --- README.md | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index d4c7606a..e4d53aeb 100644 --- a/README.md +++ b/README.md @@ -1,16 +1,21 @@ ## CryptoCompare -This is a project built for Learn Code Utrecht. +This is a project built for [Learn Code Utrecht](https://github.com/learncodeutrecht/LearnCodeUtrecht). For questions on Front End, ask [Susan](https://github.com/sepuckett86/). To run on your local computer: + Install [Node](https://nodejs.org/en/). + Clone this repository. -Navigate to main directory in your CLI. -First install necessary dependencies: + +Navigate to main directory `CryptoCurrencyFrontend` in your CLI. + +Install necessary dependencies: `npm install` -Then run a development build: + +Run a development build: `npm start` ## All content below is auto-generated upon building a new React App. From ff7d5a3ff5c596d5125bc95e1da5817137f67dbf Mon Sep 17 00:00:00 2001 From: sepuckett86 Date: Sun, 29 Apr 2018 17:00:02 +0200 Subject: [PATCH 2/6] add util --- src/Components/App/App.js | 1 + src/Components/Button/Button.css | 4 -- src/Components/Button/Button.js | 20 ------ src/Components/Graph/Graph.js | 59 +++--------------- src/Components/Result/Result.js | 42 ++++++++++++- src/Containers/AppContainer.js | 14 ++++- src/Containers/ResultContainer.js | 100 ++++++++++++------------------ src/Utils/Crypto.js | 21 +++++++ 8 files changed, 124 insertions(+), 137 deletions(-) delete mode 100644 src/Components/Button/Button.css delete mode 100644 src/Components/Button/Button.js create mode 100644 src/Utils/Crypto.js 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}:

+
+
+ + + + + + + + + { + this.props.sites.map((site, i) => { + return + + + + }) + } + +
SiteResult
{site}

{this.props.dataArray[i]}

+
+
+ +
+ +
+
+
) + } return (
- { 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}:

-
-
- - - - - - - - - { - this.props.sites.map(site => { - return - - - - }) - } - -
SiteResult
{site}

{this.checkActive(site)}

-
-
- -
- {/*Graph goes here*/} -
-
-
) - } + 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 new file mode 100644 index 00000000..f00964e6 --- /dev/null +++ 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; From 392f2468d676e172248a6762c8fad5e7d10b284e Mon Sep 17 00:00:00 2001 From: sepuckett86 Date: Sun, 13 May 2018 18:56:45 +0200 Subject: [PATCH 3/6] add getData method and fix menu loading issue" --- src/Components/Menu/Menu.js | 9 +--- src/Containers/AppContainer.js | 85 +++++++++++++++++++++++++++++-- src/Containers/ResultContainer.js | 2 - src/Utils/Crypto.js | 8 +-- 4 files changed, 86 insertions(+), 18 deletions(-) diff --git a/src/Components/Menu/Menu.js b/src/Components/Menu/Menu.js index 1c396344..8fa3156a 100644 --- a/src/Components/Menu/Menu.js +++ b/src/Components/Menu/Menu.js @@ -4,17 +4,10 @@ import './Menu.css'; class Menu extends React.Component { constructor(props) { super(props); - - this.state = { - activeName: this.props.active - } this.handleClick = this.handleClick.bind(this); } handleClick(event) { - this.setState({ - activeName: event.target.name - }); this.props.updateMenu(this.props.menuID, event.target.name); } @@ -24,7 +17,7 @@ class Menu extends React.Component {
{ diff --git a/src/Containers/AppContainer.js b/src/Containers/AppContainer.js index c6a640c0..3e10ab2b 100644 --- a/src/Containers/AppContainer.js +++ b/src/Containers/AppContainer.js @@ -12,7 +12,7 @@ class AppContainer extends Component { { id: '1', items: ['A', 'B', 'C'], - active: 'A', + active: 'S', key: 'menu1' }, { @@ -76,14 +76,88 @@ class AppContainer extends Component { this.updateMenu = this.updateMenu.bind(this); this.updateSearch = this.updateSearch.bind(this); + this.generateMenus = this.generateMenus.bind(this); } // Before render, sets state to json response from Crypto API - componentWillMount() { - let data = Crypto.getData(); + // Uses this to assign menus + componentDidMount() { + Crypto.getData().then(data => { + this.setState({ + data: data + }); + this.generateMenus(2); + } + + + + ); + + } + + // Method that returns data type you want + // data: {website: [{rate1: '', rate2:'', etc}, {}], website: [{}, {}], website: [{}, {}]} + // keys: rate1, rate2, pairing, date, currencies(ARRAY) + getData(dataType) { + const data = this.state.data; + // Declare empty variable for data to return at end of this method + let finalData; + + // Switch statement to handle different arguments and assign returnData + switch(dataType) { + case "currencies": + // Delare array of websites + // Example: [bitstamp, bittrex, kraken] + const websiteArray = Object.keys(data); + // Declare empty master array for currencies that will be filled by following code + let currencyArray = []; + // Cycle through each website + websiteArray.forEach(website => { + // Declare website value array + // Example: [{…}, {…}] + const websiteValueArray = data[website]; + // Cycle through each dataObject of website value array + websiteValueArray.forEach(dataObject => { + // Declare currencies for single dataObject + // Example: ["BCH", "BTC"] + const currencies = dataObject.currencies; + // Cycle through each currency + currencies.forEach(currency => { + // Check if currency is already in master currencyArray + // Only add it to currencyArray if it is not there already + if (!currencyArray.includes(currency)) { + currencyArray.push(currency) + } + }) + }) + }) + // At this point, currencyArray will be filled with all unique currencies + finalData = currencyArray; + break; + default: + finalData = data; + } + return finalData; +} + + generateMenus(numberOfMenus) { + let menus = []; + let currencies = this.getData("currencies"); + let startingId = 1; + for (let i = 0; i < numberOfMenus; i++) { + const newMenu = { + id: startingId, + items: currencies, + active: currencies[0], + key: `menu${startingId}` + }; + menus.push(newMenu); + startingId++; + + }; this.setState({ - data: data + menus: menus }) } @@ -109,7 +183,9 @@ class AppContainer extends Component { } render() { + return ( + + ); } } diff --git a/src/Containers/ResultContainer.js b/src/Containers/ResultContainer.js index 5fe2dc2f..1686403b 100644 --- a/src/Containers/ResultContainer.js +++ b/src/Containers/ResultContainer.js @@ -35,8 +35,6 @@ class ResultContainer extends Component { } } ) - console.log(this.props.searchTerms) - console.log(dataArray) return dataArray; } diff --git a/src/Utils/Crypto.js b/src/Utils/Crypto.js index f00964e6..eb8f974a 100644 --- a/src/Utils/Crypto.js +++ b/src/Utils/Crypto.js @@ -1,8 +1,8 @@ import 'whatwg-fetch'; const Crypto = {}; -const baseUrl = 'http://188.166.66.158:80/compare/test_one'; -const starApi = 'https://swapi.co/api/people/1/' +const baseUrl = 'http://206.189.12.80:8000/test_view/'; +// const starApi = 'https://swapi.co/api/people/1/' Crypto.getData = () => { const url = `${baseUrl}`; @@ -12,8 +12,8 @@ Crypto.getData = () => { return new Promise(resolve => resolve([])); } return response.json().then(jsonResponse => { - console.log(jsonResponse.data); - return jsonResponse.data; + console.log(jsonResponse); + return jsonResponse; }); }); }; From 03b434f6908c022802e4e71c80a703938bf64c9f Mon Sep 17 00:00:00 2001 From: sepuckett86 Date: Sun, 13 May 2018 19:02:47 +0200 Subject: [PATCH 4/6] add getData method and fix menu loading issue --- src/Components/App/App.js | 4 ++-- src/Components/Menu/Menu.js | 1 - src/Components/Result/Result.js | 5 ++++- src/Containers/AppContainer.js | 2 +- 4 files changed, 7 insertions(+), 5 deletions(-) diff --git a/src/Components/App/App.js b/src/Components/App/App.js index 29476343..9479a3bd 100644 --- a/src/Components/App/App.js +++ b/src/Components/App/App.js @@ -19,9 +19,9 @@ export class App extends Component {
CryptoCompare

- +
- Pick two options + Pick two cryptocurrencies:

Site - Result + Bid + Ask @@ -39,6 +40,8 @@ export class Result extends React.Component { {site}

{this.props.dataArray[i]}

+

{this.props.dataArray[i]}

+ }) } diff --git a/src/Containers/AppContainer.js b/src/Containers/AppContainer.js index 3e10ab2b..5628afa1 100644 --- a/src/Containers/AppContainer.js +++ b/src/Containers/AppContainer.js @@ -23,7 +23,7 @@ class AppContainer extends Component { } ], searchTerms: ['A', 'A'], - sites: ['Apples', 'Oranges', 'Bananas'], + sites: ['Bitstamp', 'Bittrex', 'Kraken'], results: [ { site: 'Bananas', From 06547431813e1d15e2054e49f160c82f61524aae Mon Sep 17 00:00:00 2001 From: sepuckett86 Date: Sun, 13 May 2018 19:36:59 +0200 Subject: [PATCH 5/6] restructure code --- src/{Components/App => }/App.css | 0 src/{Components/App => }/App.js | 2 +- src/{Containers => }/AppContainer.js | 16 ++++++---------- src/{Components => Scenes}/Compare/Compare.css | 0 src/{Components => Scenes}/Compare/Compare.js | 6 +++--- .../Compare}/Components/Graph/Graph.css | 0 .../Compare}/Components/Graph/Graph.js | 0 .../Compare}/Components/Menu/Menu.css | 0 src/{ => Scenes/Compare}/Components/Menu/Menu.js | 0 .../Compare}/Components/Result/Result.css | 0 .../Compare}/Components/Result/Result.js | 0 .../Components/Result}/ResultContainer.js | 2 +- src/index.js | 2 +- 13 files changed, 12 insertions(+), 16 deletions(-) rename src/{Components/App => }/App.css (100%) rename src/{Components/App => }/App.js (95%) rename src/{Containers => }/AppContainer.js (95%) rename src/{Components => Scenes}/Compare/Compare.css (100%) rename src/{Components => Scenes}/Compare/Compare.js (87%) rename src/{ => Scenes/Compare}/Components/Graph/Graph.css (100%) rename src/{ => Scenes/Compare}/Components/Graph/Graph.js (100%) rename src/{ => Scenes/Compare}/Components/Menu/Menu.css (100%) rename src/{ => Scenes/Compare}/Components/Menu/Menu.js (100%) rename src/{ => Scenes/Compare}/Components/Result/Result.css (100%) rename src/{ => Scenes/Compare}/Components/Result/Result.js (100%) rename src/{Containers => Scenes/Compare/Components/Result}/ResultContainer.js (97%) diff --git a/src/Components/App/App.css b/src/App.css similarity index 100% rename from src/Components/App/App.css rename to src/App.css diff --git a/src/Components/App/App.js b/src/App.js similarity index 95% rename from src/Components/App/App.js rename to src/App.js index 9479a3bd..c0021b3f 100644 --- a/src/Components/App/App.js +++ b/src/App.js @@ -1,7 +1,7 @@ import React, { Component } from 'react'; import './App.css'; -import Compare from '../Compare/Compare'; +import Compare from './Scenes/Compare/Compare'; export class App extends Component { displayName: 'App'; diff --git a/src/Containers/AppContainer.js b/src/AppContainer.js similarity index 95% rename from src/Containers/AppContainer.js rename to src/AppContainer.js index 5628afa1..a2563d41 100644 --- a/src/Containers/AppContainer.js +++ b/src/AppContainer.js @@ -1,8 +1,8 @@ // This file contains the major data and needs to connect with the API. import React, { Component } from 'react'; -import { App } from '../Components/App/App'; -import Crypto from '../Utils/Crypto'; +import { App } from './App'; +import Crypto from '../src/Utils/Crypto'; class AppContainer extends Component { constructor(props) { @@ -11,14 +11,14 @@ class AppContainer extends Component { menus: [ { id: '1', - items: ['A', 'B', 'C'], - active: 'S', + items: ['Default', 'B', 'C'], + active: 'Default', key: 'menu1' }, { id: '2', - items: ['A', 'B', 'C'], - active: 'A', + items: ['Default', 'B', 'C'], + active: 'Default', key: 'menu2' } ], @@ -89,11 +89,7 @@ class AppContainer extends Component { }); this.generateMenus(2); } - - - ); - } // Method that returns data type you want diff --git a/src/Components/Compare/Compare.css b/src/Scenes/Compare/Compare.css similarity index 100% rename from src/Components/Compare/Compare.css rename to src/Scenes/Compare/Compare.css diff --git a/src/Components/Compare/Compare.js b/src/Scenes/Compare/Compare.js similarity index 87% rename from src/Components/Compare/Compare.js rename to src/Scenes/Compare/Compare.js index c94048a0..18e6e458 100644 --- a/src/Components/Compare/Compare.js +++ b/src/Scenes/Compare/Compare.js @@ -1,8 +1,8 @@ import React from 'react'; import './Compare.css'; -import Menu from '../Menu/Menu'; -import ResultContainer from '../../Containers/ResultContainer'; +import Menu from './Components/Menu/Menu'; +import ResultContainer from './Components/Result/ResultContainer'; class Compare extends React.Component { @@ -25,6 +25,7 @@ class Compare extends React.Component { return (
, document.getElementById('root')); From 32d79b2f5b963f2d5c5d688b98a62675a35d5b2c Mon Sep 17 00:00:00 2001 From: sepuckett86 Date: Sun, 13 May 2018 19:48:38 +0200 Subject: [PATCH 6/6] add gradient backgrounds --- src/App.css | 8 +++++++- src/AppContainer.js | 4 ++-- src/index.css | 6 ++++++ 3 files changed, 15 insertions(+), 3 deletions(-) diff --git a/src/App.css b/src/App.css index cb424269..5a29c04c 100644 --- a/src/App.css +++ b/src/App.css @@ -1,6 +1,7 @@ .App { text-align: center; font-family: 'Montserrat', sans-serif; + } .App-logo { @@ -9,7 +10,12 @@ } .App-header { - background-color: #222; + /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7d7e7d+0,0e0e0e+100;Black+3D */ + background: rgb(125,126,125); /* Old browsers */ + background: -moz-linear-gradient(-45deg, rgba(125,126,125,1) 0%, rgba(14,14,14,1) 100%); /* FF3.6-15 */ + background: -webkit-linear-gradient(-45deg, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); /* Chrome10-25,Safari5.1-6 */ + background: linear-gradient(135deg, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ height: 100px; padding: 20px; color: white; diff --git a/src/AppContainer.js b/src/AppContainer.js index a2563d41..811e326c 100644 --- a/src/AppContainer.js +++ b/src/AppContainer.js @@ -136,7 +136,7 @@ class AppContainer extends Component { } return finalData; } - + // Generates menu content based on data in this.state.data using getData method generateMenus(numberOfMenus) { let menus = []; let currencies = this.getData("currencies"); @@ -160,7 +160,7 @@ class AppContainer extends Component { // Updates active menu item for display in menu updateMenu(id, active) { let menus = this.state.menus; - for (let i=0; i