Use react hooks in LoadingContainer

packages/concordia-app/src/components/LoadingContainer.jsx

@@ -1,28 +1,26 @@
-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) {
+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..."
@@ -34,7 +32,7 @@ class LoadingContainer extends Component {
     );
   }
 
-    if (status === 'failed' || networkFailed) {
+  if (web3Status === 'failed' || web3NetworkFailed) {
     return (
         <LoadingComponent
           title="No connection to the Ethereum network!"
@@ -48,7 +46,7 @@ class LoadingContainer extends Component {
     );
   }
 
-    if (status === 'initialized' && accountsFailed) {
+  if (web3Status === 'initialized' && web3AccountsFailed) {
     return (
         <LoadingComponent
           title="We can't find any Ethereum accounts!"
@@ -149,19 +147,6 @@ class LoadingContainer extends Component {
   }
 
   return Children.only(children);
-  }
-}
-
-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,
-});
+};
 
-export default connect(mapStateToProps)(LoadingContainer);
+export default LoadingContainer;