Lift username, password, and login status up to root element

week_8/examples/login_and_post/static/script.js

 class Login extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      display: true,
-    }
-  }
-
-  login() {
-    const username = document.getElementById("username").value;
-    const password = document.getElementById("password").value;
-
-    this.setState({display: false});
-
-    fetch("http://127.0.0.1:5000/api/login", {
-      method: 'POST',
-      headers: {'Content-Type': 'application/json'},
-      body: JSON.stringify({username: username, password: password})
-    }).then((response) => {
-      if(response.status == 200) {
-        response.json().then((data) => {
-          window.localStorage.setItem("journal_session_token", data.session_token);
-          document.getElementById("compose").setAttribute('style', 'display: block;');
-          document.getElementById("posts").setAttribute('style', 'display: block;');
-        });
-
-      } else {
-        console.log(response.status);
-        this.logout();
-      }
-    }).catch((response) =>{
-      console.log(response);
-      this.logout();
-    })
-  }
-
-  logout() {
-    window.localStorage.removeItem("journal_session_token");
-    this.setState({display: true});
-    document.getElementById("compose").setAttribute('style', 'display: none;');
-    document.getElementById("posts").setAttribute('style', 'display: none;');
-  }
-
   render() {
-    if(this.state.display) {
+    if(!this.props.isLoggedIn) {
       return (
         <div>
           <h2>Login</h2>
           <div className="login_form">
             <label htmlFor="username">Username</label>
-            <input id="username"></input>
+            <input id="username" value={this.props.username} onChange={this.props.usernameHandler}></input>
             <label htmlFor="password">Password</label>
-            <input id="password" type="password"></input>
-            <button className="form_button" onClick={() => this.login()}>
+            <input id="password" type="password" value={this.props.password} onChange={this.props.passwordHandler}></input>
+            <button className="form_button" onClick={this.props.loginHandler}>
               Submit
             </button>
           </div>
@@ -61,7 +19,7 @@ class Login extends React.Component {
     else {
       return (
         <div className="logout_button">
-          <button onClick={() => {this.logout()}}>
+          <button onClick={this.props.logoutHandler}>
             Logout
           </button>
         </div>
@@ -147,30 +105,79 @@ class Posts extends React.Component {
   }
 }
 
-Posts.propTypes = {
-  posts: window.PropTypes.array
-}
+
 
 class Journal extends React.Component {
+  constructor(props) {
+    super(props);
+    this.usernameHandler = this.usernameHandler.bind(this);
+    this.passwordHandler = this.passwordHandler.bind(this);
+    this.loginHandler = this.loginHandler.bind(this);
+    this.logoutHandler = this.logoutHandler.bind(this);
+    this.state = {
+      posts: [],
+      username: 'trevor',
+      password: '',
+      isLoggedIn: false,
+      session_token: null,
+    }
+  }
+
+  usernameHandler(e) {
+    this.setState({username: e.target.value});
+  }
+
+  passwordHandler(e) {
+    this.setState({password: e.target.value});
+  }
 
   loginHandler() {
-    // TODO: update this call by managing State
+    const username = this.state.username;
+    const password = this.state.password;
+
+    fetch("http://127.0.0.1:5000/api/login", {
+      method: 'POST',
+      headers: {'Content-Type': 'application/json'},
+      body: JSON.stringify({username: username, password: password})
+    }).then((response) => {
+      if(response.status == 200) {
+        response.json().then((data) => {
+          window.localStorage.setItem("journal_session_token", data.session_token);
+          this.setState({isLoggedIn: true});
+        });
+
+      } else {
+        console.log(response.status);
+        this.logoutHandler();
+      }
+    }).catch((response) =>{
+      console.log(response);
+      this.logoutHandler();
+    })
   }
 
   logoutHandler() {
-    // TODO: replace this call by managing State
+    window.localStorage.removeItem("journal_session_token");
+    this.setState({isLoggedIn: false});
   }
 
   render() {
+    const isLoggedIn = this.state.isLoggedIn;
+
     return (
       <div className="weblog">
         <TitleBar />
         <Login
+          isLoggedIn={this.state.isLoggedIn}
+          username={this.state.username}
+          password={this.state.password}
+          usernameHandler={this.usernameHandler}
+          passwordHandler={this.passwordHandler}
           loginHandler={this.loginHandler}
           logoutHandler={this.logoutHandler}
         />
-        <Compose />
-        <Posts />
+        {isLoggedIn && <Compose />}
+        {isLoggedIn && <Posts />}
       </div>
     );
   }