Multiple fixes

app/src/components/Post.js

@@ -17,6 +17,7 @@ class Post extends Component {
     constructor(props) {
         super(props);
 
+        this.getBlockchainData = this.getBlockchainData.bind(this);
         this.fetchPost = this.fetchPost.bind(this);
         if (props.getFocus){
             this.postRef = React.createRef();
@@ -31,6 +32,15 @@ class Post extends Component {
         }
     }
 
+    getBlockchainData() {
+        if (this.props.postData &&
+            this.props.orbitDB.orbitdb &&
+            this.state.fetchPostDataStatus === "pending") {
+            this.setState({ fetchPostDataStatus: 'fetching' });
+            this.fetchPost(this.props.postID);
+        }
+    }
+
     async fetchPost(postID) {
         let orbitPostData;
         if (this.props.postData.value[1] === this.props.user.address) {
@@ -160,11 +170,12 @@ class Post extends Component {
         );
     }
 
-    componentDidUpdate() {
+    componentDidMount() {
-        if (this.props.postData && this.state.fetchPostDataStatus === "pending") {
+        this.getBlockchainData();
-            this.setState({ fetchPostDataStatus: 'fetching' });
-            /*this.fetchPost(this.props.postID);*/
     }
+
+    componentDidUpdate(){
+        this.getBlockchainData();
         if (this.state.readyForAnimation){
             if (this.postRef){
                 setTimeout(() => {

app/src/components/PostList.js

@@ -11,18 +11,11 @@ class PostList extends Component {
     constructor(props) {
         super(props);
 
+        this.getBlockchainData = this.getBlockchainData.bind(this);
         this.dataKeys = [];
-
-        if (this.props.drizzleStatus['initialized']){
-            this.props.postIDs.forEach( postID => {
-                if (!this.dataKeys[postID]) {
-                    this.dataKeys[postID] = drizzle.contracts[contract].methods[getPostMethod].cacheCall(postID);
-                }
-            })
-        }
     }
 
-    componentDidUpdate(){
+    getBlockchainData(){
         if (this.props.drizzleStatus['initialized']){
             this.props.postIDs.forEach( postID => {
                 if (!this.dataKeys[postID]) {
@@ -54,6 +47,14 @@ class PostList extends Component {
             </div>
         );
     }
+
+    componentDidMount() {
+        this.getBlockchainData();
+    }
+
+    componentDidUpdate(){
+        this.getBlockchainData();
+    }
 };
 
 const mapStateToProps = state => {

app/src/components/ProfileInformation.js

@@ -19,46 +19,17 @@ class ProfileInformation extends Component {
     constructor(props) {
         super(props);
 
+        this.getBlockchainData = this.getBlockchainData.bind(this);
         this.dataKey = [];
-        var pageStatus = 'initialized';
-        if (this.props.drizzleStatus['initialized']) {
-            callsInfo.forEach((call, index) => {
-                this.dataKey[index] = drizzle.contracts[call.contract]
-                    .methods[call.method].cacheCall(this.props.address);
-            })
-            pageStatus = 'loading';
-        }
-        if (this.dataKey.length !== 0) {
-            pageStatus = 'loaded';
-            callsInfo.forEach((call, index) => {
-                if (!this.props.contracts[call.contract][call.method][this.dataKey[index]]) {
-                    pageStatus = 'loading';
-                    return;
-                }
-            })
-        }
-        if (pageStatus === 'loaded'){
-            var dateOfRegister = '';
-            var orbitDBId = '';
-
-            let transaction = this.props.contracts[callsInfo[0].contract][callsInfo[0].method][this.dataKey[0]];
-            if (transaction){
-                dateOfRegister = transaction.value;
-            }
-            transaction = this.props.contracts[callsInfo[1].contract][callsInfo[1].method][this.dataKey[1]];
-            if (transaction){
-                orbitDBId = transaction.value;
-            }
-        }
 
         this.state = {
-            pageStatus: pageStatus,
+            pageStatus: 'initialized',
-            dateOfRegister: dateOfRegister ? dateOfRegister : '',
+            dateOfRegister: '',
-            orbitDBId: orbitDBId ? orbitDBId : ''
+            orbitDBId: ''
         };
     }
 
-    componentDidUpdate(){
+    getBlockchainData(){
         if (this.state.pageStatus === 'initialized' &&
             this.props.drizzleStatus['initialized']) {
             callsInfo.forEach((call, index) => {
@@ -140,6 +111,14 @@ class ProfileInformation extends Component {
             </div>
         );
     }
+
+    componentDidMount() {
+        this.getBlockchainData();
+    }
+
+    componentDidUpdate(){
+        this.getBlockchainData();
+    }
 };
 
 const mapStateToProps = state => {

app/src/components/Topic.js

@@ -14,17 +14,18 @@ class Topic extends Component {
 
         this.fetchSubject = this.fetchSubject.bind(this);
 
-        this.topicSubject = null;
+        this.state = {
-        this.topicSubjectFetchStatus = "pending";
+            topicSubject: null,
+            topicSubjectFetchStatus: 'pending'
+        }
     }
 
     async fetchSubject(topicID) {
-        this.topicSubjectFetchStatus = "fetching";
+        var topicSubject;
 
         if (this.props.topicData.value[1] === this.props.user.address) {
             let orbitData = this.props.orbitDB.topicsDB.get(topicID);
-            this.topicSubject = orbitData['subject'];
+            topicSubject = orbitData['subject']
-            this.topicSubjectFetchStatus = "fetched";
         } else {
             const fullAddress = "/orbitdb/" + this.props.topicData.value[0] + "/topics";
             const store = await this.props.orbitDB.orbitdb.keyvalue(fullAddress);
@@ -32,15 +33,19 @@ class Topic extends Component {
 
             let localOrbitData =  store.get(topicID);
             if (localOrbitData) {
-                this.topicSubject = localOrbitData['subject'];
+                topicSubject = localOrbitData['subject'];
             } else {
                 // Wait until we have received something from the network
                 store.events.on('replicated', () => {
-                    this.topicSubject = store.get(topicID)['subject'];
+                    topicSubject = store.get(topicID)['subject'];
                 })
             }
-            this.topicSubjectFetchStatus = "fetched";
         }
+
+        this.setState({
+            topicSubject: topicSubject,
+            topicSubjectFetchStatus: 'fetched'
+        })
     }
 
     render(){
@@ -48,9 +53,9 @@ class Topic extends Component {
             <Card link className="card"
                 onClick={() => {this.props.history.push("/topic/" + this.props.topicID)}}>
                 <Card.Content>
-                    <div className={"topic-subject" + (this.topicSubject ? "" : " grey-text")}>
+                    <div className={"topic-subject" + (this.state.topicSubject ? "" : " grey-text")}>
                         <p><strong>
-                            {this.topicSubject !== null ? this.topicSubject
+                            {this.state.topicSubject !== null ? this.state.topicSubject
                                 :<ContentLoader height={5.8} width={300} speed={2}
                                 primaryColor="#b2e8e6" secondaryColor="#00b5ad" >
                                 <rect x="0" y="0" rx="3" ry="3" width="150" height="5.5" />
@@ -84,9 +89,18 @@ class Topic extends Component {
         );
     }
 
-    componentDidUpdate(){
+    componentDidMount() {
+        if (this.props.topicData !== null &&
+            this.state.topicSubjectFetchStatus === "pending" &&
+            this.props.orbitDB.ipfsInitialized &&
+            this.props.orbitDB.orbitdb) {
+            this.fetchSubject(this.props.topicID);
+        }
+    }
+
+    componentDidUpdate() {
         if (this.props.topicData !== null &&
-            this.topicSubjectFetchStatus === "pending" &&
+            this.state.topicSubjectFetchStatus === "pending" &&
             this.props.orbitDB.ipfsInitialized &&
             this.props.orbitDB.orbitdb) {
             this.fetchSubject(this.props.topicID);

app/src/components/TopicList.js

@@ -11,18 +11,11 @@ class TopicList extends Component {
     constructor(props) {
         super(props);
 
+        this.getBlockchainData = this.getBlockchainData.bind(this);
         this.dataKeys = [];
-
-        if (this.props.drizzleStatus['initialized']){
-            this.props.topicIDs.forEach( topicID => {
-                if (!this.dataKeys[topicID]) {
-                    this.dataKeys[topicID] = drizzle.contracts[contract].methods[getTopicMethod].cacheCall(topicID);
-                }
-            })
-        }
     }
 
-    componentDidUpdate(){
+    getBlockchainData(){
         if (this.props.drizzleStatus['initialized']){
             this.props.topicIDs.forEach( topicID => {
                 if (!this.dataKeys[topicID]) {
@@ -48,6 +41,14 @@ class TopicList extends Component {
             </div>
         );
     }
+
+    componentDidMount() {
+        this.getBlockchainData();
+    }
+
+    componentDidUpdate(){
+        this.getBlockchainData();
+    }
 };
 
 const mapStateToProps = state => {

app/src/containers/BoardContainer.js

@@ -19,27 +19,15 @@ class BoardContainer extends Component {
 
         /*this.props.store.dispatch(showProgressBar());*/
 
+        this.getBlockchainData = this.getBlockchainData.bind(this);
         this.handleCreateTopicClick = this.handleCreateTopicClick.bind(this);
 
-        var pageStatus = 'initialized';
-        if (this.props.drizzleStatus['initialized']){
-            this.dataKey = drizzle.contracts[contract].methods[getNumberOfTopicsMethod].cacheCall();
-            pageStatus = 'loading';
-        }
-        if (this.dataKey && this.props.contracts[contract][getNumberOfTopicsMethod][this.dataKey]){
-            pageStatus = 'loaded';
-        }
-
         this.state = {
-            pageStatus: pageStatus
+            pageStatus: 'initialized'
         }
     }
 
-    handleCreateTopicClick() {
+    getBlockchainData() {
-        this.props.history.push("/startTopic");
-    }
-
-    componentDidUpdate(){
         if (this.state.pageStatus === 'initialized' &&
             this.props.drizzleStatus['initialized']){
             this.dataKey = drizzle.contracts[contract].methods[getNumberOfTopicsMethod].cacheCall();
@@ -52,6 +40,10 @@ class BoardContainer extends Component {
         }
     }
 
+    handleCreateTopicClick() {
+        this.props.history.push("/startTopic");
+    }
+
     render() {
         var boardContents;
         if (this.state.pageStatus === 'loaded'){
@@ -104,6 +96,14 @@ class BoardContainer extends Component {
             </div>
         );
     }
+
+    componentDidMount() {
+        this.getBlockchainData();
+    }
+
+    componentDidUpdate(){
+        this.getBlockchainData();
+    }
 }
 
 const mapStateToProps = state => {

app/src/containers/ProfileContainer.js

@@ -28,65 +28,28 @@ class ProfileContainer extends Component {
     constructor(props) {
         super(props);
 
+        this.getBlockchainData = this.getBlockchainData.bind(this);
+
         this.dataKey = [];
         var address = this.props.match.params.address
             ? this.props.match.params.address
             : this.props.user.address;
 
-        var pageStatus = 'initialized';
-        if (this.props.drizzleStatus['initialized']) {
-            callsInfo.forEach((call, index) => {
-                this.dataKey[index] = drizzle.contracts[call.contract]
-                    .methods[call.method].cacheCall(address);
-            })
-            pageStatus = 'loading';
-        }
-        if (this.dataKey.length !== 0) {
-            pageStatus = 'loaded';
-            callsInfo.forEach((call, index) => {
-                if (!this.props.contracts[call.contract][call.method][this.dataKey[index]]) {
-                    pageStatus = 'loading';
-                    return;
-                }
-            })
-        }
-        if (pageStatus === 'loaded'){
-            var username = '';
-            var topicIDs = null;
-            var postIDs = null;
-
-            let transaction = this.props.contracts[callsInfo[0].contract][callsInfo[0].method][this.dataKey[0]];
-            if (transaction){
-                username = transaction.value;
-                this.props.setNavBarTitle(username);
-            }
-            transaction = this.props.contracts[callsInfo[1].contract][callsInfo[1].method][this.dataKey[1]];
-            if (transaction){
-                topicIDs = transaction.value;
-            }
-            transaction = this.props.contracts[callsInfo[2].contract][callsInfo[2].method][this.dataKey[2]];
-            if (transaction){
-                postIDs = transaction.value;
-            }
-
-            /*this.props.store.dispatch(hideProgressBar());*/
-        }
-
         this.state = {
-            pageStatus: pageStatus,
+            pageStatus: 'initialized',
             userAddress: address,
-            username: username ? username : '',
+            username: '',
-            topicIDs: topicIDs ? topicIDs : null,
+            topicIDs: null,
-            postIDs: postIDs ? postIDs : null
+            postIDs: null
         };
     }
 
-    componentDidUpdate(){
+    getBlockchainData() {
         if (this.state.pageStatus === 'initialized' &&
             this.props.drizzleStatus['initialized']) {
             callsInfo.forEach((call, index) => {
                 this.dataKey[index] = drizzle.contracts[call.contract]
-                    .methods[call.method].cacheCall(this.props.match.params.address);
+                    .methods[call.method].cacheCall(this.state.userAddress);
             })
             this.setState({ pageStatus: 'loading' });
         }
@@ -195,6 +158,14 @@ class ProfileContainer extends Component {
         );
     }
 
+    componentDidMount() {
+        this.getBlockchainData();
+    }
+
+    componentDidUpdate(){
+        this.getBlockchainData();
+    }
+
     componentWillUnmount() {
         this.props.setNavBarTitle('');
     }

app/src/containers/TopicContainer.js

@@ -22,44 +22,42 @@ class TopicContainer extends Component {
             this.props.navigateTo('/404');
         }
 
+        this.getBlockchainData = this.getBlockchainData.bind(this);
         this.fetchTopicSubject = this.fetchTopicSubject.bind(this);
         this.togglePostingState = this.togglePostingState.bind(this);
         this.postCreated = this.postCreated.bind(this);
 
-        var pageStatus = 'initialized';
-        if (this.props.drizzleStatus['initialized']) {
-            this.dataKey = drizzle.contracts[contract].methods[getTopicMethod].cacheCall(this.props.match.params.topicId);
-            pageStatus = 'loading';
-        }
-        if (this.dataKey && this.props.contracts[contract][getTopicMethod][this.dataKey]) {
-            pageStatus = 'loaded';
-        }
-
         this.state = {
-            pageStatus: pageStatus,
+            pageStatus: 'initialized',
-            topicID: this.props.match.params.topicId,
+            topicID: parseInt(this.props.match.params.topicId),
             topicSubject: null,
             postFocus: this.props.match.params.postId && /^[0-9]+$/.test(this.props.match.params.postId)
                 ? this.props.match.params.postId
                 : null,
-            fetchTopicSubjectStatus: null,
+            fetchTopicSubjectStatus: 'pending',
             posting: false
         };
     }
 
-    componentDidUpdate() {
+    getBlockchainData() {
         if (this.state.pageStatus === 'initialized' &&
             this.props.drizzleStatus['initialized']) {
-            this.dataKey = drizzle.contracts[contract].methods[getTopicMethod].cacheCall(this.state.topicId);
+            this.dataKey = drizzle.contracts[contract].methods[getTopicMethod].cacheCall(this.state.topicID);
             this.setState({ pageStatus: 'loading' });
         }
         if (this.state.pageStatus === 'loading' &&
             this.props.contracts[contract][getTopicMethod][this.dataKey]) {
             this.setState({ pageStatus: 'loaded' });
-            if (this.state.fetchTopicSubjectStatus === null){
+            if (this.props.orbitDB.orbitdb !== null){
-                this.setState({ fetchTopicSubjectStatus: "fetching"})
+                this.fetchTopicSubject(this.props.contracts[contract][getTopicMethod][this.dataKey].value[0]);
-                /*this.fetchTopicSubject(this.props.contracts[contract][getTopicMethod][this.dataKey].value[0]);*/
+                this.setState({ fetchTopicSubjectStatus: 'fetching' });
+            }
         }
+        if (this.state.pageStatus === 'loaded' &&
+            this.state.fetchTopicSubjectStatus === 'pending' &&
+            this.props.orbitDB.orbitdb !== null) {
+            this.fetchTopicSubject(this.props.contracts[contract][getTopicMethod][this.dataKey].value[0]);
+            this.setState({ fetchTopicSubjectStatus: 'fetching' });
         }
     }
 
@@ -85,8 +83,8 @@ class TopicContainer extends Component {
 
         this.props.setNavBarTitle(orbitData['subject']);
         this.setState({
-            'topicSubject': orbitData['subject'],
+            topicSubject: orbitData['subject'],
-            fetchTopicSubjectStatus: "fetched"
+            fetchTopicSubjectStatus: 'fetched'
         });
     }
 
@@ -137,6 +135,18 @@ class TopicContainer extends Component {
             </div>
         );
     }
+
+    componentDidMount() {
+        this.getBlockchainData();
+    }
+
+    componentDidUpdate() {
+        this.getBlockchainData();
+    }
+
+    componentWillUnmount() {
+        this.props.setNavBarTitle('');
+    }
 }
 
 const mapDispatchToProps = dispatch => bindActionCreators({