LoadingContainer improvements (2)

packages/concordia-app/src/assets/css/loading-container.css → packages/concordia-app/src/assets/css/loading-component.css

@@ -1,7 +1,11 @@
-html {
+body {
     overflow: hidden;
 }
 
+ul {
+    list-style-position: inside;
+}
+
 .loading-screen {
     text-align: center;
     font-size: large;
@@ -12,10 +16,12 @@ html {
     height: 12em;
 }
 
-ul {
-    list-style-position: inside;
+.ui.container {
+    height: 26em;
 }
 
-.bar {
-    margin-top: 5em;
+.ui.progress {
+    width: 40vw;
+    margin-left: auto !important;
+    margin-right: auto !important;
 }

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

@@ -0,0 +1,73 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+import { Container, Progress } from 'semantic-ui-react';
+
+// CSS
+import '../assets/css/loading-component.css';
+
+// Images
+import ethereum_logo from '../assets/images/ethereum_logo.svg';
+import ipfs_logo from '../assets/images/ipfs_logo.svg';
+import orbitdb_logo from '../assets/images/orbitdb_logo.png';
+import app_logo from '../assets/images/app_logo.png';
+
+class LoadingComponent extends Component {
+    render(){
+        const { image_type, message_list, progress_type } = this.props ;
+        let imageSrc, imageAlt, listItems, indicating, error;
+
+        if (image_type === "ethereum"){
+            imageSrc = ethereum_logo;
+            imageAlt = "ethereum_logo";
+        }
+        else if (image_type === "ipfs"){
+            imageSrc = ipfs_logo;
+            imageAlt = "ipfs_logo";
+        }
+        else if (image_type === "orbit"){
+            imageSrc = orbitdb_logo;
+            imageAlt = "orbitdb_logo";
+        }
+        else if (image_type === "app"){
+            imageSrc = app_logo;
+            imageAlt = "app_logo";
+        }
+
+        if(progress_type === "indicating")
+            indicating = true;
+        else if(progress_type === "error")
+            error = true;
+
+        if(message_list){
+            listItems = message_list.map((listItem) =>
+                <li>{listItem}</li>
+            );
+        }
+
+        const list = message_list ? <ul>{listItems}</ul> : '';
+
+        return(
+            <main className="loading-screen">
+                <Container>
+                    <img src={imageSrc} alt={imageAlt} className="loading-img" />
+                    <p><strong>{this.props.title}</strong></p>
+                    <p>{this.props.message}</p>
+                    {list}
+                </Container>
+                <Progress percent={this.props.progress} size='small' indicating={indicating} error={error}/>
+            </main>
+        );
+    }
+}
+
+LoadingComponent.propTypes = {
+    title: PropTypes.string.isRequired,
+    message: PropTypes.string.isRequired,
+    message_list: PropTypes.arrayOf(PropTypes.string),
+    image_type: PropTypes.string.isRequired,
+    progress: PropTypes.number.isRequired,
+    progress_type: PropTypes.string.isRequired,
+};
+
+export default LoadingComponent;

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

@@ -1,164 +1,143 @@
 import React, { Children, Component } from 'react';
 import { connect } from 'react-redux';
-import { Progress } from 'semantic-ui-react'
+import { Container, Progress } from 'semantic-ui-react'
+
+import { breezeConstants } from '@ezerous/breeze'
+
+import LoadingComponent from './LoadingComponent';
 
 // CSS
-import '../assets/css/loading-container.css';
+import '../assets/css/loading-component.css';
 
 // Images
 import ethereum_logo from '../assets/images/ethereum_logo.svg';
 import ipfs_logo from '../assets/images/ipfs_logo.svg';
 import orbitdb_logo from '../assets/images/orbitdb_logo.png';
-import logo from '../assets/images/logo.png';
+import logo from '../assets/images/app_logo.png';
 
 class LoadingContainer extends Component {
     render() {
-        if (this.props.web3.status === 'initializing') {
-            return (
-                <main className="loading-screen">
-                    <div className="ui container">
-                        <img src={ethereum_logo} alt="ethereum_logo" className="loading-img" />
-                        <p><strong>Connecting to the Ethereum network...</strong></p>
-                        <p>Please make sure to unlock MetaMask.</p>
-                        <Progress percent="20" size='tiny' active />
-                    </div>
-                </main>
-            );
+        if ((this.props.web3.status === 'initializing' || !this.props.web3.networkId)
+            && !this.props.web3.networkFailed) {
+            return <LoadingComponent
+                title="Connecting to the Ethereum network..."
+                message="Please make sure to unlock MetaMask."
+                image_type="ethereum"
+                progress={20}
+                progress_type="indicating"
+            />
         }
 
         if (this.props.web3.status === 'failed' || this.props.web3.networkFailed) {
-            return (
-                <main className="loading-screen">
-                        <div className="ui container">
-                            <img src={ethereum_logo} alt="ethereum_logo" className="loading-img" />
-                            <p><strong>No connection to the Ethereum network!</strong></p>
-                            Please make sure that:
-                            <ul>
-                                <li>MetaMask is unlocked and pointed to the correct network</li>
-                                <li>The app has been granted the right to connect to your account</li>
-                            </ul>
-                            <Progress percent="20" size='tiny' error />
-                        </div>
-                </main>
-            );
+            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']}
+                image_type="ethereum"
+                progress={20}
+                progress_type="error"
+            />
         }
 
         if (this.props.web3.status === 'initialized' && this.props.web3.accountsFailed) {
-            return (
-                <main className="loading-screen">
-                    <div className="ui container">
-                        <img src={ethereum_logo} alt="ethereum_logo" className="loading-img" />
-                        <p><strong>We can't find any Ethereum accounts!</strong></p>
-                        <p>Please make sure that MetaMask is unlocked.</p>
-                        <Progress percent="20" size='tiny' error />
-                    </div>
-                </main>
-            );
+            return <LoadingComponent
+                title="We can't find any Ethereum accounts!"
+                message="Please make sure that MetaMask is unlocked."
+                image_type="ethereum"
+                progress={20}
+                progress_type="error"
+            />
         }
 
-        if (!this.props.contractInitialized) {
-            return (
-                <main className="loading-screen">
-                    <div className="ui container">
-                        <img src={ethereum_logo} alt="ethereum_logo" className="loading-img" />
-                        <p><strong>Initializing contracts...</strong></p><p/>
-                        <Progress percent="40" size='tiny' active />
-                    </div>
-                </main>
-            );
+        if (this.props.drizzleStatus.initializing
+            || (!this.props.drizzleStatus.failed && !this.props.contractInitialized && this.props.contractDeployed )){
+            return <LoadingComponent
+                title="Initializing contracts..."
+                message=""
+                image_type="ethereum"
+                progress={40}
+                progress_type="indicating"
+            />
         }
 
         if (!this.props.contractDeployed) {
-            return (
-                <main className="loading-screen">
-                    <div className="ui container">
-                        <img src={ethereum_logo} alt="ethereum_logo" className="loading-img" />
-                        <p><strong>No contracts found on the current network!</strong></p>
-                        <p>Please make sure that you are connected to the correct network
-                            and the contracts are deployed.</p>
-                        <Progress percent="40" size='tiny' error />
-                    </div>
-                </main>
-            );
+            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."
+                image_type="ethereum"
+                progress={40}
+                progress_type="error"
+            />
         }
 
-        if (!this.props.ipfsInitialized && !this.props.ipfsFailed) {
-            return (
-                <main className="loading-screen">
-                    <div className="ui container">
-                        <img src={ipfs_logo} alt="ipfs_logo" className="loading-img" />
-                        <p><strong>Initializing IPFS...</strong></p><p/>
-                        <Progress percent="60" size='tiny' active />
-                    </div>
-                </main>
-            );
+        if (this.props.ipfsStatus === breezeConstants.STATUS_INITIALIZING) {
+            return <LoadingComponent
+                title="Initializing IPFS..."
+                message=""
+                image_type="ipfs"
+                progress={60}
+                progress_type="indicating"
+            />
         }
 
-        if (this.props.ipfsFailed) {
-            return (
-                <main className="loading-screen">
-                    <div className="ui container">
-                        <img src={ipfs_logo} alt="ipfs_logo" className="loading-img" />
-                        <p><strong>IPFS initialization failed!</strong></p><p/>
-                        <Progress percent="60" size='tiny' error />
-                    </div>
-                </main>
-            );
+        if (this.props.ipfsStatus === breezeConstants.STATUS_FAILED) {
+            return <LoadingComponent
+                title="IPFS initialization failed!"
+                message=""
+                image_type="ipfs"
+                progress={60}
+                progress_type="error"
+            />
         }
 
-        if (!this.props.orbitInitialized  && !this.props.orbitFailed) {
+        if (this.props.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 (
-                <main className="loading-screen">
-                    <div className="ui container">
-                        <img src={orbitdb_logo} alt="orbitdb_logo" className="loading-img" />
-                        <p><strong>Preparing OrbitDB...</strong></p>
-                        <p>{message}</p>
-                        <Progress percent="80" size='tiny' active />
-                    </div>
-                </main>
-            );
+            return <LoadingComponent
+                title="Preparing OrbitDB..."
+                message={message}
+                image_type="orbit"
+                progress={80}
+                progress_type="indicating"
+            />
+        }
+
+        if (this.props.orbitStatus === breezeConstants.STATUS_FAILED) {
+            return <LoadingComponent
+                title="OrbitDB initialization failed!"
+                message=""
+                image_type="orbit"
+                progress={80}
+                progress_type="error"
+            />
         }
 
-        if (this.props.orbitFailed) {
-            return (
-                <main className="loading-screen">
-                    <div className="ui container">
-                        <img src={orbitdb_logo} alt="orbitdb_logo" className="loading-img" />
-                        <p><strong>OrbitDB initialization failed!</strong></p><p/>
-                        <Progress percent="80" size='tiny' error />
-                    </div>
-                </main>
-            );
+        // Just in case our redux logic changes in the future
+        if (!this.props.drizzleStatus.initialized){
+            return <LoadingComponent
+                title="Loading dapp..."
+                message=""
+                image_type="app"
+                progress={90}
+                progress_type="error"
+            />
         }
 
-        if (this.props.drizzleStatus.initialized) return Children.only(this.props.children);
-
-        return (
-            <main className="loading-screen">
-                <div className="ui container">
-                    <img src={logo} alt="app_logo" className="loading-img" />
-                    <p><strong>Loading dapp...</strong></p><p/>
-                    <Progress percent="90" size='tiny' error />
-                </div>
-            </main>
-        );
+        return Children.only(this.props.children);
     }
 }
 
 const mapStateToProps = (state) => ({
-    accounts: state.accounts,
     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,
-    ipfsInitialized: state.ipfs.initialized,
-    ipfsFailed: state.ipfs.failed,
-    orbitInitialized: state.orbit.initialized,
-    orbitFailed: state.orbit.failed
 });
 
 export default connect(mapStateToProps)(LoadingContainer);

packages/concordia-app/src/options/drizzleOptions.js

@@ -10,6 +10,7 @@ const drizzleOptions = {
     events: {
         Forum: ['UserSignedUp', 'UsernameUpdated', 'TopicCreated', 'PostCreated']
     },
+    reloadWindowOnNetworkChange: true,
     reloadWindowOnAccountChange: true   // We need it to reinitialize breeze and create new Orbit databases
 };
 

packages/concordia-app/src/orbit/orbitUtils.js

@@ -5,7 +5,3 @@ export async function determineDBAddress({orbit, dbName, type, identityId}) {
     })).root;
     return `/orbitdb/${ipfsMultihash}/${dbName}`;
 }
-
-
-
-

packages/concordia-app/src/redux/sagas/orbitSaga.js

@@ -11,12 +11,12 @@ export function * initOrbitDatabases (action) {
 function * orbitSaga () {
     // Not sure which will come first
     const res = yield all([
+        take(drizzleActions.drizzle.DRIZZLE_INITIALIZED),
         take(breezeActions.breeze.BREEZE_INITIALIZED),
-        take(action => action.type === drizzleActions.account.ACCOUNTS_FETCHED
-            && action.accounts.length > 0)
+        take(action => action.type === drizzleActions.account.ACCOUNTS_FETCHED)
     ]);
 
-    yield initOrbitDatabases({breeze:res[0].breeze, account: res[1].accounts[0]});
+    yield initOrbitDatabases({breeze:res[1].breeze, account: res[2].accounts[0]});
 }
 
 export default orbitSaga