diff --git a/app/src/components/Post.js b/app/src/components/Post.js index aaa3210..559313f 100644 --- a/app/src/components/Post.js +++ b/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() { - if (this.props.postData && this.state.fetchPostDataStatus === "pending") { - this.setState({ fetchPostDataStatus: 'fetching' }); - /*this.fetchPost(this.props.postID);*/ - } + componentDidMount() { + this.getBlockchainData(); + } + + componentDidUpdate(){ + this.getBlockchainData(); if (this.state.readyForAnimation){ if (this.postRef){ setTimeout(() => { diff --git a/app/src/components/PostList.js b/app/src/components/PostList.js index 65e12fa..2ecc9aa 100644 --- a/app/src/components/PostList.js +++ b/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 { ); } + + componentDidMount() { + this.getBlockchainData(); + } + + componentDidUpdate(){ + this.getBlockchainData(); + } }; const mapStateToProps = state => { diff --git a/app/src/components/ProfileInformation.js b/app/src/components/ProfileInformation.js index c50543b..caaa2f3 100644 --- a/app/src/components/ProfileInformation.js +++ b/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, - dateOfRegister: dateOfRegister ? dateOfRegister : '', - orbitDBId: orbitDBId ? orbitDBId : '' + pageStatus: 'initialized', + dateOfRegister: '', + orbitDBId: '' }; } - componentDidUpdate(){ + getBlockchainData(){ if (this.state.pageStatus === 'initialized' && this.props.drizzleStatus['initialized']) { callsInfo.forEach((call, index) => { @@ -140,6 +111,14 @@ class ProfileInformation extends Component { ); } + + componentDidMount() { + this.getBlockchainData(); + } + + componentDidUpdate(){ + this.getBlockchainData(); + } }; const mapStateToProps = state => { diff --git a/app/src/components/Topic.js b/app/src/components/Topic.js index 4f97352..d93f41b 100644 --- a/app/src/components/Topic.js +++ b/app/src/components/Topic.js @@ -14,17 +14,18 @@ class Topic extends Component { this.fetchSubject = this.fetchSubject.bind(this); - this.topicSubject = null; - this.topicSubjectFetchStatus = "pending"; + this.state = { + 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']; - this.topicSubjectFetchStatus = "fetched"; + topicSubject = orbitData['subject'] } 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 { {this.props.history.push("/topic/" + this.props.topicID)}}> -
+

- {this.topicSubject !== null ? this.topicSubject + {this.state.topicSubject !== null ? this.state.topicSubject : @@ -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); diff --git a/app/src/components/TopicList.js b/app/src/components/TopicList.js index a63cebe..0ec3801 100644 --- a/app/src/components/TopicList.js +++ b/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 {

); } + + componentDidMount() { + this.getBlockchainData(); + } + + componentDidUpdate(){ + this.getBlockchainData(); + } }; const mapStateToProps = state => { diff --git a/app/src/containers/BoardContainer.js b/app/src/containers/BoardContainer.js index cca208a..0aa5c12 100644 --- a/app/src/containers/BoardContainer.js +++ b/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() { - this.props.history.push("/startTopic"); - } - - componentDidUpdate(){ + getBlockchainData() { 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 {
); } + + componentDidMount() { + this.getBlockchainData(); + } + + componentDidUpdate(){ + this.getBlockchainData(); + } } const mapStateToProps = state => { diff --git a/app/src/containers/ProfileContainer.js b/app/src/containers/ProfileContainer.js index 4cd0e4d..f60d195 100644 --- a/app/src/containers/ProfileContainer.js +++ b/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 : '', - topicIDs: topicIDs ? topicIDs : null, - postIDs: postIDs ? postIDs : null + username: '', + topicIDs: 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(''); } diff --git a/app/src/containers/TopicContainer.js b/app/src/containers/TopicContainer.js index aca4551..fbdccee 100644 --- a/app/src/containers/TopicContainer.js +++ b/app/src/containers/TopicContainer.js @@ -22,45 +22,43 @@ 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, - topicID: this.props.match.params.topicId, + pageStatus: 'initialized', + 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){ - this.setState({ fetchTopicSubjectStatus: "fetching"}) - /*this.fetchTopicSubject(this.props.contracts[contract][getTopicMethod][this.dataKey].value[0]);*/ + if (this.props.orbitDB.orbitdb !== null){ + 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' }); + } } async fetchTopicSubject(orbitDBAddress) { @@ -85,8 +83,8 @@ class TopicContainer extends Component { this.props.setNavBarTitle(orbitData['subject']); this.setState({ - 'topicSubject': orbitData['subject'], - fetchTopicSubjectStatus: "fetched" + topicSubject: orbitData['subject'], + fetchTopicSubjectStatus: 'fetched' }); } @@ -137,6 +135,18 @@ class TopicContainer extends Component { ); } + + componentDidMount() { + this.getBlockchainData(); + } + + componentDidUpdate() { + this.getBlockchainData(); + } + + componentWillUnmount() { + this.props.setNavBarTitle(''); + } } const mapDispatchToProps = dispatch => bindActionCreators({