Main page API Calls done

.gitignore

@@ -21,3 +21,6 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+package-lock.json
+.vscode

package.json

@@ -10,6 +10,8 @@
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
     "chart.js": "^3.7.0",
+    "js-cookie": "^3.0.1",
+    "moment": "^2.29.1",
     "react": "^17.0.2",
     "react-chartjs-2": "^4.0.1",
     "react-dom": "^17.0.2",

src/components/Cryptos/Crypto.jsx

@@ -1,11 +1,12 @@
-import React from 'react';
+import React, { useState } from 'react';
 
-import { Card, CardContent, Grid, Typography } from '@mui/material';
+import { Box, Card, CardContent, CardMedia, Grid, Typography } from '@mui/material';
 
 import { Chart as ChartJS } from 'chart.js/auto'
 import { Chart, Line }            from 'react-chartjs-2' //WTF https://stackoverflow.com/questions/67727603/error-category-is-not-a-registered-scale
+import Cookies from 'js-cookie';
 
-const Crypto = ({CryptoStyles}) => {
+const Crypto = ({CryptoStyles, data, cryptoPrices, dates}) => {
 
   const plugin = {
     id: 'custom_canvas_background_color',
@@ -19,6 +20,18 @@ const Crypto = ({CryptoStyles}) => {
     }
   }
 
+  React.useEffect(() => {
+
+    console.log(cryptoPrices[data.id].prices)
+
+    if (!cryptoPrices[data.id]) {
+
+      console.log('ERROR, PRICE ID IS DIFFERENT TO CRYPTO ID')
+      console.log(data)
+      console.log(cryptoPrices)
+    }
+  }, [])
+
   return (
     <>
       <CryptoStyles item md={4} sm={6} xs={12}>
@@ -26,25 +39,33 @@ const Crypto = ({CryptoStyles}) => {
           <CardContent
             className="container"  
           >
-            <Typography
+            <Box sx={{ display: 'flex', justifyContent: "space-between", alignItems: "center", paddingTop: "2vh"}}>
-              variant="h4"
+              <Typography
-              color="text.primary"
+                variant="h4"
-              fontWeight="bold"
+                fontWeight="bold"
-              align="center"
+                fontFamily="Raleway"
-              padding="2vh 0px 0px 0px"
+                color="#fff"
-              fontFamily="Raleway"
+                height="10vh"
-              color="#fff"
+                width="100%"
-            >
+                sx={{display: "flex", alignItems: "center"}}
-                Test - Bitcoin
+              >
-            </Typography>
+                  {data.name}
+              </Typography>
+              <CardMedia
+                component="img"
+                sx={{ width: "10vh", height: "10vh"}}
+                image={data.image}
+                alt={`${data.id} img`}
+                />
+            </Box>
             <Line
                 data={{
-                    labels: ['12-01', '13-01', '14-01', '15-01', '16-01', '17-01', '18-01', '19-01'],
+                    labels: dates,
                     label: false,
                     datasets: [
                         {
-                            data: [21, 51, 29, 50, 80, 70, 99, 1],
+                            data: cryptoPrices[data.id].prices,
-                            pointRadius: 0,
+                            // pointRadius: 0,
                             borderColor: "#fff"
                         }
                     ]

src/components/Cryptos/Cryptos.jsx

@@ -1,8 +1,10 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Grid } from '@mui/material';
 import styled from 'styled-components';
 import Crypto from './Crypto';
 
+import moment from 'moment';
+
 const Cryptos = () => {
 
     const CryptosStyles = styled.div`
@@ -47,28 +49,174 @@ const Cryptos = () => {
 
                 /* height: 38vh !important; */
                 /* width: 54.19vh !important;  */
-                margin-top: 7vh;
+                margin-top: 10vh;
                 /* margin-bottom: 5vh; */
                 /* margin-bottom: 10vh; */
                 cursor: initial;
             }
         }
     `
+    const [cryptosPrices, setCryptosPrices] = useState(false)
+    const [cryptosList, setCryptosList] = useState(false)
 
-//   const data = [{coin: "BTC", price: 400, day: "12-02"}, {coin: "BTC", price: 110, day: "13-02"}, {coin: "BTC", price: 450, day: "14-02"}]
+    const [dates, setDates] = useState([])
 
-  return (
+    const getCryptocurrencyData = async () => {
-      <CryptosStyles>
+
-            <Grid container columnSpacing={4} rowSpacing={6} className='grid'>
+        try {
-                    <Crypto CryptoStyles={CryptoStyles} />
+            
-                    <Crypto CryptoStyles={CryptoStyles} />
+            let data = await fetch("https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&per_page=30&order=gecko_desc")
-                    <Crypto CryptoStyles={CryptoStyles} />
+            data = await data.json()
-                    <Crypto CryptoStyles={CryptoStyles} />
+
-                    <Crypto CryptoStyles={CryptoStyles} />
+            console.log(data)
-                    <Crypto CryptoStyles={CryptoStyles} />
+            return data
-            </Grid>
+            
-      </CryptosStyles>
+        } catch (error) {
-    );
+            
+            console.log(error);
+        }
+    }
+
+    const getCryptoPrices = async (data) => {
+
+        try {
+          
+            console.log(data.id)
+            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()
+    
+            console.log(requestData)
+
+            return requestData.prices
+    
+        } catch (error) {
+            console.log(error)
+        }
+    }
+
+    const generateArrayOfDates = () => {
+
+        //Generate array of dates
+
+        let datesArray = []
+
+        for (let i = 0; i < 7; i++) {
+            
+            datesArray.push(moment().subtract(i, 'days').format('DD-MM')) 
+        }
+
+        datesArray.reverse()
+        return datesArray
+    }
+
+    const effectHandler = async () => {
+
+        const data = await getCryptocurrencyData()
+        setCryptosList(data)
+
+        const lastDayPrices = localStorage.getItem('lastDayPrices')
+        const actualDay = moment().format('DD-MM-YYYY')
+
+        console.log(actualDay)
+        setDates(generateArrayOfDates())
+
+        // In the case the las day prices are today, just restore them from Local Storage
+        if (lastDayPrices === actualDay) {
+
+            const prices = JSON.parse(localStorage.getItem('prices'))
+
+            console.log('Prices accessed from LocalStorage')
+            console.log(lastDayPrices)
+
+            setCryptosPrices(prices)
+            
+            return
+        }
+
+        // If not, extract all them from the API
+        console.log('Prices accessed from API')
+
+        let cryptoPricesCopy = []
+
+        async function asyncForEach(array, callback) {
+            for (let i = 0; i < array.length; i++) {
+              await callback(array[i], i, array);
+            }
+        } // Credits https://codeburst.io/javascript-async-await-with-foreach-b6ba62bbf404
+          
+        await asyncForEach(data, async (object) => {
+
+            let requestData = await getCryptoPrices(object)
+            console.log(requestData)
+
+            requestData = requestData.map(arr => {
+
+                return [arr[1], arr[1]]
+                
+            })
+
+            console.log(requestData)
+
+            let objectResult = {}
+                objectResult[object.id] = {}
+                objectResult[object.id].prices = requestData
+            cryptoPricesCopy.push(objectResult)
+        })
+
+        await setCryptosPrices(await cryptoPricesCopy)
+        console.log(await cryptosPrices)
+    }
+    
+    React.useEffect(() => {
+        
+
+        effectHandler()
+        
+    }, [])
+
+    React.useEffect(() => {
+
+        console.log(cryptosPrices)
+
+        //Once prices are loaded into the state...
+        if (cryptosPrices) {
+            
+            //Almacenate prices on LocalStorage
+            const jsonString = JSON.stringify(cryptosPrices)
+            localStorage.setItem('prices', jsonString)
+            console.log(JSON.parse(localStorage.getItem('prices')))
+
+            //Almacenate actual day on LocalStorage
+            const actualDay = moment().format('DD-MM-YYYY')
+            localStorage.setItem('lastDayPrices', actualDay)
+        }
+    
+    }, [cryptosPrices])
+
+    return (
+        <>
+        {
+            cryptosPrices ? 
+                <CryptosStyles>
+                        <Grid container columnSpacing={4} rowSpacing={6} className='grid'>
+                            {
+                                cryptosList.map((crypto, index) => (
+                                    <Crypto CryptoStyles={CryptoStyles} data={crypto} cryptoPrices={cryptosPrices[index]} key={crypto.id} dates={dates}></Crypto>
+                                ))
+                            }
+                                {/* <Crypto CryptoStyles={CryptoStyles} />
+                                <Crypto CryptoStyles={CryptoStyles} />
+                                <Crypto CryptoStyles={CryptoStyles} />
+                                <Crypto CryptoStyles={CryptoStyles} />
+                                <Crypto CryptoStyles={CryptoStyles} />
+                                <Crypto CryptoStyles={CryptoStyles} /> */}
+                        </Grid>
+                </CryptosStyles>
+            : null
+        }
+
+        </>
+        );
 };
 
 export default Cryptos;