mirror of https://gitlab.com/ecentrics/concordia
Browse Source
# Conflicts: # src/components/Post.js # src/components/PostList.js # src/components/ProfileInformation.js # src/components/Topic.js # src/containers/ProfileContainer.jsdevelop
12 changed files with 502 additions and 548 deletions
@ -1,86 +1,127 @@ |
|||||
import React from 'react'; |
import React, { Component } from 'react'; |
||||
import { Link, withRouter } from 'react-router'; |
import { Link, withRouter } from 'react-router'; |
||||
import UserAvatar from 'react-user-avatar'; |
import { drizzleConnect } from 'drizzle-react'; |
||||
|
import PropTypes from 'prop-types'; |
||||
|
|
||||
import TimeAgo from 'react-timeago'; |
import TimeAgo from 'react-timeago'; |
||||
|
import epochTimeConverter from '../helpers/EpochTimeConverter' |
||||
|
import UserAvatar from 'react-user-avatar'; |
||||
import ReactMarkdown from 'react-markdown'; |
import ReactMarkdown from 'react-markdown'; |
||||
|
|
||||
const Post = (props) => { |
class Post extends Component { |
||||
return ( |
constructor(props, context) { |
||||
props.post !== null |
super(props); |
||||
? <div className="post"> |
|
||||
<div className="row"> |
this.fetchPost = this.fetchPost.bind(this); |
||||
<div className="col s1"> |
|
||||
<Link to={"/profile/" + props.post.userAddress + "/" + props.post.username} |
this.orbitPostData = { |
||||
onClick={(event) => {event.stopPropagation()}}> |
content: "", |
||||
<UserAvatar |
subject: "" |
||||
size="50" |
}; |
||||
className="inline user-avatar" |
this.orbitPostDataFetchStatus = "pending"; |
||||
src={props.post.avatarUrl} |
} |
||||
name={props.post.username}/> |
|
||||
</Link> |
async fetchPost(postID) { |
||||
</div> |
this.orbitPostDataFetchStatus = "fetching"; |
||||
<div className="col s11"> |
|
||||
<div> |
var som = this.props.orbitDB.postsDB.get(postID); |
||||
<div className="stretch-space-between"> |
if (som){ |
||||
<strong><span>{props.post.username}</span></strong> |
this.orbitPostData = som; |
||||
<span className="grey-text text-darken-2"> |
} |
||||
<TimeAgo date={props.post.date}/>, #{props.post.postIndex} |
this.orbitPostDataFetchStatus = "fetched"; |
||||
</span> |
} |
||||
</div> |
|
||||
<div className="stretch-space-between"> |
render(){ |
||||
<strong><span>{props.post.subject}</span></strong> |
let avatarView = (this.props.blockchainData[0].returnData |
||||
</div> |
? <UserAvatar |
||||
<div> |
size="40" |
||||
{props.post.postContent |
className="inline user-avatar" |
||||
? <ReactMarkdown source={props.post.postContent} /> |
src={this.props.avatarUrl} |
||||
: <p style={{color: 'grey'}}>Post content...</p> |
name={this.props.blockchainData[0].returnData[2]}/> |
||||
} |
: <div className="user-avatar" style={{width: "40px"}}></div> |
||||
</div> |
); |
||||
</div> |
|
||||
</div> |
return ( |
||||
</div> |
<div className="post" |
||||
<div className="row"> |
onClick={() => { this.context.router.push("/topic/" |
||||
<div className="post-meta grey-text text-darken-2"> |
+ this.props.blockchainData[0].returnData[4] + "/" |
||||
<i className="material-icons waves-effect waves-teal circle"> |
+ this.props.postID)}}> |
||||
keyboard_arrow_up |
<div className="row"> |
||||
</i> |
<div className="col s1"> |
||||
<span>8</span> |
{this.props.blockchainData[0].returnData !== null |
||||
<i className="material-icons waves-effect waves-teal circle"> |
?<Link to={"/profile/" + this.props.blockchainData[0].returnData[1] |
||||
keyboard_arrow_down |
+ "/" + this.props.blockchainData[0].returnData[2]} |
||||
</i> |
onClick={(event) => {event.stopPropagation()}}> |
||||
<i className="material-icons waves-effect waves-teal circle" onClick={props.onHrefClick}> |
{avatarView} |
||||
link |
</Link> |
||||
</i> |
:avatarView |
||||
</div> |
} |
||||
</div> |
</div> |
||||
<div className="divider"></div> |
<div className="col s11"> |
||||
</div> |
<div> |
||||
: <div className="post grey-text text-darken-2"> |
<div className="stretch-space-between"> |
||||
<div className="row"> |
<strong><span className={this.props.blockchainData[0].returnData !== null ? "" : "grey-text"}}> |
||||
<div className="col s1"> |
{this.props.blockchainData[0].returnData !== null |
||||
<div></div> |
?this.props.blockchainData[0].returnData[2] |
||||
</div> |
:"Username" |
||||
<div className="col s11"> |
} |
||||
<div> |
</span></strong> |
||||
<div className="stretch-space-between"> |
<span className="grey-text text-darken-2"> |
||||
<span></span> |
{this.props.blockchainData[0].returnData !== null && |
||||
</div> |
<TimeAgo date={epochTimeConverter(this.props.blockchainData[0].returnData[3])}/> |
||||
<div className="stretch-space-between"> |
}, #{this.props.postIndex} |
||||
<span>Subject:</span> |
</span> |
||||
</div> |
</div> |
||||
<div> |
<div className="stretch-space-between"> |
||||
<p>Post content...</p> |
<strong><span className={this.orbitPostData.subject ? "" : "grey-text"}> |
||||
</div> |
Subject: {this.orbitPostData.subject} |
||||
</div> |
</span></strong> |
||||
</div> |
</div> |
||||
</div> |
<div> |
||||
<div className="row"> |
{this.orbitPostData.content |
||||
<div className="post-meta"> |
? <ReactMarkdown source={this.orbitPostData.content} /> |
||||
</div> |
: <p className="grey-text">Post content...</p> |
||||
|
} |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div className="row"> |
||||
|
<div className="post-meta grey-text text-darken-2"> |
||||
|
<i className="material-icons waves-effect waves-teal circle"> |
||||
|
keyboard_arrow_up |
||||
|
</i> |
||||
|
<span>8</span> |
||||
|
<i className="material-icons waves-effect waves-teal circle"> |
||||
|
keyboard_arrow_down |
||||
|
</i> |
||||
|
<i className="material-icons waves-effect waves-teal circle" onClick={props.onHrefClick}> |
||||
|
link |
||||
|
</i> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div className="divider"></div> |
||||
</div> |
</div> |
||||
<div className="divider"></div> |
); |
||||
</div> |
} |
||||
); |
|
||||
|
componentDidUpdate() { |
||||
|
if (this.props.blockchainData[0].status === "success" |
||||
|
&& this.orbitPostDataFetchStatus === "pending") { |
||||
|
this.fetchPost(this.props.postID); |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
Post.contextTypes = { |
||||
|
router: PropTypes.object |
||||
|
}; |
||||
|
|
||||
|
const mapStateToProps = state => { |
||||
|
return { |
||||
|
user: state.user, |
||||
|
orbitDB: state.orbitDB |
||||
|
} |
||||
}; |
}; |
||||
|
|
||||
export default withRouter(Post); |
export default drizzleConnect(withRouter(Post), mapStateToProps); |
||||
@ -1,116 +1,35 @@ |
|||||
import { drizzleConnect } from 'drizzle-react'; |
import React from 'react'; |
||||
import React, { Component } from 'react'; |
|
||||
import PropTypes from 'prop-types'; |
|
||||
|
|
||||
import Post from './Post'; |
import WithBlockchainData from './WithBlockchainData'; |
||||
|
|
||||
import epochTimeConverter from '../helpers/EpochTimeConverter' |
|
||||
|
|
||||
const contract = "Forum"; |
|
||||
const contractMethod = "getPost"; |
|
||||
|
|
||||
class PostList extends Component { |
|
||||
constructor(props, context) { |
|
||||
super(props); |
|
||||
|
|
||||
this.fetchPost = this.fetchPost.bind(this); |
|
||||
this.onHrefHandle = this.onHrefHandle.bind(this); |
|
||||
|
|
||||
this.drizzle = context.drizzle; |
|
||||
this.dataKeys = []; |
|
||||
this.postsData = new Array(parseInt(this.props.postIDs.length, 10)).fill(undefined); |
|
||||
this.orbitPostsData = new Array(parseInt(this.props.postIDs.length, 10)).fill(undefined); |
|
||||
this.orbitPostsDataFetchStatus = new Array(parseInt(this.props.postIDs.length, 10)).fill("pending"); |
|
||||
|
|
||||
for (var i = 0; i < this.props.postIDs.length; ++i){ |
|
||||
this.dataKeys[i] = this.drizzle.contracts[contract].methods[contractMethod] |
|
||||
.cacheCall(this.props.postIDs[i]); |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
async fetchPost(index) { |
|
||||
/*const fullAddress = this.postsData[postID][1]; |
|
||||
const store = await this.props.orbitDB.orbitdb.keyvalue(JSON.stringify(fullAddress)); |
|
||||
await store.load(); |
|
||||
var som = store.get(JSON.stringify(postID)); |
|
||||
this.orbitPostsData[postID] = som['subject']; |
|
||||
this.orbitPostsDataFetchStatus[postID] = "fetched";*/ |
|
||||
|
|
||||
var som = this.props.orbitDB.postsDB.get(this.props.postIDs[index]); |
import Post from './Post'; |
||||
this.orbitPostsData[index] = som; |
|
||||
this.orbitPostsDataFetchStatus[index] = "fetched"; |
|
||||
} |
|
||||
|
|
||||
onHrefHandle(postIndex){ |
|
||||
this.context.router.push("/topic/" + this.postsData[postIndex][4] + "/" + |
|
||||
((this.orbitPostsData[postIndex] !== undefined) |
|
||||
? this.orbitPostsData[postIndex].subject + "/" + this.props.postIDs[postIndex] |
|
||||
: "")) |
|
||||
} |
|
||||
|
|
||||
render (){ |
|
||||
const posts = this.postsData.map((post, index) => { |
|
||||
if (post) { |
|
||||
return ( |
|
||||
<div key={index}> |
|
||||
<Post post={{ |
|
||||
avatarUrl:post.avatarUrl, |
|
||||
userAddress:post[1], |
|
||||
username:post[2], |
|
||||
subject:(this.orbitPostsData[index] !== undefined) && |
|
||||
this.orbitPostsData[index].subject, |
|
||||
date:epochTimeConverter(post[3]), |
|
||||
postIndex:index, |
|
||||
postContent:(this.orbitPostsData[index] !== undefined) && |
|
||||
this.orbitPostsData[index].content, |
|
||||
}} |
|
||||
onHrefClick={() => this.onHrefHandle(index)} |
|
||||
id={index} |
|
||||
key={index}/> |
|
||||
</div> |
|
||||
); |
|
||||
} else { |
|
||||
return ( |
|
||||
<Post post={null} |
|
||||
id={index} |
|
||||
key={index}/> |
|
||||
); |
|
||||
} |
|
||||
}); |
|
||||
|
|
||||
|
const PostList = (props) => { |
||||
|
const posts = props.postIDs.map((postID, index) => { |
||||
return ( |
return ( |
||||
<div className="posts-list"> |
<WithBlockchainData |
||||
{posts} |
component={Post} |
||||
</div> |
callsInfo={[{ |
||||
|
contract: 'Forum', |
||||
|
method: 'getPost', |
||||
|
params: [postID] |
||||
|
}]} |
||||
|
avatarUrl={""} |
||||
|
postIndex={index} |
||||
|
postID={postID} |
||||
|
key={postID} |
||||
|
/> |
||||
); |
); |
||||
} |
}); |
||||
|
|
||||
componentWillReceiveProps() { |
return ( |
||||
for (var i = 0; i < this.props.postIDs.length; ++i){ |
<div className="posts-list"> |
||||
if (this.postsData[i] === undefined) { |
{props.recentToTheTop |
||||
let currentDrizzleState = this.drizzle.store.getState(); |
?posts.slice(0).reverse() |
||||
let dataFetched = (currentDrizzleState.contracts[contract][contractMethod])[this.dataKeys[i]]; |
:posts |
||||
if (dataFetched){ |
|
||||
this.postsData[i] = dataFetched.value; |
|
||||
} |
|
||||
} else if (!this.orbitPostsData[i] && this.orbitPostsDataFetchStatus[i] === "pending") { |
|
||||
this.orbitPostsDataFetchStatus[i] = "fetching"; |
|
||||
this.fetchPost(i); |
|
||||
} |
} |
||||
} |
</div> |
||||
} |
); |
||||
}; |
|
||||
|
|
||||
PostList.contextTypes = { |
|
||||
drizzle: PropTypes.object, |
|
||||
router: PropTypes.object |
|
||||
}; |
|
||||
|
|
||||
const mapStateToProps = state => { |
|
||||
return { |
|
||||
user: state.user, //Needed!!
|
|
||||
orbitDB: state.orbitDB |
|
||||
} |
|
||||
}; |
}; |
||||
|
|
||||
export default drizzleConnect(PostList, mapStateToProps); |
export default PostList; |
||||
@ -1,38 +1,91 @@ |
|||||
import React from 'react'; |
import React, { Component } from 'react'; |
||||
|
import { Link } from 'react-router'; |
||||
|
import { drizzleConnect } from 'drizzle-react'; |
||||
|
|
||||
import TimeAgo from 'react-timeago'; |
import TimeAgo from 'react-timeago'; |
||||
|
import epochTimeConverter from '../helpers/EpochTimeConverter' |
||||
|
|
||||
const Topic = (props) => { |
class Topic extends Component { |
||||
return ( |
constructor(props){ |
||||
props.topic !== null |
super(props); |
||||
? <div className="topic card white hoverable"> |
|
||||
<div className="card-content"> |
this.fetchSubject = this.fetchSubject.bind(this); |
||||
<div className="topic-subject"> |
|
||||
<p style={{color: props.topic.topicSubject ? "" : "grey"}}> |
this.topicSubject = null; |
||||
{props.topic.topicSubject ? props.topic.topicSubject : "Subject"} |
this.topicSubjectFetchStatus = "pending"; |
||||
</p> |
} |
||||
</div> |
|
||||
<hr/> |
async fetchSubject(topicID) { |
||||
<div className="topic-meta"> |
this.topicSubjectFetchStatus = "fetching"; |
||||
<p className="no-margin">{props.topic.topicStarter}</p> |
|
||||
<p className="no-margin">Number of replies: {props.topic.numberOfReplies}</p> |
if (this.props.blockchainData[0].returnData[1] === this.props.user.address) { |
||||
<p className="topic-date grey-text darken-3">Started <TimeAgo date={props.topic.date}/></p> |
let som = this.props.orbitDB.topicsDB.get(topicID); |
||||
</div> |
this.topicSubject = som['subject']; |
||||
</div> |
this.topicSubjectFetchStatus = "fetched"; |
||||
</div> |
} else { |
||||
: <div className="topic card white hoverable"> |
const fullAddress = "/orbitdb" + this.props.blockchainData[0].returnData[0] + "/topics"; |
||||
<div className="card-content grey-text"> |
const store = await this.props.orbitDB.orbitdb.keyvalue(fullAddress); |
||||
<div className="topic-subject"> |
|
||||
<p>Subject</p> |
/*store.events.on('replicated', () => { |
||||
</div> |
const result = store.iterator({ limit: -1 }).collect().map(e => e.payload.value) |
||||
<hr/> |
console.log(result.join('\n')) |
||||
<div className="topic-meta"> |
})*/ |
||||
<p className="no-margin">Username</p> |
|
||||
<p className="no-margin">Number of replies: </p> |
await store.load(); |
||||
<p className="topic-date grey-text darken-3"></p> |
let som = store.get(topicID); |
||||
|
this.topicSubject = som['subject']; |
||||
|
this.topicSubjectFetchStatus = "fetched"; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
render(){ |
||||
|
return ( |
||||
|
<Link to={"/topic/" + this.props.topicID}> |
||||
|
<div className="topic card white hoverable"> |
||||
|
<div className="card-content"> |
||||
|
<div className={"topic-subject" + (this.topicSubject ? "" : "grey-text")}> |
||||
|
<p> |
||||
|
{topic.topicSubject !== null ? topic.topicSubject : "Subject"} |
||||
|
</p> |
||||
|
</div> |
||||
|
<hr/> |
||||
|
<div className="topic-meta"> |
||||
|
<p className={"no-margin" + (this.topicSubject ? "" : "grey-text")}> |
||||
|
{this.props.blockchainData[0].returnData !== null |
||||
|
?this.props.blockchainData[0].returnData[2] |
||||
|
:"Username" |
||||
|
} |
||||
|
</p> |
||||
|
<p className={"no-margin" + (this.props.blockchainData[0].returnData !== null ? "" : "grey-text")}> |
||||
|
{"Number of replies: " + (this.props.blockchainData[0].returnData !== null |
||||
|
?this.props.blockchainData[0].returnData[4].length |
||||
|
:"") |
||||
|
} |
||||
|
</p> |
||||
|
<p className="topic-date grey-text darken-3"> |
||||
|
Started {this.props.blockchainData[0].returnData !== null && |
||||
|
<TimeAgo date={epochTimeConverter(this.props.blockchainData[0].returnData[3])}/> |
||||
|
} |
||||
|
</p> |
||||
|
</div> |
||||
</div> |
</div> |
||||
</div> |
</div> |
||||
</div> |
</Link> |
||||
); |
); |
||||
|
} |
||||
|
|
||||
|
componentDidUpdate(){ |
||||
|
if (this.props.blockchainData[0].returnData !== null && this.topicSubjectFetchStatus === "pending") { |
||||
|
this.fetchSubject(this.props.topicID); |
||||
|
} |
||||
|
} |
||||
}; |
}; |
||||
|
|
||||
export default Topic; |
const mapStateToProps = state => { |
||||
|
return { |
||||
|
user: state.user, |
||||
|
orbitDB: state.orbitDB |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
export default drizzleConnect(Topic, mapStateToProps); |
||||
@ -1,118 +1,30 @@ |
|||||
import { drizzleConnect } from 'drizzle-react'; |
import React from 'react'; |
||||
import React, { Component } from 'react'; |
|
||||
import { Link } from 'react-router'; |
|
||||
import PropTypes from 'prop-types'; |
|
||||
|
|
||||
import Topic from './Topic'; |
import WithBlockchainData from './WithBlockchainData'; |
||||
|
|
||||
import epochTimeConverter from '../helpers/EpochTimeConverter' |
|
||||
|
|
||||
const contract = "Forum"; |
|
||||
const contractMethod = "getTopic"; |
|
||||
|
|
||||
class TopicList extends Component { |
|
||||
constructor(props, context) { |
|
||||
super(props); |
|
||||
|
|
||||
this.fetchSubject = this.fetchSubject.bind(this); |
|
||||
|
|
||||
this.drizzle = context.drizzle; |
|
||||
this.dataKeys = []; |
|
||||
this.topicsData = new Array(parseInt(this.props.topicIDs.length, 10)).fill(undefined); |
|
||||
this.topicsSubjects = []; |
|
||||
this.topicsSubjectsFetchStatus = new Array(parseInt(this.props.topicIDs.length, 10)).fill("pending"); |
|
||||
|
|
||||
for (var i = 0; i < this.props.topicIDs.length; ++i){ |
|
||||
this.dataKeys[i] = this.drizzle.contracts[contract].methods[contractMethod] |
|
||||
.cacheCall(this.props.topicIDs[i]); |
|
||||
} |
|
||||
|
|
||||
this.state = { |
|
||||
}; |
|
||||
} |
|
||||
|
|
||||
async fetchSubject(topicIndex) { |
import Topic from './Topic'; |
||||
if (this.topicsData[topicIndex][1] === this.props.user.address){ |
|
||||
let som =this.props.orbitDB.topicsDB.get(this.props.topicIDs[topicIndex]); |
|
||||
this.topicsSubjects[topicIndex] = som['subject']; |
|
||||
this.topicsSubjectsFetchStatus[topicIndex] = "fetched"; |
|
||||
} else { |
|
||||
const fullAddress = "/orbitdb" + this.topicsData[topicIndex][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(this.props.topicIDs[topicIndex]); |
|
||||
this.topicsSubjects[topicIndex] = som['subject']; |
|
||||
this.topicsSubjectsFetchStatus[topicIndex] = "fetched"; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
render (){ |
|
||||
const topics = this.topicsData.map((topic, index) => { |
|
||||
if (topic){ |
|
||||
return ( |
|
||||
<Link to={"/topic/" + this.props.topicIDs[index] + "/" + |
|
||||
((this.topicsSubjects[index] !== undefined) ? this.topicsSubjects[index] + "/" + 0 : "")} |
|
||||
key={index}> |
|
||||
<Topic topic={{ |
|
||||
topicSubject: ((this.topicsSubjects[index] !== undefined) && this.topicsSubjects[index]), |
|
||||
topicStarter: topic[2], |
|
||||
numberOfReplies: topic[4].length, |
|
||||
date: epochTimeConverter(topic[3]) |
|
||||
}} |
|
||||
id={index} |
|
||||
key={index}/> |
|
||||
</Link> |
|
||||
); |
|
||||
} else { |
|
||||
return ( |
|
||||
<Link to={"/topic/" + this.props.topicIDs[index] + "/"} |
|
||||
key={index}> |
|
||||
<Topic topic={null} |
|
||||
id={index} |
|
||||
key={index}/> |
|
||||
</Link> |
|
||||
); |
|
||||
} |
|
||||
}); |
|
||||
|
|
||||
|
const TopicList = (props) => { |
||||
|
const topics = props.topicIDs.map((topicID) => { |
||||
return ( |
return ( |
||||
<div className="topics-list"> |
<WithBlockchainData |
||||
{topics.slice(0).reverse()} |
component={Topic} |
||||
</div> |
callsInfo={[{ |
||||
|
contract: 'Forum', |
||||
|
method: 'getTopic', |
||||
|
params: [topicID] |
||||
|
}]} |
||||
|
topicID={topicID} |
||||
|
key={topicID} |
||||
|
/> |
||||
); |
); |
||||
} |
}); |
||||
|
|
||||
componentWillReceiveProps() { |
|
||||
for (var i = 0; i < this.props.topicIDs.length; ++i){ |
|
||||
if (this.topicsData[i] === undefined) { |
|
||||
let currentDrizzleState = this.drizzle.store.getState(); |
|
||||
let dataFetched = (currentDrizzleState.contracts[contract][contractMethod])[this.dataKeys[i]]; |
|
||||
if (dataFetched){ |
|
||||
this.topicsData[i] = dataFetched.value; |
|
||||
} |
|
||||
} else if (!this.topicsSubjects[i] && this.topicsSubjectsFetchStatus[i] === "pending") { |
|
||||
this.topicsSubjectsFetchStatus[i] = "fetching"; |
|
||||
this.fetchSubject(i); |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
}; |
|
||||
|
|
||||
TopicList.contextTypes = { |
|
||||
drizzle: PropTypes.object |
|
||||
}; |
|
||||
|
|
||||
const mapStateToProps = state => { |
return ( |
||||
return { |
<div className="topics-list"> |
||||
user: state.user, //Needed!!
|
{topics.slice(0).reverse()} |
||||
orbitDB: state.orbitDB, |
</div> |
||||
} |
); |
||||
}; |
}; |
||||
|
|
||||
export default drizzleConnect(TopicList, mapStateToProps); |
export default TopicList; |
||||
@ -0,0 +1,81 @@ |
|||||
|
import React, { Component } from 'react'; |
||||
|
import PropTypes from 'prop-types'; |
||||
|
|
||||
|
class WithBlockchainData extends Component { |
||||
|
constructor(props, context) { |
||||
|
super(props); |
||||
|
|
||||
|
{ |
||||
|
let {component, callsInfo, ...rest } = this.props; |
||||
|
this.component = component; |
||||
|
this.callsInfo = callsInfo; |
||||
|
this.forwardedProps = rest; |
||||
|
} |
||||
|
|
||||
|
this.checkContractUpdates = this.checkContractUpdates.bind(this); |
||||
|
|
||||
|
this.drizzle = context.drizzle; |
||||
|
this.dataKeys = []; |
||||
|
this.blockchainData = this.callsInfo.map((call) => { |
||||
|
return ({ |
||||
|
callInfo: call, |
||||
|
status: "initialized", |
||||
|
returnData: null |
||||
|
}); |
||||
|
}); |
||||
|
|
||||
|
for (var i = 0; i < this.callsInfo.length; ++i){ |
||||
|
this.dataKeys[i] = this.drizzle |
||||
|
.contracts[this.callsInfo[i].contract] |
||||
|
.methods[this.callsInfo[i].method] |
||||
|
.cacheCall(...(this.callsInfo[i].params)); |
||||
|
this.blockchainData[i].status = "pending"; |
||||
|
} |
||||
|
|
||||
|
this.state = { |
||||
|
transactionsState: new Array(this.callsInfo.length).fill("pending") |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
render() { |
||||
|
let {component, callsInfo, ...rest } = this.props; |
||||
|
return ( |
||||
|
<this.component blockchainData={this.blockchainData} {...rest}/> |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
componentDidMount() { |
||||
|
this.intervalChecker = setInterval(this.checkContractUpdates, 10); //HOWMUCHMUCHACHO???
|
||||
|
} |
||||
|
|
||||
|
componentWillUnmount() { |
||||
|
clearInterval(this.intervalChecker); |
||||
|
} |
||||
|
|
||||
|
checkContractUpdates() { |
||||
|
for (var i = 0; i < this.callsInfo.length; ++i){ |
||||
|
let currentDrizzleState = this.drizzle.store.getState(); |
||||
|
if (this.state.transactionsState[i] === "pending") { |
||||
|
let dataFetched = (currentDrizzleState |
||||
|
.contracts[this.callsInfo[i].contract][this.callsInfo[i].method][this.dataKeys[i]]); |
||||
|
if (dataFetched){ |
||||
|
this.blockchainData[i].returnData = dataFetched.value; |
||||
|
this.blockchainData[i].status = "success"; |
||||
|
this.setState((prevState) => ({ |
||||
|
transactionsState: [ |
||||
|
...prevState.transactionsState.slice(0, i), |
||||
|
"success", |
||||
|
...prevState.transactionsState.slice(i) |
||||
|
] |
||||
|
})); |
||||
|
} |
||||
|
} //TODO cover errors!!
|
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
WithBlockchainData.contextTypes = { |
||||
|
drizzle: PropTypes.object |
||||
|
}; |
||||
|
|
||||
|
export default WithBlockchainData; |
||||
Loading…
Reference in new issue