mirror of https://gitlab.com/ecentrics/concordia
16 changed files with 794 additions and 193 deletions
@ -0,0 +1,14 @@ |
|||||
|
import React from 'react'; |
||||
|
|
||||
|
const LoadingSpinner = (props) => { |
||||
|
return( |
||||
|
<div className={"center-in-parent" + (props.className ? props.className : "")} |
||||
|
style={props.style ? props.style : []}> |
||||
|
<p> |
||||
|
<i className="fas fa-spinner fa-3x fa-spin"></i> |
||||
|
</p> |
||||
|
</div> |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
export default LoadingSpinner; |
||||
@ -1,45 +1,107 @@ |
|||||
import React from 'react'; |
import { drizzleConnect } from 'drizzle-react'; |
||||
|
import React, { Component } from 'react'; |
||||
|
import { Link } from 'react-router'; |
||||
|
import PropTypes from 'prop-types'; |
||||
|
|
||||
import Post from './Post'; |
import Post from './Post'; |
||||
|
|
||||
const posts1 = [ |
import epochTimeConverter from '../helpers/EpochTimeConverter' |
||||
{avatarUrl: "https://i.makeagif.com/media/4-18-2018/8BLiwJ.gif", |
|
||||
username: "Apostolof", |
const contract = "Forum"; |
||||
subject: "Some very important topic of discussion2!", |
const contractMethod = "getPost"; |
||||
date: "May 25, 2018, 11:11:11", |
|
||||
postIndex: "1", |
class PostList extends Component { |
||||
postContent: "# We have markdown!!!\n \n**Oh yes we do!!** \n*ITALICS* \n \n```Some code```", |
constructor(props, context) { |
||||
id: 2, |
super(props); |
||||
address: 0x083c41ea13af6c2d5aaddf6e73142eb9a7b00183 |
|
||||
}, |
this.fetchPost = this.fetchPost.bind(this); |
||||
{avatarUrl: "", |
|
||||
username: "", |
this.drizzle = context.drizzle; |
||||
subject: "Some very important topic of discussion!", |
this.dataKeys = []; |
||||
date: "May 20, 2018, 10:10:10", |
this.postsData = new Array(parseInt(this.props.postIDs.length, 10)).fill(undefined); |
||||
postIndex: "", |
this.orbitPostsData = new Array(parseInt(this.props.postIDs.length, 10)).fill(undefined); |
||||
postContent: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur, natus ipsum minima.", |
this.orbitPostsDataFetchStatus = new Array(parseInt(this.props.postIDs.length, 10)).fill("pending"); |
||||
id: 1, |
|
||||
address: 0x5fe3062B24033113fbf52b2b75882890D7d8CA54 |
for (var i = 0; i < this.props.postIDs.length; ++i){ |
||||
} |
this.dataKeys[i] = this.drizzle.contracts[contract].methods[contractMethod] |
||||
]; |
.cacheCall(this.props.postIDs[i]); |
||||
|
} |
||||
const PostList = (props) => { |
} |
||||
const posts = posts1.map((post) => |
|
||||
<Post avatarUrl={post.avatarUrl} |
async fetchPost(index) { |
||||
username={post.username} |
/*const fullAddress = this.postsData[postID][1]; |
||||
subject={post.subject} |
const store = await this.props.orbitDB.orbitdb.keyvalue(JSON.stringify(fullAddress)); |
||||
date={post.date} |
await store.load(); |
||||
postIndex={post.postIndex} |
var som = store.get(JSON.stringify(postID)); |
||||
postContent={post.postContent} |
this.orbitPostsData[postID] = som['subject']; |
||||
id={post.id} |
this.orbitPostsDataFetchStatus[postID] = "fetched";*/ |
||||
key={post.id} |
|
||||
address={post.address}/> |
var som = this.props.orbitDB.postsDB.get(this.props.postIDs[index]); |
||||
|
this.orbitPostsData[index] = som; |
||||
|
this.orbitPostsDataFetchStatus[index] = "fetched"; |
||||
|
} |
||||
|
|
||||
|
render (){ |
||||
|
const posts = this.postsData.map((post, index) => { |
||||
|
if (post) { |
||||
|
return ( |
||||
|
<Link to={"/topic/" + post[4] + "/" + |
||||
|
((this.orbitPostsData[index] !== undefined) ? this.orbitPostsData[index].subject + "/" + |
||||
|
this.props.postIDs[index] : "")} |
||||
|
key={index}> |
||||
|
<Post post={{ |
||||
|
avatarUrl: post.avatarUrl, |
||||
|
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 |
||||
|
}} |
||||
|
id={index} |
||||
|
key={index}/> |
||||
|
</Link> |
||||
); |
); |
||||
|
} else { |
||||
|
return ( |
||||
|
<Post post={null} |
||||
|
id={index} |
||||
|
key={index}/> |
||||
|
); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
return ( |
return ( |
||||
<div className="posts-list"> |
<div className="posts-list"> |
||||
{posts} |
{posts} |
||||
</div> |
</div> |
||||
); |
); |
||||
|
} |
||||
|
|
||||
|
componentWillReceiveProps() { |
||||
|
for (var i = 0; i < this.props.postIDs.length; ++i){ |
||||
|
if (this.postsData[i] === undefined) { |
||||
|
let currentDrizzleState = this.drizzle.store.getState(); |
||||
|
let dataFetched = (currentDrizzleState.contracts[contract][contractMethod])[this.dataKeys[i]]; |
||||
|
if (dataFetched){ |
||||
|
this.postsData[i] = dataFetched.value; |
||||
|
} |
||||
|
} else if (!this.orbitPostsData[i] && this.orbitPostsDataFetchStatus[i] === "pending") { |
||||
|
this.orbitPostsDataFetchStatus[i] = "fetching"; |
||||
|
this.fetchPost(i); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
PostList.contextTypes = { |
||||
|
drizzle: PropTypes.object |
||||
|
}; |
||||
|
|
||||
|
const mapStateToProps = state => { |
||||
|
return { |
||||
|
user: state.user, //Needed!!
|
||||
|
orbitDB: state.orbitDB, |
||||
|
} |
||||
}; |
}; |
||||
|
|
||||
export default PostList; |
export default drizzleConnect(PostList, mapStateToProps); |
||||
@ -0,0 +1,12 @@ |
|||||
|
const epochTimeConverter = (timestamp) => { |
||||
|
var timestampDate = new Date(0); |
||||
|
timestampDate.setUTCSeconds(timestamp); |
||||
|
return ((timestampDate.getMonth() + 1) + " " |
||||
|
+ timestampDate.getDate() + ", " |
||||
|
+ timestampDate.getFullYear() + ", " |
||||
|
+ timestampDate.getHours() + ":" |
||||
|
+ timestampDate.getMinutes() + ":" |
||||
|
+ timestampDate.getSeconds()) |
||||
|
} |
||||
|
|
||||
|
export default epochTimeConverter; |
||||
Loading…
Reference in new issue