From 9f4ceb14e20876c8290ec79267662f095dd95e10 Mon Sep 17 00:00:00 2001 From: Francisco Pessano Date: Thu, 3 Feb 2022 20:48:19 -0300 Subject: [PATCH] Modularizated API Calls --- .../Crypto/API calls/getCryptoData.js | 19 ++++++ .../Crypto/API calls/getCryptoPrice.js | 22 +++++++ src/components/Crypto/API calls/getDates.js | 16 +++++ src/components/Crypto/Crypto.jsx | 64 +++---------------- .../API calls/getCryptoPrices.js | 15 +++++ .../API calls/getCryptocurrencyData.js | 16 +++++ .../CryptoGallery/CryptoGallery.jsx | 43 ++----------- 7 files changed, 102 insertions(+), 93 deletions(-) create mode 100644 src/components/Crypto/API calls/getCryptoData.js create mode 100644 src/components/Crypto/API calls/getCryptoPrice.js create mode 100644 src/components/Crypto/API calls/getDates.js create mode 100644 src/components/CryptoGallery/API calls/getCryptoPrices.js create mode 100644 src/components/CryptoGallery/API calls/getCryptocurrencyData.js diff --git a/src/components/Crypto/API calls/getCryptoData.js b/src/components/Crypto/API calls/getCryptoData.js new file mode 100644 index 0000000..c2234f4 --- /dev/null +++ b/src/components/Crypto/API calls/getCryptoData.js @@ -0,0 +1,19 @@ +import moment from "moment" + +const getCryptoData = async (cryptoID) => { + + try { + + let today = moment().format('l').split('/') + today = `${today[1]}-${today[0]}-${today[2]}` + + const requestData = await fetch(`https://api.coingecko.com/api/v3/coins/${cryptoID}/history?date=${today}`) + const data = await requestData.json() + return data + + } catch (error) { + console.log(error); + } +} + +export default getCryptoData; diff --git a/src/components/Crypto/API calls/getCryptoPrice.js b/src/components/Crypto/API calls/getCryptoPrice.js new file mode 100644 index 0000000..d64ca89 --- /dev/null +++ b/src/components/Crypto/API calls/getCryptoPrice.js @@ -0,0 +1,22 @@ +const getCryptoPrice = async (days, cryptoID) => { + + if (typeof(days) === 'number') { + + days -= 1 + } + + try { + + const requestData = await fetch(`https://api.coingecko.com/api/v3/coins/${cryptoID}/market_chart?vs_currency=usd&days=${days}&interval=daily`) + const data = await requestData.json() + + return data.prices.map(arr => { + return arr[1] + }) + + } catch (error) { + console.log(error); + } +} + +export default getCryptoPrice \ No newline at end of file diff --git a/src/components/Crypto/API calls/getDates.js b/src/components/Crypto/API calls/getDates.js new file mode 100644 index 0000000..291f086 --- /dev/null +++ b/src/components/Crypto/API calls/getDates.js @@ -0,0 +1,16 @@ +import moment from "moment" + +const getDates = (days) => { + + let result = [] + + for (let i = 0; i < days; i++) { + + const day = moment().subtract(i, 'days').format('DD-MM-YY') + result.push(day) + } + + return result.reverse() +} + +export default getDates \ No newline at end of file diff --git a/src/components/Crypto/Crypto.jsx b/src/components/Crypto/Crypto.jsx index 492e33b..f419bed 100644 --- a/src/components/Crypto/Crypto.jsx +++ b/src/components/Crypto/Crypto.jsx @@ -12,6 +12,10 @@ import CryptoButtonModule from './CryptoButtonModule'; import { Box } from '@mui/system'; import Loading from './Loading'; +import getCryptoData from './API calls/getCryptoData'; +import getCryptoPrice from './API calls/getCryptoPrice'; +import getDates from './API calls/getDates' + const Crypto = () => { const CryptoStyles = styled(Grid)` @@ -114,66 +118,16 @@ const Crypto = () => { const [lineDatesInterval, setLineDatesInterval] = useState('week') const [linePoints, setLinePoints] = useState(true) - - const getCryptoData = async () => { - - try { - - let today = moment().format('l').split('/') - today = `${today[1]}-${today[0]}-${today[2]}` - - const requestData = await fetch(`https://api.coingecko.com/api/v3/coins/${cryptoID}/history?date=${today}`) - const data = await requestData.json() - return data - - } catch (error) { - console.log(error); - } - } - - const getCryptoPrice = async (days) => { - - if (typeof(days) === 'number') { - - days -= 1 - } - - try { - - const requestData = await fetch(`https://api.coingecko.com/api/v3/coins/${cryptoID}/market_chart?vs_currency=usd&days=${days}&interval=daily`) - const data = await requestData.json() - - return data.prices.map(arr => { - return arr[1] - }) - - } catch (error) { - console.log(error); - } - } - - const getDates = (days) => { - - let result = [] - - for (let i = 0; i < days; i++) { - - const day = moment().subtract(i, 'days').format('DD-MM-YY') - result.push(day) - } - - return result.reverse() - } const effectHandler = async () => { - const data = await getCryptoData() + const data = await getCryptoData(cryptoID) const cryptoPricesPrevious = {} - cryptoPricesPrevious.week = await getCryptoPrice(7) - cryptoPricesPrevious.month = await getCryptoPrice(30) - cryptoPricesPrevious.threeMonths = await getCryptoPrice(90) - cryptoPricesPrevious.year = await getCryptoPrice(365) + cryptoPricesPrevious.week = await getCryptoPrice(7, cryptoID) + cryptoPricesPrevious.month = await getCryptoPrice(30, cryptoID) + cryptoPricesPrevious.threeMonths = await getCryptoPrice(90, cryptoID) + cryptoPricesPrevious.year = await getCryptoPrice(365, cryptoID) setCryptoPrices(cryptoPricesPrevious) const datesPrevious = {} diff --git a/src/components/CryptoGallery/API calls/getCryptoPrices.js b/src/components/CryptoGallery/API calls/getCryptoPrices.js new file mode 100644 index 0000000..6ebed9d --- /dev/null +++ b/src/components/CryptoGallery/API calls/getCryptoPrices.js @@ -0,0 +1,15 @@ +const getCryptoPrices = async (data) => { + + try { + + let requestData = await fetch(`https://api.coingecko.com/api/v3/coins/${data.id}/market_chart?vs_currency=usd&days=6&interval=daily`) + requestData = await requestData.json() + + return requestData.prices + + } catch (error) { + console.log(error) + } +} + +export default getCryptoPrices \ No newline at end of file diff --git a/src/components/CryptoGallery/API calls/getCryptocurrencyData.js b/src/components/CryptoGallery/API calls/getCryptocurrencyData.js new file mode 100644 index 0000000..a8ef3e1 --- /dev/null +++ b/src/components/CryptoGallery/API calls/getCryptocurrencyData.js @@ -0,0 +1,16 @@ +const getCryptocurrencyData = async () => { + + try { + + let data = await fetch("https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&per_page=30&order=gecko_desc") + data = await data.json() + + return data + + } catch (error) { + + console.log(error); + } +} + +export default getCryptocurrencyData \ No newline at end of file diff --git a/src/components/CryptoGallery/CryptoGallery.jsx b/src/components/CryptoGallery/CryptoGallery.jsx index 090c518..c1d3994 100644 --- a/src/components/CryptoGallery/CryptoGallery.jsx +++ b/src/components/CryptoGallery/CryptoGallery.jsx @@ -4,6 +4,8 @@ import styled from 'styled-components'; import CryptoGalleryItem from './CryptoGalleryItem'; import moment from 'moment'; +import getCryptocurrencyData from './API calls/getCryptocurrencyData'; +import getCryptoPrices from './API calls/getCryptoPrices'; const CryptoGallery = ({setLoading, setLoadingURL, loading}) => { @@ -70,36 +72,7 @@ const CryptoGallery = ({setLoading, setLoadingURL, loading}) => { const [cryptosPrices, setCryptosPrices] = useState(false) const [cryptosList, setCryptosList] = useState(false) - const [dates, setDates] = useState([]) - - const getCryptocurrencyData = async () => { - - try { - - let data = await fetch("https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&per_page=30&order=gecko_desc") - data = await data.json() - - return data - - } catch (error) { - - console.log(error); - } - } - - const getCryptoPrices = async (data) => { - - try { - - let requestData = await fetch(`https://api.coingecko.com/api/v3/coins/${data.id}/market_chart?vs_currency=usd&days=6&interval=daily`) - requestData = await requestData.json() - - return requestData.prices - - } catch (error) { - console.log(error) - } - } + const [dates, setDates] = useState([]) const generateArrayOfDates = () => { @@ -160,8 +133,8 @@ const CryptoGallery = ({setLoading, setLoadingURL, loading}) => { let objectResult = {} - objectResult[object.id] = {} - objectResult[object.id].prices = requestData + objectResult[object.id] = {} + objectResult[object.id].prices = requestData cryptoPricesCopy.push(objectResult) }) @@ -213,12 +186,6 @@ const CryptoGallery = ({setLoading, setLoadingURL, loading}) => { /> )) } - {/* - - - - - */} : null