Basic login flow

src/components/AuthMenu.js

@@ -93,7 +93,8 @@ class AuthMenu extends Component {
       this.props.userLogin(this.state.username, this.state.password)
       .then(res => {
         this.setState(state => ({
-          auth_menu_visible: false
+          auth_menu_visible: false,
+          where_in_auth_menu: "loggedIn"
         }))
         this.props.close()
       }
@@ -184,6 +185,15 @@ class AuthMenu extends Component {
             <button onClick={this.handleCreateAccount} className="fluid ui positive button">Create Account!</button>
           </div>
         )
+      case 'loggedIn':
+        return (
+          <div className="ui menu dropdown" style={{display: "inline"}}>
+            <div className="ui left icon input">
+              <i className="edit icon"></i>
+            <button onClick={this.handleMakePost} className="fluid ui positive button">Create Post!</button>
+            </div>
+          </div>
+        )
       default:
         return null;
     }
@@ -196,13 +206,7 @@ class AuthMenu extends Component {
   }
 }
 
-const mapStateToProps = (state) => {
-    return {
-        username: state.username,
-    };
-}
-
 export default connect(
-    mapStateToProps,
+    null,
     { userLogin, loadCookieToState }
 )(AuthMenu);

src/components/NavBar.js

@@ -9,6 +9,7 @@ class NavBar extends Component {
     this.state = {
         logged_in: false,
         auth_menu_visible: false,
+        user_or_login: 'Login'
     }
     this.handleLoginDropdown = this.handleLoginDropdown.bind(this)
   }
@@ -27,7 +28,7 @@ class NavBar extends Component {
          <NavLink to="/posts/" className='item' activeClassName='active'>Posts</NavLink>
          <NavLink to="/about/" className='item' activeClassName='active'>About</NavLink>
          <div onClick={this.handleLoginDropdown} className='item ui button dropdown'>
-           Login
+           {this.state.user_or_login} 
            <i className="dropdown icon"></i>
            <AuthMenu auth_menu_visible={this.state.auth_menu_visible} close={ () => this.setState({auth_menu_visible: false})}></AuthMenu>
          </div>