Background functionality changed

src/App.jsx

@@ -1,53 +1,13 @@
+import React, { useState } from 'react'
+
 import Header from "./components/Header/Header";
+
 import styled from 'styled-components'
 import Cryptos from "./components/Cryptos/Cryptos";
+import Background from './components/Background/Background';
 
 function App() {
-
+ 
-  const pathsPosition = {
-
-    one: {
-      top: "20%",
-      left: "calc(85vw - 200px)"
-    },
-    
-    two: {
-      top: "30%",
-      left: "12vw"
-    },
-
-    three: {
-      top: "60%",
-      left: "calc(82vw - 200px)"
-    },
-
-    four: {
-      top: "80%",
-      left: "13vw"
-    },
-
-    five: {
-      top: "81%",
-      left: "30vw"
-    },
-
-    six: {
-      top: "90%",
-      left: "8vw"
-    }, 
-
-    seven: {
-      top: "92%",
-      left: "25vw"
-    },
-
-    eight: {
-      top: "95%",
-      left: "20vw"
-    }
-  }
-
-
   const Div = styled.div`
     
     /* height: 100%; */
@@ -79,173 +39,24 @@ function App() {
         background: linear-gradient(135deg, #ffffff4e 0%, #2e426965 100%);
 
         position: absolute;
-
-        &.one {
-
-          top: ${pathsPosition.one.top};
-          left: ${pathsPosition.one.left};
-
-          clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
-
-          width: 180px;
-          height: 180px;
-
-          transform: rotate(14deg);
-
-          &.second {
-
-            top: calc(${pathsPosition.one.top}  + 100%)
-          }
-        }
-
-        &.two {
-          clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
-
-          clip-path: circle(50% at 50% 50%);
-          
-          top: ${pathsPosition.two.top};
-          left: ${pathsPosition.two.left};
-
-          width: 170px;
-          height: 170px; 
-
-          &.second {
-
-            top: calc(${pathsPosition.two.top} + 100%)
-          }
-        }
-
-        &.three {
-
-          clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
-          clip-path: circle(50% at 50% 50%);
-        
-          top: ${pathsPosition.three.top};
-          left: ${pathsPosition.three.left};
-          transform: rotate(30deg);
-
-          width: 180px;
-          height: 180px;
-
-          &.second {
-
-            top: calc(${pathsPosition.three.top} + 100%)
-          }
-        }
-
-        &.four {
-
-          clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
-          
-          top: ${pathsPosition.four.top};
-          left: ${pathsPosition.four.left};
-          
-          transform: rotate(-30deg);
-
-          width: 100px;
-          height: 100px;
-
-          &.second {
-
-            top: calc(${pathsPosition.four.top} + 100%)
-          }
-        }
-
-        &.five {
-
-          clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
-
-          top: ${pathsPosition.five.top};
-          left: ${pathsPosition.five.left};
-
-          transform: rotate(-12deg);
-
-          width: 80px;
-          height: 80px;
-
-          &.second {
-
-            top: calc(${pathsPosition.five.top} + 100%)
-          }
-        }
-
-        &.six {
-
-          clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
-
-          top: ${pathsPosition.six.top};
-          left: ${pathsPosition.six.left};
-
-          transform: rotate(30deg);
-
-          width: 70px;
-          height: 70px;
-
-          &.second {
-
-            top: calc(${pathsPosition.six.top} + 100%)
-          }
-        }
-
-        &.seven {
-
-          clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
-
-          top: ${pathsPosition.seven.top};
-          left: ${pathsPosition.seven.left};
-
-          transform: rotate(-30deg);
-
-          width: 100px;
-          height: 100px;
-
-          &.second {
-
-            top: calc(${pathsPosition.seven.top} + 100%)
-          }
-        }
-
-        &.eight {
-
-          clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
-        
-          top: ${pathsPosition.eight.top};
-          left: ${pathsPosition.eight.left};
-          transform: rotate(40deg)
-        }
-
-        &.second {
-
-          top: calc(${pathsPosition.eight.top} + 100%)
-        }
       }
-    }
+  }`
+
+  const [loading, setLoading] = useState(true)
 
-  `
   return (
     <Div>
       <Header />
+      {
+        !loading ? 
+        
+        <Background loading={loading}/>
+      : null
+      }
 
-      <div className="paths">
+      <Cryptos
-        <div className="path one"></div>
+        setLoading={setLoading}
-        <div className="path two"></div>
+      />
-        <div className="path three"></div>
-        <div className="path four"></div>
-        <div className="path five"></div>
-        <div className="path six"></div>
-        <div className="path seven"></div>
-        <div className="path eight"></div>
-        <div className="path one second"></div>
-        <div className="path two second"></div>
-        <div className="path three second"></div>
-        <div className="path four second"></div>
-        <div className="path five second"></div>
-        <div className="path six second"></div>
-        <div className="path seven second"></div>
-        <div className="path eight second"></div>
-      </div>
-
-      <Cryptos />
     </Div>
   );
 }

src/components/Background/Background.jsx

@@ -0,0 +1,160 @@
+import React, { useState } from 'react';
+import { CustomPath } from './CustomPath.styled';
+
+const Background = ({loading}) => {
+
+    const [seriesOfPaths, setSeriesOfPaths] = useState([])
+    const pathsData = [
+
+        {
+          top: "20%",
+          left: "calc(85vw - 200px)",
+    
+          clipPath: "polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)",
+    
+          width: "180px",
+          height: "180px",
+    
+          transform: "rotate(14deg)"
+        },
+        
+        {
+          top: "30%",
+          left: "12vw",
+    
+          clipPath: "circle(50% at 50% 50%)",
+          width: "170px",
+          height: "170px" 
+        },
+    
+        {
+          top: "60%",
+          left: "calc(82vw - 200px)",
+    
+          clipPath: "circle(50% at 50% 50%)",
+            
+          transform: "rotate(30deg)",
+    
+          width: "180px",
+          height: "180px"
+        },
+    
+        {
+          top: "80%",
+          left: "13vw",
+    
+          clipPath: "polygon(50% 0%, 0% 100%, 100% 100%)",
+              
+          transform: "rotate(-30deg)",
+    
+          width: "100px",
+          height: "100px"
+    
+        },
+    
+        {
+          top: "81%",
+          left: "30vw",
+    
+          clipPath: "polygon(50% 0%, 0% 100%, 100% 100%)",
+    
+          transform: "rotate(-12deg)",
+    
+          width: "80px",
+          height: "80px"
+        },
+    
+        {
+          top: "90%",
+          left: "8vw",
+    
+          clipPath: "polygon(50% 0%, 0% 100%, 100% 100%)",
+    
+          transform: "rotate(30deg)",
+    
+          width: "70px",
+          height: "70px"
+        }, 
+    
+        {
+          top: "92%",
+          left: "25vw",
+    
+          clipPath: "polygon(50% 0%, 0% 100%, 100% 100%)",
+    
+          transform: "rotate(-30deg)",
+    
+          width: "100px",
+          height: "100px"
+        },
+    
+        {
+          top: "95%",
+          left: "20vw",
+    
+          clipPath: "polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)",
+            
+          transform: "rotate(40deg)"
+        }
+      ]
+    
+
+    const pathFunction = () => {
+
+        const serie = 5
+        let seriesOfPaths = []
+
+        for (let i = 0; i < serie; i++) {
+        
+        seriesOfPaths.push(i)
+        }
+        
+        setSeriesOfPaths(seriesOfPaths)
+    }
+
+    React.useEffect(() => {
+
+        if (loading) {
+
+        return
+        }
+
+        pathFunction()
+
+    }, [loading])
+    
+    
+    return <>
+        {
+            seriesOfPaths.map(serie => (
+                <div className="paths" style={{top: serie * 520 + "px"}}>
+                  {
+      
+                pathsData.map(object => (
+                  
+                  <CustomPath
+                    className="path"
+      
+                    top={object.top}
+                    left={object.left}
+      
+                    clipPath={object.clipPath}
+      
+                    width={object.width}
+                    height={object.height}
+      
+                    transform={object.transform}
+      
+                    serieNumber={serie}
+                  />
+                ))
+              }
+            </div>
+      
+              ))
+            
+        }
+    </> 
+};
+
+export default Background;

src/components/Background/CustomPath.styled.js

@@ -0,0 +1,16 @@
+import styled from 'styled-components'
+
+export const CustomPath = styled.div`
+    
+top: ${props => props.top};
+left: ${props => props.left};
+
+clip-path: ${props => props.clipPath};
+
+width: ${props => props.width};
+height: ${props => props.height};
+
+transform: ${props => props.transform};
+
+top: calc(${props => props.top} + calc(100% * ${props => props.serieNumber}));
+` 

src/components/Cryptos/Crypto.jsx

@@ -6,7 +6,7 @@ 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, data, cryptoPrices, dates}) => {
+const Crypto = ({CryptoStyles, data, cryptoPrices, dates, index, cryptoListLength, setLoading}) => {
 
   const plugin = {
     id: 'custom_canvas_background_color',
@@ -22,7 +22,7 @@ const Crypto = ({CryptoStyles, data, cryptoPrices, dates}) => {
 
   React.useEffect(() => {
 
-    console.log(cryptoPrices[data.id].prices)
+    // console.log(cryptoPrices[data.id].prices)
 
     if (!cryptoPrices[data.id]) {
 
@@ -30,6 +30,9 @@ const Crypto = ({CryptoStyles, data, cryptoPrices, dates}) => {
       console.log(data)
       console.log(cryptoPrices)
     }
+
+    if (index === cryptoListLength - 1){ setLoading(false)  }
+
   }, [])
 
   return (

src/components/Cryptos/Cryptos.jsx

@@ -5,7 +5,7 @@ import Crypto from './Crypto';
 
 import moment from 'moment';
 
-const Cryptos = () => {
+const Cryptos = ({setLoading}) => {
 
     const CryptosStyles = styled.div`
 
@@ -190,6 +190,8 @@ const Cryptos = () => {
             const actualDay = moment().format('DD-MM-YYYY')
             localStorage.setItem('lastDayPrices', actualDay)
         }
+
+
     
     }, [cryptosPrices])
 
@@ -201,7 +203,18 @@ const Cryptos = () => {
                         <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}
+                                        data={crypto}
+                                        cryptoPrices={cryptosPrices[index]}
+                                        key={crypto.id}
+                                        dates={dates}
+
+                                        index={index}
+                                        cryptoListLength={cryptosList.length}
+
+                                        setLoading={setLoading}
+                                    />                                    
                                 ))
                             }
                                 {/* <Crypto CryptoStyles={CryptoStyles} />

src/styles.css

@@ -1,8 +1,3 @@
-body, html, #root {
-
-    height: 100%;
-}
-
 * {
 
     margin: 0;