Modularizated API Calls

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;

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

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

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 = {}

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

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

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}) => {
                                     />                                    
                                 ))
                             }
-                                {/* <Crypto CryptoStyles={CryptoStyles} />
-                                <Crypto CryptoStyles={CryptoStyles} />
-                                <Crypto CryptoStyles={CryptoStyles} />
-                                <Crypto CryptoStyles={CryptoStyles} />
-                                <Crypto CryptoStyles={CryptoStyles} />
-                                <Crypto CryptoStyles={CryptoStyles} /> */}
                         </Grid>
                 </CryptosStyles>
             : null