From 95cf8ac429aad09bd5bd0cf008ec9932a395396b Mon Sep 17 00:00:00 2001 From: Apostolof Date: Wed, 20 Jun 2018 01:50:28 +0300 Subject: [PATCH] Init pull from other user's orbitDBs, Move orbitDB interactions to TransactionsMonitorContainer --- src/components/NewPost.js | 19 +++----- src/components/Post.js | 19 ++++++-- src/components/Topic.js | 24 ++++++----- src/components/WithBlockchainData.js | 4 +- src/containers/StartTopicContainer.js | 41 ++++-------------- src/containers/TopicContainer.js | 20 ++++++++- .../TransactionsMonitorContainer.js | 43 +++++++++++++++---- .../actions/transactionsMonitorActions.js | 14 +++--- .../reducer/transactionsMonitorReducer.js | 2 +- src/util/orbit.js | 2 +- 10 files changed, 108 insertions(+), 80 deletions(-) diff --git a/src/components/NewPost.js b/src/components/NewPost.js index 5c240f2..1945a8f 100644 --- a/src/components/NewPost.js +++ b/src/components/NewPost.js @@ -16,7 +16,6 @@ class NewPost extends Component { this.handleInputChange = this.handleInputChange.bind(this); this.handlePreviewToggle = this.handlePreviewToggle.bind(this); this.validateAndPost = this.validateAndPost.bind(this); - this.pushToDatabase = this.pushToDatabase.bind(this); this.newPostOuterRef = React.createRef(); @@ -40,22 +39,16 @@ class NewPost extends Component { } this.props.store.dispatch( - createPost(this.props.topicID, ((returnData) => { - this.topicIDFetched = returnData.topicID; - this.postIDFetched = returnData.postID; - this.pushToDatabase(); - })) + createPost(this.props.topicID, + { + postSubject: this.state.postSubjectInput, + postMessage: this.state.postContentInput + } + ) ); this.props.onPostCreated(); } - async pushToDatabase() { - await this.props.orbitDB.postsDB.put(this.postIDFetched, { - subject: this.state.postSubjectInput, - content: this.state.postContentInput - }); - } - handleInputChange(event) { this.setState({[event.target.name]: event.target.value}); } diff --git a/src/components/Post.js b/src/components/Post.js index f035943..d446f62 100644 --- a/src/components/Post.js +++ b/src/components/Post.js @@ -26,9 +26,22 @@ class Post extends Component { async fetchPost(postID) { this.orbitPostDataFetchStatus = "fetching"; - var som = this.props.orbitDB.postsDB.get(postID); - if (som){ - this.orbitPostData = som; + if (this.props.blockchainData[0].returnData[1] === this.props.user.address) { + this.orbitPostData = this.props.orbitDB.postsDB.get(postID); + } else { + const fullAddress = "/orbitdb/" + this.props.blockchainData[0].returnData[0] + "/posts"; + const store = await this.props.orbitDB.orbitdb.keyvalue(fullAddress); + await store.load(); + + let localOrbitData = store.get(postID); + if (localOrbitData) { + this.orbitPostData = localOrbitData; + } else { + // Wait until we have received something from the network + store.events.on('replicated', () => { + this.orbitPostData = store.get(postID); + }) + } } this.orbitPostDataFetchStatus = "fetched"; } diff --git a/src/components/Topic.js b/src/components/Topic.js index 7e5432c..ce795ca 100644 --- a/src/components/Topic.js +++ b/src/components/Topic.js @@ -21,21 +21,23 @@ class Topic extends Component { this.topicSubjectFetchStatus = "fetching"; if (this.props.blockchainData[0].returnData[1] === this.props.user.address) { - let som = this.props.orbitDB.topicsDB.get(topicID); - this.topicSubject = som['subject']; + let orbitData = this.props.orbitDB.topicsDB.get(topicID); + this.topicSubject = orbitData['subject']; this.topicSubjectFetchStatus = "fetched"; } else { - const fullAddress = "/orbitdb" + this.props.blockchainData[0].returnData[0] + "/topics"; + const fullAddress = "/orbitdb/" + this.props.blockchainData[0].returnData[0] + "/topics"; const store = await this.props.orbitDB.orbitdb.keyvalue(fullAddress); - - /*store.events.on('replicated', () => { - const result = store.iterator({ limit: -1 }).collect().map(e => e.payload.value) - console.log(result.join('\n')) - })*/ - await store.load(); - let som = store.get(topicID); - this.topicSubject = som['subject']; + + let localOrbitData = store.get(topicID); + if (localOrbitData) { + this.topicSubject = localOrbitData['subject']; + } else { + // Wait until we have received something from the network + store.events.on('replicated', () => { + this.topicSubject = store.get(topicID)['subject']; + }) + } this.topicSubjectFetchStatus = "fetched"; } } diff --git a/src/components/WithBlockchainData.js b/src/components/WithBlockchainData.js index 414b118..b99565f 100644 --- a/src/components/WithBlockchainData.js +++ b/src/components/WithBlockchainData.js @@ -44,9 +44,9 @@ class WithBlockchainData extends Component { ); } - componentDidUpdate(){ + componentWillUpdate(){ + let currentDrizzleState = this.drizzle.store.getState(); for (var i = 0; i < this.callsInfo.length; ++i){ - let currentDrizzleState = this.drizzle.store.getState(); let dataFetched = (currentDrizzleState .contracts[this.callsInfo[i].contract][this.callsInfo[i].method][this.dataKeys[i]]); if (dataFetched && dataFetched.value !== this.state.blockchainData[i].returnData){ diff --git a/src/containers/StartTopicContainer.js b/src/containers/StartTopicContainer.js index 5a85499..3ce6c55 100644 --- a/src/containers/StartTopicContainer.js +++ b/src/containers/StartTopicContainer.js @@ -14,7 +14,6 @@ class StartTopic extends Component { this.handleInputChange = this.handleInputChange.bind(this); this.handlePreviewToggle = this.handlePreviewToggle.bind(this); this.validateAndPost = this.validateAndPost.bind(this); - this.pushToDatabase = this.pushToDatabase.bind(this); this.state = { topicSubjectInput: '', @@ -22,8 +21,7 @@ class StartTopic extends Component { topicSubjectInputEmptySubmit: false, topicMessageInputEmptySubmit: false, previewEnabled: false, - previewDate: "", - creatingTopic: false + previewDate: "" }; } @@ -37,27 +35,14 @@ class StartTopic extends Component { } this.props.store.dispatch( - createTopic(((returnData) => { - this.topicIDFetched = returnData.topicID; - this.postIDFetched = returnData.postID; - this.pushToDatabase(); - this.props.router.push("/topic/" + this.topicIDFetched); - })) + createTopic( + { + topicSubject: this.state.topicSubjectInput, + topicMessage: this.state.topicMessageInput + } + ) ); - this.setState({ - 'creatingTopic': true - }); - } - - async pushToDatabase() { - await this.props.orbitDB.topicsDB.put(this.topicIDFetched, { - subject: this.state.topicSubjectInput - }); - - await this.props.orbitDB.postsDB.put(this.postIDFetched, { - subject: this.state.topicSubjectInput, - content: this.state.topicMessageInput - }); + this.context.router.push("/home"); } handleInputChange(event) { @@ -90,14 +75,6 @@ class StartTopic extends Component { var previewEditText = this.state.previewEnabled ? "Edit" : "Preview"; return (
- {/*this.state.creatingTopic &&
-
-

-
- {this.transactionProgressText} -
-
*/ - } {this.state.previewEnabled && { return { - transactions: state.transactions, - transactionStack: state.transactionStack, orbitDB: state.orbitDB, user: state.user } diff --git a/src/containers/TopicContainer.js b/src/containers/TopicContainer.js index 1b3ccdf..b11dd4c 100644 --- a/src/containers/TopicContainer.js +++ b/src/containers/TopicContainer.js @@ -30,7 +30,25 @@ class Topic extends Component { } async fetchTopicSubject(orbitDBAddress) { - var orbitData =this.props.orbitDB.topicsDB.get(this.state.topicID); + let orbitData; + if (this.props.blockchainData[0].returnData[1] === this.props.user.address) { + orbitData = this.props.orbitDB.topicsDB.get(this.state.topicID); + } else { + const fullAddress = "/orbitdb/" + orbitDBAddress + "/topics"; + const store = await this.props.orbitDB.orbitdb.keyvalue(fullAddress); + await store.load(); + + let localOrbitData = store.get(this.state.topicID); + if (localOrbitData) { + orbitData = localOrbitData; + } else { + // Wait until we have received something from the network + store.events.on('replicated', () => { + orbitData = store.get(this.state.topicID); + }) + } + } + this.props.store.dispatch(hideProgressBar()); this.setState({ 'topicSubject': orbitData['subject'], diff --git a/src/containers/TransactionsMonitorContainer.js b/src/containers/TransactionsMonitorContainer.js index 4e0ca91..f7a903e 100644 --- a/src/containers/TransactionsMonitorContainer.js +++ b/src/containers/TransactionsMonitorContainer.js @@ -11,6 +11,8 @@ class RightSideBar extends Component { super(props); this.handleMessageDismiss = this.handleMessageDismiss.bind(this); + this.updateTransactions = this.updateTransactions.bind(this); + this.completeWithOrbitInteractions = this.completeWithOrbitInteractions.bind(this); this.drizzle = context.drizzle; this.transactionsStackIds = []; @@ -76,7 +78,11 @@ class RightSideBar extends Component { return (transactionMessages); } - componentDidUpdate(){ + componentDidUpdate(){ //Maybe change to componentWillReceiveProps() + this.updateTransactions(); + } + + updateTransactions(){ for (var index = 0; index < this.props.transactionsQueue.length; ++index) { let transaction = this.props.transactionsQueue[index]; @@ -102,7 +108,7 @@ class RightSideBar extends Component { if (this.props.transactionStack[this.transactionsStackIds[index]]){ /* User confirmed the transaction */ - //Gets transaciton's hash + //Gets transaction's hash this.transactionsTxHashes[index] = (this.props .transactionStack[this.transactionsStackIds[index]]); this.props.store.dispatch(updateTransaction(index, { @@ -129,9 +135,8 @@ class RightSideBar extends Component { this.setState({ transactionsCompletionTime: transactionsCompletionTimeShallowCopy }); - if (this.props.transactionsQueue[index].callback){ - this.props.transactionsQueue[index].callback(data); - } + + this.completeWithOrbitInteractions(this.props.transactionsQueue[index], data); } else if (this.props.transactions[this.transactionsTxHashes[index]] .status === "error"){ /* Transaction failed to complete */ @@ -146,13 +151,34 @@ class RightSideBar extends Component { this.setState({ transactionsCompletionTime: transactionsCompletionTimeShallowCopy }); - if (this.props.transactionsQueue[index].callback){ - this.props.transactionsQueue[index].callback(null); - } + //TODO handle this gracefully } } } } + + async completeWithOrbitInteractions(transaction, returnData){ + switch (transaction.event){ + case 'TopicCreated': + await this.props.orbitDB.topicsDB.put(returnData.topicID, { + subject: transaction.userInputs.topicSubject + }); + + await this.props.orbitDB.postsDB.put(returnData.postID, { + subject: transaction.userInputs.topicSubject, + content: transaction.userInputs.topicMessage + }); + break; + case 'PostCreated': + await this.props.orbitDB.postsDB.put(returnData.postID, { + subject: transaction.userInputs.postSubject, + content: transaction.userInputs.postMessage + }); + break; + default: + break; //This transaction doesn't need a DB interaction to complete + } + } } RightSideBar.contextTypes = { @@ -161,6 +187,7 @@ RightSideBar.contextTypes = { const mapStateToProps = state => { return { + orbitDB: state.orbitDB, transactionsQueue: state.transactionsQueue.transactions, transactions: state.transactions, transactionStack: state.transactionStack diff --git a/src/redux/actions/transactionsMonitorActions.js b/src/redux/actions/transactionsMonitorActions.js index 7492a4f..5e47e50 100644 --- a/src/redux/actions/transactionsMonitorActions.js +++ b/src/redux/actions/transactionsMonitorActions.js @@ -11,13 +11,13 @@ export function updateUsername(newUsername, callback){ contract: 'Forum', method: 'updateUsername', params: [newUsername], - event: 'UsernameUpdated', + event: 'UsernameUpdated' }, callback: callback }; } -export function createTopic(callback){ +export function createTopic(userInputs){ return { type: INIT_TRANSACTION, transactionDescriptor: @@ -25,13 +25,13 @@ export function createTopic(callback){ contract: 'Forum', method: 'createTopic', params: [], - event: 'TopicCreated', + event: 'TopicCreated' }, - callback: callback + userInputs: userInputs }; } -export function createPost(topicID, callback){ +export function createPost(topicID, userInputs){ return { type: INIT_TRANSACTION, transactionDescriptor: @@ -39,9 +39,9 @@ export function createPost(topicID, callback){ contract: 'Forum', method: 'createPost', params: [topicID], - event: 'PostCreated', + event: 'PostCreated' }, - callback: callback + userInputs: userInputs }; } diff --git a/src/redux/reducer/transactionsMonitorReducer.js b/src/redux/reducer/transactionsMonitorReducer.js index c3111cf..8d4d609 100644 --- a/src/redux/reducer/transactionsMonitorReducer.js +++ b/src/redux/reducer/transactionsMonitorReducer.js @@ -15,7 +15,7 @@ const transactionsReducer = (state = initialState, action) => { params: action.transactionDescriptor.params, event: action.transactionDescriptor.event, returnData: null, - callback: action.callback + userInputs: action.userInputs }); return { transactions: transactionsShallowCopy diff --git a/src/util/orbit.js b/src/util/orbit.js index 55e9bdd..57ee5c3 100644 --- a/src/util/orbit.js +++ b/src/util/orbit.js @@ -19,7 +19,7 @@ const ipfsOptions = { // // Websocket: // '/dns4/ws-star-signal-2.servep2p.com/tcp/443//wss/p2p-websocket-star', - // '/dns4/ws-star.discovery.libp2p.io/tcp/443/wss/p2p-websocket-star', + '/dns4/ws-star.discovery.libp2p.io/tcp/443/wss/p2p-websocket-star', // Local signal server //'/ip4/127.0.0.1/tcp/4711/ws/p2p-websocket-star' //