Browse Source

Use react hooks in LoadingContainer

develop
Apostolos Fanakis 4 years ago
parent
commit
9efbc396fb
  1. 57
      packages/concordia-app/src/components/LoadingContainer.jsx

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

@ -1,28 +1,26 @@
import React, { Children, Component } from 'react'; import React, { Children } from 'react';
import { connect } from 'react-redux';
import { breezeConstants } from '@ezerous/breeze'; import { breezeConstants } from '@ezerous/breeze';
import { useSelector } from 'react-redux';
import LoadingComponent from './LoadingComponent'; import LoadingComponent from './LoadingComponent';
// CSS // CSS
import '../assets/css/loading-component.css'; import '../assets/css/loading-component.css';
class LoadingContainer extends Component { const LoadingContainer = ({ children }) => {
render() { const initializing = useSelector((state) => state.drizzleStatus.initializing);
const { const failed = useSelector((state) => state.drizzleStatus.failed);
web3: { const ipfsStatus = useSelector((state) => state.ipfs.status);
status, networkId, networkFailed, accountsFailed, const orbitStatus = useSelector((state) => state.orbit.status);
}, const web3Status = useSelector((state) => state.web3.status);
drizzleStatus: { const web3NetworkId = useSelector((state) => state.web3.networkId);
initializing, const web3NetworkFailed = useSelector((state) => state.web3.networkFailed);
failed, const web3AccountsFailed = useSelector((state) => state.web3.accountsFailed);
}, const contractInitialized = useSelector((state) => state.contracts.Forum.initialized);
contractInitialized, contractDeployed, ipfsStatus, orbitStatus, userFetched, children, const contractDeployed = useSelector((state) => state.contracts.Forum.deployed);
} = this.props; const userFetched = useSelector((state) => state.user.address);
if ((status === 'initializing' || !networkId) if ((web3Status === 'initializing' || !web3NetworkId)
&& !networkFailed) { && !web3NetworkFailed) {
return ( return (
<LoadingComponent <LoadingComponent
title="Connecting to the Ethereum network..." title="Connecting to the Ethereum network..."
@ -34,7 +32,7 @@ class LoadingContainer extends Component {
); );
} }
if (status === 'failed' || networkFailed) { if (web3Status === 'failed' || web3NetworkFailed) {
return ( return (
<LoadingComponent <LoadingComponent
title="No connection to the Ethereum network!" title="No connection to the Ethereum network!"
@ -48,7 +46,7 @@ class LoadingContainer extends Component {
); );
} }
if (status === 'initialized' && accountsFailed) { if (web3Status === 'initialized' && web3AccountsFailed) {
return ( return (
<LoadingComponent <LoadingComponent
title="We can't find any Ethereum accounts!" title="We can't find any Ethereum accounts!"
@ -149,19 +147,6 @@ class LoadingContainer extends Component {
} }
return Children.only(children); 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;

Loading…
Cancel
Save