text: import React, { Component } from "react";
  import { connect } from "react-redux";
  import { Link, withRouter } from "react-router-dom";
  import { TiArrowBackOutline } from "react-icons/ti/index";
  import { TiHeartOutline } from "react-icons/ti/index";
  import { TiHeartFullOutline } from "react-icons/ti/index";
  
  import { formatTweet, formatDate } from "./../utils/helpers";
  import { handleToggleTweet } from "./../actions/tweets";
  
  class Tweet extends Component {
    toParent = (e, id) => {
      e.preventDefault();
      console.log(e, id);
      this.props.history.push(`/tweet/${id}`);
    };
  
    handleLike = e => {
      e.preventDefault();
      console.log(e);
  
      const { dispatch, tweet, authedUser } = this.props;
  
      dispatch(
        handleToggleTweet({
          id: tweet.id,
          hasLiked: tweet.hasLiked,
          authedUser
        })
      );
    };
  
    render() {
      const { tweet } = this.props;
  
      if (tweet === null) {
        return <p>Tweet does not exist</p>;
      }
  
      const { name, avatar, timestamp, text, hasLiked, likes, replies, parent, id } = tweet;
  
      return (
        <Link to={`/tweet/${id}`} className="tweet">
          <img src={avatar} alt={`Avatar for ${name}`} className="avatar" />
          <div className="tweet-info">
            <div>
              <span>{name}</span>
              <div>{formatDate(timestamp)}</div>
              {parent && (
                <button className="replying-to" onClick={e => this.toParent(e, parent.id)}>
                  Replying to @{parent.author}
                </button>
              )}
              <p>{text}</p>
            </div>
  
            <div className="tweet-icons">
              <span>
                <TiArrowBackOutline className="tweet-icon" />
                <span>{replies > 0 && replies}</span>
              </span>
              <button className="heart-button" onClick={this.handleLike}>
                {hasLiked ? (
                  <TiHeartFullOutline color="#e0245e" className="tweet-icon" />
                ) : (
                  <TiHeartOutline className="tweet-icon" />
                )}
              </button>
              <span>{likes > 0 && likes}</span>
            </div>
          </div>
        </Link>
      );
    }
  }
  
  function mapStateToProps({ authedUser, users, tweets }, { id }) {
    const tweet = tweets[id];
    const parentTweet = tweet ? tweets[tweet.replyingTo] : null;
    return {
      authedUser,
      tweet: tweet ? formatTweet(tweet, users[tweet.author], authedUser, parentTweet) : null
    };
  }
  
  export default withRouter(connect(mapStateToProps)(Tweet));
  