Move posts state up to root element

week_8/examples/login_and_post/static/script.js

@@ -67,28 +67,9 @@ class Compose extends React.Component {
 }
 
 class Posts extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      posts: [],
-    }
-  }
-
-  refresh(){
-    const session_token = window.localStorage.getItem("journal_session_token");
-    fetch("http://127.0.0.1:5000/api/post", {
-      method: 'POST',
-      headers: {'Content-Type': 'application/json'},
-      body: JSON.stringify({session_token: session_token})
-    })
-    .then((response) => response.json())
-    .then((data) => {
-      this.setState({posts: data});
-    });
-  }
 
   render() {
-    const posts = this.state.posts.map((post) =>
+    const posts = this.props.posts.map((post) =>
       <div key={post.id} id={"post_" + post.id}>
         <h3>{post.title}</h3>
         <div>{post.body}</div>
@@ -98,7 +79,7 @@ class Posts extends React.Component {
     return (
       <div className="posts" id="posts">
         <h2>Posts</h2>
-        <button onClick={() => this.refresh()}>Refresh</button>
+        <button onClick={this.props.getPosts}>Refresh</button>
         {posts}
       </div>
     );
@@ -114,6 +95,7 @@ class Journal extends React.Component {
     this.passwordHandler = this.passwordHandler.bind(this);
     this.loginHandler = this.loginHandler.bind(this);
     this.logoutHandler = this.logoutHandler.bind(this);
+    this.getPosts = this.getPosts.bind(this);
     this.state = {
       posts: [],
       username: 'trevor',
@@ -161,6 +143,19 @@ class Journal extends React.Component {
     this.setState({isLoggedIn: false});
   }
 
+  getPosts() {
+    const session_token = window.localStorage.getItem("journal_session_token");
+    fetch("http://127.0.0.1:5000/api/post", {
+      method: 'POST',
+      headers: {'Content-Type': 'application/json'},
+      body: JSON.stringify({session_token: session_token})
+    })
+    .then((response) => response.json())
+    .then((data) => {
+      this.setState({posts: data});
+    });
+  }
+
   render() {
     const isLoggedIn = this.state.isLoggedIn;
 
@@ -177,7 +172,7 @@ class Journal extends React.Component {
           logoutHandler={this.logoutHandler}
         />
         {isLoggedIn && <Compose />}
-        {isLoggedIn && <Posts />}
+        {isLoggedIn && <Posts posts={this.state.posts} getPosts={this.getPosts} />}
       </div>
     );
   }