Skip to content

Commit

Permalink
Part 2 — State & API Integration
Browse files Browse the repository at this point in the history
  • Loading branch information
@sketchthat
sketchthat committed Jan 7, 2019
1 parent 3b07400 commit d25522e
Show file tree
Hide file tree
Showing 3 changed files with 152 additions and 12 deletions.
91 changes: 80 additions & 11 deletions charts/Coin.js
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,51 @@
import React, { Component } from 'react';
import { Card, CardItem, Left, Right, Body, Text, Thumbnail } from 'native-base';
import { StyleSheet } from 'react-native';
import { Card, CardItem, Left, Right, Body, Text, Thumbnail, Spinner, View } from 'native-base';
import { LineChart } from 'react-native-svg-charts';

class Coin extends Component {
constructor(props) {
super(props);

this.state = {
trades: [],
loading: true,
percent: null,
price: null,
};
}

componentWillMount() {
this.fetchKline();
}

fetchKline() {
fetch('https://api.binance.com/api/v1/klines?symbol=BTCUSDT&interval=30m&limit=50', {
method: 'GET'
})
.then(resp => resp.json())
.then(resp => {
const trades = resp.map(interval => parseFloat(interval[1]));

const firstTrade = trades[0];
const lastTrade = trades.slice(-1)[0];
const percent = (((lastTrade - firstTrade) / firstTrade) * 100).toFixed(2);

this.setState({
loading: false,
trades: trades,
percent: percent,
price: lastTrade,
});
})
.catch(err => {
console.log(err);
});
}

render() {
const { loading, trades, percent, price } = this.state;

return (
<Card>
<CardItem>
Expand All @@ -15,20 +58,46 @@ class Coin extends Component {
</Left>
</CardItem>
<CardItem>
<Text>Chart...</Text>
</CardItem>
<CardItem footer>
<Left>
<Text>5%</Text>
</Left>
<Body />
<Right>
<Text>$3,500.00</Text>
</Right>
{
loading &&
<Spinner />
}
{
!loading &&
<View style={styles.view}>
<LineChart
style={styles.chart}
data={trades}
svg={{ stroke: styles.chart.color }}
/>
</View>
}
</CardItem>
{ !loading &&
<CardItem footer>
<Left>
<Text>{percent}%</Text>
</Left>
<Body />
<Right>
<Text>${price.toLocaleString('en-us')}</Text>
</Right>
</CardItem>
}
</Card>
);
}
}

export default Coin;

const styles = StyleSheet.create({
view: {
flex: 1,
height: 75,
},
chart: {
height: 75,
color: '#FF0000',
},
});
3 changes: 2 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,8 @@
"expo": "^31.0.2",
"native-base": "^2.10.0",
"react": "16.5.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-31.0.0.tar.gz"
"react-native": "https://github.com/expo/react-native/archive/sdk-31.0.0.tar.gz",
"react-native-svg-charts": "^5.2.0"
},
"devDependencies": {
"babel-preset-expo": "^5.0.0"
Expand Down
70 changes: 70 additions & 0 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1592,6 +1592,66 @@ cross-spawn@^6.0.5:
shebang-command "^1.2.0"
which "^1.2.9"

d3-array@^1.2.0:
version "1.2.4"
resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-1.2.4.tgz#635ce4d5eea759f6f605863dbcfc30edc737f71f"

d3-collection@1:
version "1.0.7"
resolved "https://registry.yarnpkg.com/d3-collection/-/d3-collection-1.0.7.tgz#349bd2aa9977db071091c13144d5e4f16b5b310e"

d3-color@1:
version "1.2.3"
resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-1.2.3.tgz#6c67bb2af6df3cc8d79efcc4d3a3e83e28c8048f"

d3-format@1:
version "1.3.2"
resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-1.3.2.tgz#6a96b5e31bcb98122a30863f7d92365c00603562"

d3-interpolate-path@2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/d3-interpolate-path/-/d3-interpolate-path-2.0.0.tgz#cb0327314fedb14e6ea1789ab7e095a16c2f8ab2"
dependencies:
d3-interpolate "^1.1.1"

d3-interpolate@1, d3-interpolate@^1.1.1:
version "1.3.2"
resolved "https://registry.yarnpkg.com/d3-interpolate/-/d3-interpolate-1.3.2.tgz#417d3ebdeb4bc4efcc8fd4361c55e4040211fd68"
dependencies:
d3-color "1"

d3-path@1:
version "1.0.7"
resolved "https://registry.yarnpkg.com/d3-path/-/d3-path-1.0.7.tgz#8de7cd693a75ac0b5480d3abaccd94793e58aae8"

d3-scale@^1.0.6:
version "1.0.7"
resolved "https://registry.yarnpkg.com/d3-scale/-/d3-scale-1.0.7.tgz#fa90324b3ea8a776422bd0472afab0b252a0945d"
dependencies:
d3-array "^1.2.0"
d3-collection "1"
d3-color "1"
d3-format "1"
d3-interpolate "1"
d3-time "1"
d3-time-format "2"

d3-shape@^1.0.6:
version "1.2.2"
resolved "https://registry.yarnpkg.com/d3-shape/-/d3-shape-1.2.2.tgz#f9dba3777a5825f9a8ce8bc928da08c17679e9a7"
dependencies:
d3-path "1"

d3-time-format@2:
version "2.1.3"
resolved "https://registry.yarnpkg.com/d3-time-format/-/d3-time-format-2.1.3.tgz#ae06f8e0126a9d60d6364eac5b1533ae1bac826b"
dependencies:
d3-time "1"

d3-time@1:
version "1.0.10"
resolved "https://registry.yarnpkg.com/d3-time/-/d3-time-1.0.10.tgz#8259dd71288d72eeacfd8de281c4bf5c7393053c"

debug@2.6.9, debug@^2.1.2, debug@^2.2.0, debug@^2.3.3, debug@^2.6.8, debug@^2.6.9:
version "2.6.9"
resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
Expand Down Expand Up @@ -3850,6 +3910,16 @@ react-native-screens@1.0.0-alpha.15:
version "1.0.0-alpha.15"
resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-1.0.0-alpha.15.tgz#5b5a0041310b46f12048fda1908d52e7290ec18f"

react-native-svg-charts@^5.2.0:
version "5.2.0"
resolved "https://registry.yarnpkg.com/react-native-svg-charts/-/react-native-svg-charts-5.2.0.tgz#eda090136250d02f9d1d8c971663afaee4ed2f4f"
dependencies:
d3-array "^1.2.0"
d3-interpolate-path "2.0.0"
d3-scale "^1.0.6"
d3-shape "^1.0.6"
prop-types "^15.6.0"

react-native-svg@8.0.8:
version "8.0.8"
resolved "https://registry.yarnpkg.com/react-native-svg/-/react-native-svg-8.0.8.tgz#5d4c636751d9db2d98a9b3cfc4ef45c4eac65d60"
Expand Down

0 comments on commit d25522e

Please sign in to comment.