From d5beb455ffec7973a715b752611762fa778aab33 Mon Sep 17 00:00:00 2001
From: Francisco Pessano <franpessano1@gmail.com>
Date: Wed, 2 Feb 2022 15:01:14 -0300
Subject: [PATCH] Refactorized Crypto Gallery

---
 src/App.jsx                                   | 17 +++++-
 src/components/Background/Background.jsx      | 52 ++++++++++---------
 .../CryptoGallery/CryptoGallery.jsx           |  5 +-
 .../CryptoGallery/CryptoGalleryItem.jsx       |  7 +--
 .../CryptoGalleryLoading.jsx                  | 15 +-----
 5 files changed, 51 insertions(+), 45 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 2d997e0..a5b6220 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 
 import styled from 'styled-components'
-import Loading from './components/CryptoGalleryLoading/CryptoGalleryLoading';
+import CryptoGalleryLoading from './components/CryptoGalleryLoading/CryptoGalleryLoading';
 
 import {
   BrowserRouter as Router,
@@ -10,6 +10,9 @@ import {
   Link
 } from "react-router-dom";
 import Crypto from './components/Crypto/Crypto';
+import Header from './components/Header/Header';
+import Background from './components/Background/Background';
+import Cryptos from './components/CryptoGallery/CryptoGallery';
 
 function App() {
  
@@ -19,6 +22,7 @@ function App() {
   `
 
   const [loading, setLoading] = useState(true)
+  const [loadingURL, setLoadingURL] = useState('https://i.ibb.co/Dwygw0t/Logo-reduced.png')
 
   React.useEffect(() => {
 
@@ -46,7 +50,16 @@ function App() {
           <Crypto />
         </Route>
         <Route path="/">
-          <Loading loading={loading} setLoading={setLoading}/>
+          <CryptoGalleryLoading loading={loading} loadingURL={loadingURL} setLoading={setLoading}/>
+          <Header />
+            <Background
+                loading={loading}
+            />
+            <Cryptos
+                loading={loading}
+                setLoading={setLoading}
+                setLoadingURL={setLoadingURL}
+            />
         </Route>
       </Switch>
     </Router>
diff --git a/src/components/Background/Background.jsx b/src/components/Background/Background.jsx
index c2bef38..e4c9b31 100644
--- a/src/components/Background/Background.jsx
+++ b/src/components/Background/Background.jsx
@@ -151,34 +151,36 @@ const Background = ({loading}) => {
         {
            
             seriesOfPaths.map(serie => (
-                <div className="paths" style={{top: serie * 520 + "px"}}>
+                <div
+                  className="paths"
+                  style={{top: serie * 520 + "px"}}
+                  key={serie}
+                >
                   {
       
-                pathsData.map((object, index) => (
-                  
-                  <CustomPath
-                    className="path"
-      
-                    top={object.top}
-                    left={object.left}
-      
-                    clipPath={object.clipPath}
-      
-                    width={object.width}
-                    height={object.height}
-      
-                    transform={object.transform}
-      
-                    serieNumber={serie}
+                  pathsData.map((object, index) => (
+                    
+                    <CustomPath
+                      className="path"
+        
+                      top={object.top}
+                      left={object.left}
+        
+                      clipPath={object.clipPath}
+        
+                      width={object.width}
+                      height={object.height}
+        
+                      transform={object.transform}
+        
+                      serieNumber={serie}
 
-                    key={index}
-                  />
-                ))
-              }
-            </div>
-      
-              ))
-            
+                      key={index}
+                    />
+                  ))
+                }
+            </div>    
+          ))
         }
     </BackgroundStyles> 
 };
diff --git a/src/components/CryptoGallery/CryptoGallery.jsx b/src/components/CryptoGallery/CryptoGallery.jsx
index eccc349..b0af7a6 100644
--- a/src/components/CryptoGallery/CryptoGallery.jsx
+++ b/src/components/CryptoGallery/CryptoGallery.jsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { Grid } from '@mui/material';
 import styled from 'styled-components';
-import Crypto from './CryptoGalleryItem';
+import CryptoGalleryItem from './CryptoGalleryItem';
 
 import moment from 'moment';
 
@@ -213,7 +213,7 @@ const Cryptos = ({setLoading, setLoadingURL, loading}) => {
                         <Grid container columnSpacing={4} rowSpacing={6} className='grid'>
                             {
                                 cryptosList.map((crypto, index) => (
-                                    <Crypto
+                                    <CryptoGalleryItem
                                         CryptoStyles={CryptoStyles}
                                         data={crypto}
                                         cryptoPrices={cryptosPrices[index]}
@@ -223,6 +223,7 @@ const Cryptos = ({setLoading, setLoadingURL, loading}) => {
                                         index={index}
                                         cryptoListLength={cryptosList.length}
 
+                                        loading={loading}
                                         setLoading={setLoading}
                                     />                                    
                                 ))
diff --git a/src/components/CryptoGallery/CryptoGalleryItem.jsx b/src/components/CryptoGallery/CryptoGalleryItem.jsx
index 32c6b01..13db807 100644
--- a/src/components/CryptoGallery/CryptoGalleryItem.jsx
+++ b/src/components/CryptoGallery/CryptoGalleryItem.jsx
@@ -9,7 +9,7 @@ import { borderRadius } from '@mui/system';
 
 import { withRouter, useHistory } from 'react-router-dom';
 
-const Crypto = ({CryptoStyles, data, cryptoPrices, dates, index, cryptoListLength, setLoading}) => {
+const CryptoGalleryItem = ({CryptoStyles, data, cryptoPrices, dates, index, cryptoListLength, setLoading, loading}) => {
 
   const history = useHistory()
 
@@ -49,7 +49,8 @@ const Crypto = ({CryptoStyles, data, cryptoPrices, dates, index, cryptoListLengt
         lg={4}
         md={6}
         sm={12}
-        onClick={() => history.push(`/crypto/${data.id}`)}
+        onClick={() => {if (!loading) history.push(`/crypto/${data.id}`)}}
+        style={{cursor: loading ? 'initial' : 'clicker'}}
       >
         <Card className="card">
           <CardContent
@@ -147,4 +148,4 @@ const Crypto = ({CryptoStyles, data, cryptoPrices, dates, index, cryptoListLengt
   )
 };
 
-export default withRouter(Crypto);
+export default withRouter(CryptoGalleryItem);
diff --git a/src/components/CryptoGalleryLoading/CryptoGalleryLoading.jsx b/src/components/CryptoGalleryLoading/CryptoGalleryLoading.jsx
index 541abd2..e253548 100644
--- a/src/components/CryptoGalleryLoading/CryptoGalleryLoading.jsx
+++ b/src/components/CryptoGalleryLoading/CryptoGalleryLoading.jsx
@@ -4,9 +4,7 @@ import Background from '../Background/Background';
 import Cryptos from '../CryptoGallery/CryptoGallery';
 import Header from '../Header/Header';
 
-const Loading = ({loading, setLoading}) => {
-
-    const [loadingURL, setLoadingURL] = useState('https://i.ibb.co/Dwygw0t/Logo-reduced.png')
+const CryptoGalleryLoading = ({loading, loadingURL}) => {
 
     const LoadingStyles = styled.div`
 
@@ -74,17 +72,8 @@ const Loading = ({loading, setLoading}) => {
                 <img src={loadingURL} alt="loading" />
                 <h2>Loading</h2>
             </LoadingStyles>
-            <Header />
-            <Background
-                loading={loading}
-            />
-            <Cryptos
-                loading={loading}
-                setLoading={setLoading}
-                setLoadingURL={setLoadingURL}
-            />
         </>
     )
 };
 
-export default Loading;
+export default CryptoGalleryLoading;