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 ( - - ); - } +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 ( + + ); + } - if (status === 'failed' || networkFailed) { - return ( - - ); - } + if (web3Status === 'failed' || web3NetworkFailed) { + return ( + + ); + } - if (status === 'initialized' && accountsFailed) { - return ( - - ); - } + if (web3Status === 'initialized' && web3AccountsFailed) { + return ( + + ); + } - if (initializing + if (initializing || (!failed && !contractInitialized && contractDeployed)) { - return ( - - ); - } - - if (!contractDeployed) { - return ( - - ); - } + return ( + + ); + } - if (ipfsStatus === breezeConstants.STATUS_INITIALIZING) { - return ( - - ); - } + if (!contractDeployed) { + return ( + + ); + } - if (ipfsStatus === breezeConstants.STATUS_FAILED) { - return ( - - ); - } + if (ipfsStatus === breezeConstants.STATUS_INITIALIZING) { + return ( + + ); + } - 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 ( - - ); - } + if (ipfsStatus === breezeConstants.STATUS_FAILED) { + return ( + + ); + } - if (orbitStatus === breezeConstants.STATUS_FAILED) { - return ( - - ); - } + 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 ( + + ); + } - if (!userFetched) { - return ( - - ); - } + if (orbitStatus === breezeConstants.STATUS_FAILED) { + return ( + + ); + } - return Children.only(children); + if (!userFetched) { + return ( + + ); } -} -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;