From 72e3a0608f344ff6c80a8d6c01c05b4cbf9c7738 Mon Sep 17 00:00:00 2001
From: Francisco Pessano <franpessano1@gmail.com>
Date: Thu, 3 Feb 2022 19:30:24 -0300
Subject: [PATCH] Bug fix

---
 src/App.jsx                                   | 37 ++-------------
 .../CryptoGallery/CryptoGallery.jsx           |  4 +-
 .../CryptoGallery/CryptoGalleryContainer.jsx  | 46 +++++++++++++++++++
 3 files changed, 53 insertions(+), 34 deletions(-)
 create mode 100644 src/components/CryptoGallery/CryptoGalleryContainer.jsx

diff --git a/src/App.jsx b/src/App.jsx
index a5b6220..0e4a0bf 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -10,9 +10,8 @@ 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';
+
+import CryptoGalleryContainer from './components/CryptoGallery/CryptoGalleryContainer'
 
 function App() {
  
@@ -21,25 +20,8 @@ function App() {
     background-image: radial-gradient( circle farthest-corner at 12.3% 19.3%,  rgba(85,88,218,1) 0%, rgba(95,209,249,1) 100.2% );  
   `
 
-  const [loading, setLoading] = useState(true)
-  const [loadingURL, setLoadingURL] = useState('https://i.ibb.co/Dwygw0t/Logo-reduced.png')
-
-  React.useEffect(() => {
-
-    if (loading) {
-
-      document.body.style.overflow = "hidden"
-    
-    } else {
-
-      setTimeout(() => {
-        
-        document.body.style.overflow = "visible"
-      
-      }, 2000);
-      
-    } //https://stackoverflow.com/questions/39962757/prevent-scrolling-using-css-on-react-rendered-components
-  }, [loading])
+  const setLoadingURL = () => {}
+  const loadingURL = () => {}
 
   return (
     <GlobalStyles>
@@ -50,16 +32,7 @@ function App() {
           <Crypto />
         </Route>
         <Route path="/">
-          <CryptoGalleryLoading loading={loading} loadingURL={loadingURL} setLoading={setLoading}/>
-          <Header />
-            <Background
-                loading={loading}
-            />
-            <Cryptos
-                loading={loading}
-                setLoading={setLoading}
-                setLoadingURL={setLoadingURL}
-            />
+          <CryptoGalleryContainer />
         </Route>
       </Switch>
     </Router>
diff --git a/src/components/CryptoGallery/CryptoGallery.jsx b/src/components/CryptoGallery/CryptoGallery.jsx
index b0af7a6..183a88e 100644
--- a/src/components/CryptoGallery/CryptoGallery.jsx
+++ b/src/components/CryptoGallery/CryptoGallery.jsx
@@ -5,7 +5,7 @@ import CryptoGalleryItem from './CryptoGalleryItem';
 
 import moment from 'moment';
 
-const Cryptos = ({setLoading, setLoadingURL, loading}) => {
+const CryptoGallery = ({setLoading, setLoadingURL, loading}) => {
 
     const CryptosStyles = styled.div`
 
@@ -243,4 +243,4 @@ const Cryptos = ({setLoading, setLoadingURL, loading}) => {
         );
 };
 
-export default Cryptos;
+export default CryptoGallery;
diff --git a/src/components/CryptoGallery/CryptoGalleryContainer.jsx b/src/components/CryptoGallery/CryptoGalleryContainer.jsx
new file mode 100644
index 0000000..2a88345
--- /dev/null
+++ b/src/components/CryptoGallery/CryptoGalleryContainer.jsx
@@ -0,0 +1,46 @@
+import React, {useState} from 'react';
+import Background from '../Background/Background';
+import CryptoGalleryLoading from '../CryptoGalleryLoading/CryptoGalleryLoading';
+import Header from '../Header/Header';
+import CryptoGallery from './CryptoGallery';
+
+const CryptoGalleryContainer = () => {
+
+
+    const [loading, setLoading] = useState(true)
+    const [loadingURL, setLoadingURL] = useState('https://i.ibb.co/Dwygw0t/Logo-reduced.png')
+
+    React.useEffect(() => {
+
+        if (loading) {
+    
+          document.body.style.overflow = "hidden"
+        
+        } else {
+    
+          setTimeout(() => {
+            
+            document.body.style.overflow = "visible"
+          
+          }, 2000);
+          
+        } //https://stackoverflow.com/questions/39962757/prevent-scrolling-using-css-on-react-rendered-components
+      }, [loading])
+    
+    return (
+        <>
+            <CryptoGalleryLoading loading={loading} loadingURL={loadingURL} setLoading={setLoading}/>
+            <Header />
+            <Background
+                loading={loading}
+            />
+            <CryptoGallery
+                loading={loading}
+                setLoading={setLoading}
+                setLoadingURL={setLoadingURL}
+            />
+        </>
+    )
+};
+
+export default CryptoGalleryContainer;