-
Notifications
You must be signed in to change notification settings - Fork 0
/
App.js
126 lines (113 loc) · 3.28 KB
/
App.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
import React, { useEffect, useState } from "react";
import { Platform, SafeAreaView, StatusBar, StyleSheet, Text, View } from "react-native";
import CurrentPrice from "./src/components/CurrentPrice";
import HistoryGraphic from "./src/components/HistoryGraphic";
import QuotationsList from "./src/components/QuotationsList";
/**
* Faz com que números
* @param {number} number
* @param {number} [length]
* @returns {string}
*/
function addZero(number, length = 2) {
return String(number).padStart(length, "0");
}
/**
*
* @param {Date} date
* @returns {string}
*/
function formatDate(date) {
return `${date.getFullYear()}-${addZero(date.getMonth() + 1)}-${addZero(date.getDate())}`;
}
/**
* Retorna a url da api com as datas de início e fim da consulta configuradas
* usando o valor da variável `qtdDay`
*
* @param {number} qtdDay
* @returns {string}
*/
function url(qtdDay) {
const date = new Date; // inicia com a data de hoje
const endDate = formatDate(date); // a data final da consulta é hoje
date.setDate(date.getDate() - qtdDay); // seta a data do objeto `Date` como send igual a hoje - `qtdDay`.
const startDate = formatDate(date); // Gera a data de inicio
return `https://api.coindesk.com/v1/bpi/historical/close.json?start=${startDate}&end=${endDate}`;
}
/**
* Faz o fetch dos dados da API de histórico de cotações
*
* @param {number} days
* @returns {Promise<object[]>}
*/
async function fetchBPI(days) {
const response = await fetch(url(days));
const json = await response.json();
return json.bpi;
}
/**
* @param {object[]} bpi
* @returns {{data: string, valor: number}[]}
*/
function formatListCoins(bpi) {
return Object.keys(bpi)
.map(key => ({
data: key.split("-").reverse().join("/"),
valor: bpi[key],
}))
.reverse();
}
/**
* @param {object[]} bpi
* @returns {number[]}
*/
function formatPriceCoinsGraphic(bpi) {
return Object.keys(bpi)
.map(key => bpi[key]);
}
export default function App() {
const [ coinstList, setCoinstList ] = useState([]);
const [ coinsGraphictList, setCoinsGraphictList ] = useState([0]);
const [ days, setDays ] = useState(7);
const [ updateData, setUpdateData ] = useState(true);
const [ price, setPrice ] = useState(0);
/**
* @param {number} number
* @returns {void}
*/
const updateDay = (number) => {
setDays(number);
setUpdateData(true);
}
useEffect(() => {
if (!updateData) return;
fetchBPI(days).then((bpi) => {
// nova lista de valores
setCoinstList(formatListCoins(bpi));
// novos valores do gráfico
const newValueList = formatPriceCoinsGraphic(bpi);
setCoinsGraphictList(newValueList);
setPrice(newValueList[newValueList.length - 1]);
});
setUpdateData(false);
}, [updateData]);
return (
<SafeAreaView style={styles.container}>
<StatusBar
backgroundColor="#f50d41"
barStyle="light-content"
/>
<CurrentPrice lastCotation={price} />
<HistoryGraphic infoDataGraphic={coinsGraphictList} />
<QuotationsList filterDay={updateDay} listTransaction={coinstList} />
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#000000',
alignItems: 'center',
paddingTop: Platform.OS === 'android' ? 40 : 0,
},
});