ECEntrics
/
concordia
mirror of https://gitlab.com/ecentrics/concordia
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Use react hooks in LoadingContainer

develop
Apostolos Fanakis 4 years ago
parent
8f5a2e3c0a
commit
9efbc396fb
1 changed files with 133 additions and 148 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 281
      packages/concordia-app/src/components/LoadingContainer.jsx

281
packages/concordia-app/src/components/LoadingContainer.jsx
View File

@ -1,167 +1,152 @@
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..."
message="Please make sure to unlock MetaMask and grant the app the right to connect to your account." message="Please make sure to unlock MetaMask and grant the app the right to connect to your account."
imageType="ethereum" imageType="ethereum"
progress={20} progress={20}
progressType="indicating" progressType="indicating"
/> />
); );
} }
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!"
message="Please make sure that:" message="Please make sure that:"
message_list={['MetaMask is unlocked and pointed to the correct, available network', message_list={['MetaMask is unlocked and pointed to the correct, available network',
'The app has been granted the right to connect to your account']} 'The app has been granted the right to connect to your account']}
imageType="ethereum" imageType="ethereum"
progress={20} progress={20}
progressType="error" progressType="error"
/> />
); );
} }
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!"
message="Please make sure that MetaMask is unlocked." message="Please make sure that MetaMask is unlocked."
imageType="ethereum" imageType="ethereum"
progress={20} progress={20}
progressType="error" progressType="error"
/> />
); );
} }
if (initializing if (initializing
|| (!failed && !contractInitialized && contractDeployed)) { || (!failed && !contractInitialized && contractDeployed)) {
return ( return (
<LoadingComponent <LoadingComponent
title="Initializing contracts..." title="Initializing contracts..."
message="" message=""
imageType="ethereum" imageType="ethereum"
progress={40} progress={40}
progressType="indicating" 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_INITIALIZING) { if (!contractDeployed) {
return ( return (
<LoadingComponent <LoadingComponent
title="Initializing IPFS..." title="No contracts found on the current network!"
message="" message="Please make sure that you are connected to the correct network and the contracts are deployed."
imageType="ipfs" imageType="ethereum"
progress={60} progress={40}
progressType="indicating" progressType="error"
/> />
); );
} }
if (ipfsStatus === breezeConstants.STATUS_FAILED) { if (ipfsStatus === breezeConstants.STATUS_INITIALIZING) {
return ( return (
<LoadingComponent <LoadingComponent
title="IPFS initialization failed!" title="Initializing IPFS..."
message="" message=""
imageType="ipfs" imageType="ipfs"
progress={60} progress={60}
progressType="error" progressType="indicating"
/> />
); );
} }
if (orbitStatus === breezeConstants.STATUS_INITIALIZING) { if (ipfsStatus === breezeConstants.STATUS_FAILED) {
const message = process.env.NODE_ENV === 'development' return (
? 'If needed, please sign the transaction in MetaMask to create the databases.' <LoadingComponent
: 'Please sign the transaction in MetaMask to create the databases.'; title="IPFS initialization failed!"
return ( message=""
<LoadingComponent imageType="ipfs"
title="Preparing OrbitDB..." progress={60}
message={message} progressType="error"
imageType="orbit" />
progress={80} );
progressType="indicating" }
/>
);
}
if (orbitStatus === breezeConstants.STATUS_FAILED) { if (orbitStatus === breezeConstants.STATUS_INITIALIZING) {
return ( const message = process.env.NODE_ENV === 'development'
<LoadingComponent ? 'If needed, please sign the transaction in MetaMask to create the databases.'
title="OrbitDB initialization failed!" : 'Please sign the transaction in MetaMask to create the databases.';
message="" return (
imageType="orbit" <LoadingComponent
progress={80} title="Preparing OrbitDB..."
progressType="error" message={message}
/> imageType="orbit"
); progress={80}
} progressType="indicating"
/>
);
}
if (!userFetched) { if (orbitStatus === breezeConstants.STATUS_FAILED) {
return ( return (
<LoadingComponent <LoadingComponent
title="Loading dapp..." title="OrbitDB initialization failed!"
message="" message=""
imageType="app" imageType="orbit"
progress={90} progress={80}
progressType="indicating" progressType="error"
/> />
); );
} }
return Children.only(children); if (!userFetched) {
return (
<LoadingComponent
title="Loading dapp..."
message=""
imageType="app"
progress={90}
progressType="indicating"
/>
);
} }
}
const mapStateToProps = (state) => ({ return Children.only(children);
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;

Write Preview
Loading…
Cancel
Save