Blockstack application React Final Status

React Final Status

render() {
  const { handleSignOut } = this.props;
  const { person } = this.state;
  const { username } = this.state;

  return (
    !isSignInPending() && person ?
    <div className="container">
      <div className="row">
        <div className="col-md-offset-3 col-md-6">
          <div className="col-md-12">

            <div className="avatar-section">
              <img src={ person.avatarUrl() ? person.avatarUrl() : avatarFallbackImage } className="img-rounded avatar" id="avatar-image" />

              <div className="username">
                <h1>
                  <span id="heading-name">{ person.name() ? person.name() : 'Nameless Person' }</span>
                </h1>
                <span>{username}</span>
                {this.isLocal() &&
                  <span>&nbsp;|&nbsp;
                    <a onClick={ handleSignOut.bind(this) }>(Logout)</a>
                  </span>
                }
              </div>
            </div>
          </div>

          <div className="col-md-12 posts">
            { this.state.isLoading && <span>Loading...</span> }
            { this.state.posts.map((post) => (
              <div className="post" key={post.id}>
                {post.text}
              </div>
              )
            )}
          </div>

          {this.isLocal() &&
            <div className="new-status">
              <div className="col-md-12">
                <textarea className="input-status" value={this.state.newPost} onChange={e => this.handleNewPostChange(e)} placeholder="Enter a post" />
              </div>
              <div className="col-md-12 text-right">
                <button className="btn btn-primary btn-lg" onClick={e => this.handleNewPostSubmit(e)}>Submit a post</button>
              </div>
            </div>
          }
        </div>
      </div>
    </div> : null
  );
}