Browse Source

Init pull from other user's orbitDBs, Move orbitDB interactions to TransactionsMonitorContainer

develop
Apostolos Fanakis 7 years ago
parent
commit
95cf8ac429
  1. 19
      src/components/NewPost.js
  2. 19
      src/components/Post.js
  3. 24
      src/components/Topic.js
  4. 4
      src/components/WithBlockchainData.js
  5. 41
      src/containers/StartTopicContainer.js
  6. 20
      src/containers/TopicContainer.js
  7. 43
      src/containers/TransactionsMonitorContainer.js
  8. 14
      src/redux/actions/transactionsMonitorActions.js
  9. 2
      src/redux/reducer/transactionsMonitorReducer.js
  10. 2
      src/util/orbit.js

19
src/components/NewPost.js

@ -16,7 +16,6 @@ class NewPost extends Component {
this.handleInputChange = this.handleInputChange.bind(this); this.handleInputChange = this.handleInputChange.bind(this);
this.handlePreviewToggle = this.handlePreviewToggle.bind(this); this.handlePreviewToggle = this.handlePreviewToggle.bind(this);
this.validateAndPost = this.validateAndPost.bind(this); this.validateAndPost = this.validateAndPost.bind(this);
this.pushToDatabase = this.pushToDatabase.bind(this);
this.newPostOuterRef = React.createRef(); this.newPostOuterRef = React.createRef();
@ -40,22 +39,16 @@ class NewPost extends Component {
} }
this.props.store.dispatch( this.props.store.dispatch(
createPost(this.props.topicID, ((returnData) => { createPost(this.props.topicID,
this.topicIDFetched = returnData.topicID; {
this.postIDFetched = returnData.postID; postSubject: this.state.postSubjectInput,
this.pushToDatabase(); postMessage: this.state.postContentInput
})) }
)
); );
this.props.onPostCreated(); this.props.onPostCreated();
} }
async pushToDatabase() {
await this.props.orbitDB.postsDB.put(this.postIDFetched, {
subject: this.state.postSubjectInput,
content: this.state.postContentInput
});
}
handleInputChange(event) { handleInputChange(event) {
this.setState({[event.target.name]: event.target.value}); this.setState({[event.target.name]: event.target.value});
} }

19
src/components/Post.js

@ -26,9 +26,22 @@ class Post extends Component {
async fetchPost(postID) { async fetchPost(postID) {
this.orbitPostDataFetchStatus = "fetching"; this.orbitPostDataFetchStatus = "fetching";
var som = this.props.orbitDB.postsDB.get(postID); if (this.props.blockchainData[0].returnData[1] === this.props.user.address) {
if (som){ this.orbitPostData = this.props.orbitDB.postsDB.get(postID);
this.orbitPostData = som; } 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"; this.orbitPostDataFetchStatus = "fetched";
} }

24
src/components/Topic.js

@ -21,21 +21,23 @@ class Topic extends Component {
this.topicSubjectFetchStatus = "fetching"; this.topicSubjectFetchStatus = "fetching";
if (this.props.blockchainData[0].returnData[1] === this.props.user.address) { if (this.props.blockchainData[0].returnData[1] === this.props.user.address) {
let som = this.props.orbitDB.topicsDB.get(topicID); let orbitData = this.props.orbitDB.topicsDB.get(topicID);
this.topicSubject = som['subject']; this.topicSubject = orbitData['subject'];
this.topicSubjectFetchStatus = "fetched"; this.topicSubjectFetchStatus = "fetched";
} else { } 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); 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(); 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"; this.topicSubjectFetchStatus = "fetched";
} }
} }

4
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){ for (var i = 0; i < this.callsInfo.length; ++i){
let currentDrizzleState = this.drizzle.store.getState();
let dataFetched = (currentDrizzleState let dataFetched = (currentDrizzleState
.contracts[this.callsInfo[i].contract][this.callsInfo[i].method][this.dataKeys[i]]); .contracts[this.callsInfo[i].contract][this.callsInfo[i].method][this.dataKeys[i]]);
if (dataFetched && dataFetched.value !== this.state.blockchainData[i].returnData){ if (dataFetched && dataFetched.value !== this.state.blockchainData[i].returnData){

41
src/containers/StartTopicContainer.js

@ -14,7 +14,6 @@ class StartTopic extends Component {
this.handleInputChange = this.handleInputChange.bind(this); this.handleInputChange = this.handleInputChange.bind(this);
this.handlePreviewToggle = this.handlePreviewToggle.bind(this); this.handlePreviewToggle = this.handlePreviewToggle.bind(this);
this.validateAndPost = this.validateAndPost.bind(this); this.validateAndPost = this.validateAndPost.bind(this);
this.pushToDatabase = this.pushToDatabase.bind(this);
this.state = { this.state = {
topicSubjectInput: '', topicSubjectInput: '',
@ -22,8 +21,7 @@ class StartTopic extends Component {
topicSubjectInputEmptySubmit: false, topicSubjectInputEmptySubmit: false,
topicMessageInputEmptySubmit: false, topicMessageInputEmptySubmit: false,
previewEnabled: false, previewEnabled: false,
previewDate: "", previewDate: ""
creatingTopic: false
}; };
} }
@ -37,27 +35,14 @@ class StartTopic extends Component {
} }
this.props.store.dispatch( this.props.store.dispatch(
createTopic(((returnData) => { createTopic(
this.topicIDFetched = returnData.topicID; {
this.postIDFetched = returnData.postID; topicSubject: this.state.topicSubjectInput,
this.pushToDatabase(); topicMessage: this.state.topicMessageInput
this.props.router.push("/topic/" + this.topicIDFetched); }
})) )
); );
this.setState({ this.context.router.push("/home");
'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
});
} }
handleInputChange(event) { handleInputChange(event) {
@ -90,14 +75,6 @@ class StartTopic extends Component {
var previewEditText = this.state.previewEnabled ? "Edit" : "Preview"; var previewEditText = this.state.previewEnabled ? "Edit" : "Preview";
return ( return (
<div> <div>
{/*this.state.creatingTopic && <div id="overlay">
<div id="overlay-content">
<p><i className="fas fa-spinner fa-3x fa-spin"></i></p>
<br/>
{this.transactionProgressText}
</div>
</div>*/
}
{this.state.previewEnabled && {this.state.previewEnabled &&
<NewTopicPreview <NewTopicPreview
date={this.state.previewDate} date={this.state.previewDate}
@ -152,8 +129,6 @@ StartTopic.contextTypes = {
const mapStateToProps = state => { const mapStateToProps = state => {
return { return {
transactions: state.transactions,
transactionStack: state.transactionStack,
orbitDB: state.orbitDB, orbitDB: state.orbitDB,
user: state.user user: state.user
} }

20
src/containers/TopicContainer.js

@ -30,7 +30,25 @@ class Topic extends Component {
} }
async fetchTopicSubject(orbitDBAddress) { 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.props.store.dispatch(hideProgressBar());
this.setState({ this.setState({
'topicSubject': orbitData['subject'], 'topicSubject': orbitData['subject'],

43
src/containers/TransactionsMonitorContainer.js

@ -11,6 +11,8 @@ class RightSideBar extends Component {
super(props); super(props);
this.handleMessageDismiss = this.handleMessageDismiss.bind(this); this.handleMessageDismiss = this.handleMessageDismiss.bind(this);
this.updateTransactions = this.updateTransactions.bind(this);
this.completeWithOrbitInteractions = this.completeWithOrbitInteractions.bind(this);
this.drizzle = context.drizzle; this.drizzle = context.drizzle;
this.transactionsStackIds = []; this.transactionsStackIds = [];
@ -76,7 +78,11 @@ class RightSideBar extends Component {
return (transactionMessages); return (transactionMessages);
} }
componentDidUpdate(){ componentDidUpdate(){ //Maybe change to componentWillReceiveProps()
this.updateTransactions();
}
updateTransactions(){
for (var index = 0; index < this.props.transactionsQueue.length; ++index) { for (var index = 0; index < this.props.transactionsQueue.length; ++index) {
let transaction = this.props.transactionsQueue[index]; let transaction = this.props.transactionsQueue[index];
@ -102,7 +108,7 @@ class RightSideBar extends Component {
if (this.props.transactionStack[this.transactionsStackIds[index]]){ if (this.props.transactionStack[this.transactionsStackIds[index]]){
/* User confirmed the transaction */ /* User confirmed the transaction */
//Gets transaciton's hash //Gets transaction's hash
this.transactionsTxHashes[index] = (this.props this.transactionsTxHashes[index] = (this.props
.transactionStack[this.transactionsStackIds[index]]); .transactionStack[this.transactionsStackIds[index]]);
this.props.store.dispatch(updateTransaction(index, { this.props.store.dispatch(updateTransaction(index, {
@ -129,9 +135,8 @@ class RightSideBar extends Component {
this.setState({ this.setState({
transactionsCompletionTime: transactionsCompletionTimeShallowCopy 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]] } else if (this.props.transactions[this.transactionsTxHashes[index]]
.status === "error"){ .status === "error"){
/* Transaction failed to complete */ /* Transaction failed to complete */
@ -146,13 +151,34 @@ class RightSideBar extends Component {
this.setState({ this.setState({
transactionsCompletionTime: transactionsCompletionTimeShallowCopy transactionsCompletionTime: transactionsCompletionTimeShallowCopy
}); });
if (this.props.transactionsQueue[index].callback){ //TODO handle this gracefully
this.props.transactionsQueue[index].callback(null);
}
} }
} }
} }
} }
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 = { RightSideBar.contextTypes = {
@ -161,6 +187,7 @@ RightSideBar.contextTypes = {
const mapStateToProps = state => { const mapStateToProps = state => {
return { return {
orbitDB: state.orbitDB,
transactionsQueue: state.transactionsQueue.transactions, transactionsQueue: state.transactionsQueue.transactions,
transactions: state.transactions, transactions: state.transactions,
transactionStack: state.transactionStack transactionStack: state.transactionStack

14
src/redux/actions/transactionsMonitorActions.js

@ -11,13 +11,13 @@ export function updateUsername(newUsername, callback){
contract: 'Forum', contract: 'Forum',
method: 'updateUsername', method: 'updateUsername',
params: [newUsername], params: [newUsername],
event: 'UsernameUpdated', event: 'UsernameUpdated'
}, },
callback: callback callback: callback
}; };
} }
export function createTopic(callback){ export function createTopic(userInputs){
return { return {
type: INIT_TRANSACTION, type: INIT_TRANSACTION,
transactionDescriptor: transactionDescriptor:
@ -25,13 +25,13 @@ export function createTopic(callback){
contract: 'Forum', contract: 'Forum',
method: 'createTopic', method: 'createTopic',
params: [], params: [],
event: 'TopicCreated', event: 'TopicCreated'
}, },
callback: callback userInputs: userInputs
}; };
} }
export function createPost(topicID, callback){ export function createPost(topicID, userInputs){
return { return {
type: INIT_TRANSACTION, type: INIT_TRANSACTION,
transactionDescriptor: transactionDescriptor:
@ -39,9 +39,9 @@ export function createPost(topicID, callback){
contract: 'Forum', contract: 'Forum',
method: 'createPost', method: 'createPost',
params: [topicID], params: [topicID],
event: 'PostCreated', event: 'PostCreated'
}, },
callback: callback userInputs: userInputs
}; };
} }

2
src/redux/reducer/transactionsMonitorReducer.js

@ -15,7 +15,7 @@ const transactionsReducer = (state = initialState, action) => {
params: action.transactionDescriptor.params, params: action.transactionDescriptor.params,
event: action.transactionDescriptor.event, event: action.transactionDescriptor.event,
returnData: null, returnData: null,
callback: action.callback userInputs: action.userInputs
}); });
return { return {
transactions: transactionsShallowCopy transactions: transactionsShallowCopy

2
src/util/orbit.js

@ -19,7 +19,7 @@ const ipfsOptions = {
// //
// Websocket: // Websocket:
// '/dns4/ws-star-signal-2.servep2p.com/tcp/443//wss/p2p-websocket-star', // '/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 // Local signal server
//'/ip4/127.0.0.1/tcp/4711/ws/p2p-websocket-star' //'/ip4/127.0.0.1/tcp/4711/ws/p2p-websocket-star'
// //

Loading…
Cancel
Save