From 9efbc396fbbb46c33e5655784af0eabed788ac53 Mon Sep 17 00:00:00 2001
From: Apostolof <apotwohd@gmail.com>
Date: Sat, 14 Nov 2020 18:00:13 +0200
Subject: [PATCH] Use react hooks in LoadingContainer

---
 .../src/components/LoadingContainer.jsx       | 281 +++++++++---------
 1 file changed, 133 insertions(+), 148 deletions(-)

diff --git a/packages/concordia-app/src/components/LoadingContainer.jsx b/packages/concordia-app/src/components/LoadingContainer.jsx
index 0260132..f8cda5f 100644
--- a/packages/concordia-app/src/components/LoadingContainer.jsx
+++ b/packages/concordia-app/src/components/LoadingContainer.jsx
@@ -1,167 +1,152 @@
-import React, { Children, Component } from 'react';
-import { connect } from 'react-redux';
-
+import React, { Children } from 'react';
 import { breezeConstants } from '@ezerous/breeze';
-
+import { useSelector } from 'react-redux';
 import LoadingComponent from './LoadingComponent';
 
 // CSS
 import '../assets/css/loading-component.css';
 
-class LoadingContainer extends Component {
-  render() {
-    const {
-      web3: {
-        status, networkId, networkFailed, accountsFailed,
-      },
-      drizzleStatus: {
-        initializing,
-        failed,
-      },
-      contractInitialized, contractDeployed, ipfsStatus, orbitStatus, userFetched, children,
-    } = this.props;
-
-    if ((status === 'initializing' || !networkId)
-            && !networkFailed) {
-      return (
-          <LoadingComponent
-            title="Connecting to the Ethereum network..."
-            message="Please make sure to unlock MetaMask and grant the app the right to connect to your account."
-            imageType="ethereum"
-            progress={20}
-            progressType="indicating"
-          />
-      );
-    }
+const LoadingContainer = ({ children }) => {
+  const initializing = useSelector((state) => state.drizzleStatus.initializing);
+  const failed = useSelector((state) => state.drizzleStatus.failed);
+  const ipfsStatus = useSelector((state) => state.ipfs.status);
+  const orbitStatus = useSelector((state) => state.orbit.status);
+  const web3Status = useSelector((state) => state.web3.status);
+  const web3NetworkId = useSelector((state) => state.web3.networkId);
+  const web3NetworkFailed = useSelector((state) => state.web3.networkFailed);
+  const web3AccountsFailed = useSelector((state) => state.web3.accountsFailed);
+  const contractInitialized = useSelector((state) => state.contracts.Forum.initialized);
+  const contractDeployed = useSelector((state) => state.contracts.Forum.deployed);
+  const userFetched = useSelector((state) => state.user.address);
+
+  if ((web3Status === 'initializing' || !web3NetworkId)
+            && !web3NetworkFailed) {
+    return (
+        <LoadingComponent
+          title="Connecting to the Ethereum network..."
+          message="Please make sure to unlock MetaMask and grant the app the right to connect to your account."
+          imageType="ethereum"
+          progress={20}
+          progressType="indicating"
+        />
+    );
+  }
 
-    if (status === 'failed' || networkFailed) {
-      return (
-          <LoadingComponent
-            title="No connection to the Ethereum network!"
-            message="Please make sure that:"
-            message_list={['MetaMask is unlocked and pointed to the correct, available network',
-              'The app has been granted the right to connect to your account']}
-            imageType="ethereum"
-            progress={20}
-            progressType="error"
-          />
-      );
-    }
+  if (web3Status === 'failed' || web3NetworkFailed) {
+    return (
+        <LoadingComponent
+          title="No connection to the Ethereum network!"
+          message="Please make sure that:"
+          message_list={['MetaMask is unlocked and pointed to the correct, available network',
+            'The app has been granted the right to connect to your account']}
+          imageType="ethereum"
+          progress={20}
+          progressType="error"
+        />
+    );
+  }
 
-    if (status === 'initialized' && accountsFailed) {
-      return (
-          <LoadingComponent
-            title="We can't find any Ethereum accounts!"
-            message="Please make sure that MetaMask is unlocked."
-            imageType="ethereum"
-            progress={20}
-            progressType="error"
-          />
-      );
-    }
+  if (web3Status === 'initialized' && web3AccountsFailed) {
+    return (
+        <LoadingComponent
+          title="We can't find any Ethereum accounts!"
+          message="Please make sure that MetaMask is unlocked."
+          imageType="ethereum"
+          progress={20}
+          progressType="error"
+        />
+    );
+  }
 
-    if (initializing
+  if (initializing
             || (!failed && !contractInitialized && contractDeployed)) {
-      return (
-          <LoadingComponent
-            title="Initializing contracts..."
-            message=""
-            imageType="ethereum"
-            progress={40}
-            progressType="indicating"
-          />
-      );
-    }
-
-    if (!contractDeployed) {
-      return (
-          <LoadingComponent
-            title="No contracts found on the current network!"
-            message="Please make sure that you are connected to the correct network and the contracts are deployed."
-            imageType="ethereum"
-            progress={40}
-            progressType="error"
-          />
-      );
-    }
+    return (
+        <LoadingComponent
+          title="Initializing contracts..."
+          message=""
+          imageType="ethereum"
+          progress={40}
+          progressType="indicating"
+        />
+    );
+  }
 
-    if (ipfsStatus === breezeConstants.STATUS_INITIALIZING) {
-      return (
-          <LoadingComponent
-            title="Initializing IPFS..."
-            message=""
-            imageType="ipfs"
-            progress={60}
-            progressType="indicating"
-          />
-      );
-    }
+  if (!contractDeployed) {
+    return (
+        <LoadingComponent
+          title="No contracts found on the current network!"
+          message="Please make sure that you are connected to the correct network and the contracts are deployed."
+          imageType="ethereum"
+          progress={40}
+          progressType="error"
+        />
+    );
+  }
 
-    if (ipfsStatus === breezeConstants.STATUS_FAILED) {
-      return (
-          <LoadingComponent
-            title="IPFS initialization failed!"
-            message=""
-            imageType="ipfs"
-            progress={60}
-            progressType="error"
-          />
-      );
-    }
+  if (ipfsStatus === breezeConstants.STATUS_INITIALIZING) {
+    return (
+        <LoadingComponent
+          title="Initializing IPFS..."
+          message=""
+          imageType="ipfs"
+          progress={60}
+          progressType="indicating"
+        />
+    );
+  }
 
-    if (orbitStatus === breezeConstants.STATUS_INITIALIZING) {
-      const message = process.env.NODE_ENV === 'development'
-        ? 'If needed, please sign the transaction in MetaMask to create the databases.'
-        : 'Please sign the transaction in MetaMask to create the databases.';
-      return (
-          <LoadingComponent
-            title="Preparing OrbitDB..."
-            message={message}
-            imageType="orbit"
-            progress={80}
-            progressType="indicating"
-          />
-      );
-    }
+  if (ipfsStatus === breezeConstants.STATUS_FAILED) {
+    return (
+        <LoadingComponent
+          title="IPFS initialization failed!"
+          message=""
+          imageType="ipfs"
+          progress={60}
+          progressType="error"
+        />
+    );
+  }
 
-    if (orbitStatus === breezeConstants.STATUS_FAILED) {
-      return (
-          <LoadingComponent
-            title="OrbitDB initialization failed!"
-            message=""
-            imageType="orbit"
-            progress={80}
-            progressType="error"
-          />
-      );
-    }
+  if (orbitStatus === breezeConstants.STATUS_INITIALIZING) {
+    const message = process.env.NODE_ENV === 'development'
+      ? 'If needed, please sign the transaction in MetaMask to create the databases.'
+      : 'Please sign the transaction in MetaMask to create the databases.';
+    return (
+        <LoadingComponent
+          title="Preparing OrbitDB..."
+          message={message}
+          imageType="orbit"
+          progress={80}
+          progressType="indicating"
+        />
+    );
+  }
 
-    if (!userFetched) {
-      return (
-          <LoadingComponent
-            title="Loading dapp..."
-            message=""
-            imageType="app"
-            progress={90}
-            progressType="indicating"
-          />
-      );
-    }
+  if (orbitStatus === breezeConstants.STATUS_FAILED) {
+    return (
+        <LoadingComponent
+          title="OrbitDB initialization failed!"
+          message=""
+          imageType="orbit"
+          progress={80}
+          progressType="error"
+        />
+    );
+  }
 
-    return Children.only(children);
+  if (!userFetched) {
+    return (
+        <LoadingComponent
+          title="Loading dapp..."
+          message=""
+          imageType="app"
+          progress={90}
+          progressType="indicating"
+        />
+    );
   }
-}
 
-const mapStateToProps = (state) => ({
-  drizzleStatus: state.drizzleStatus,
-  breezeStatus: state.breezeStatus,
-  ipfsStatus: state.ipfs.status,
-  orbitStatus: state.orbit.status,
-  web3: state.web3,
-  accounts: state.accounts,
-  contractInitialized: state.contracts.Forum.initialized,
-  contractDeployed: state.contracts.Forum.deployed,
-  userFetched: state.user.address,
-});
+  return Children.only(children);
+};
 
-export default connect(mapStateToProps)(LoadingContainer);
+export default LoadingContainer;