step 15: create List component to render posts

app/js/components/App.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import { CreatePost } from './CreatePost';
+import { List } from './List';
 
 export class App extends Component {
 
@@ -8,6 +9,7 @@ export class App extends Component {
       <React.Fragment>
         <h1>DReddit</h1>
         <CreatePost />
+        <List />
       </React.Fragment>
     )
   }

app/js/components/List.js

@@ -0,0 +1,47 @@
+import React, { Component } from 'react';
+import EmbarkJS from 'Embark/EmbarkJS';
+import DReddit from 'Embark/contracts/Dreddit';
+import { Post } from './Post';
+
+export class List extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      posts: []
+    };
+  }
+
+  async componentDidMount() {
+    const totalPosts = await DReddit.methods.numPosts().call();
+
+    let list = [];
+
+    for (let i = 0; i < totalPosts; i++) {
+      const post = DReddit.methods.posts(i).call();
+      list.push(post);
+    }
+
+    list = await Promise.all(list);
+    list = list.map((post, index) => {
+      post.id = index;
+      return post;
+    });
+
+    this.setState({ posts: list });
+  }
+
+  render() {
+    return (<React.Fragment>
+      {this.state.posts.map(post => {
+        return (<Post 
+          key={post.id}
+          description={post.description}
+          creationDate={post.creationDate}
+          owner={post.owner}
+          />)
+      })}
+      </React.Fragment>
+    )
+  }
+}

contracts/DReddit.sol

@@ -69,5 +69,9 @@ contract DReddit {
     Post storage post = posts[_postId];
     return uint8(post.voters[msg.sender]);
   }
+
+  function numPosts() public view returns (uint) {
+    return posts.length;
+  }
 }