{/* Match Card DEFINITION */}
class SH_MatchCard extends React.Component{
  constructor(props){
    super(props);
    /* Won't take it because probably will be empty */
    this.state = {avatar: "", username: "", profile:{}}
  }

  componentDidUpdate(prevProps){
    if(prevProps !== this.props){
      if(this.props.profile != undefined){
        this.setState({
                        avatar: "/static/usrimg/" + this.props.profile.user_profile.picture,
                        username: this.props.profile.username,
                        profile: this.props.profile.user_profile
                      });
      }
    }
  }

  render(){
    if(!jQuery.isEmptyObject(this.state.profile)){
      return (
            <div className="searchCard">
              {/* Render avatar */}
              <div className="currentTheirAvatar">
                <img src={this.state.avatar} />
              </div>

              <div className="container">
                <h3>{this.state.username}</h3>
                <div className="row">
                  <div className="col-md-2">

                  </div>
                  <div className="col-s-2">
                  <GenderProp gender={this.state.profile.body.gender} />
                  </div>

                  <div className="col-s-2">
                  <BodyProp body={this.state.profile.body.body} />
                  </div>

                  <div className="col-s-2">
                  <AgeProp dob={this.state.profile.body.dob} />
                  </div>

                  <div className="col-md-2">

                  </div>
                </div>

                <div className="about">
                  {this.state.profile.about[0].aboutme}
                </div>

              </div>

            </div>
          );
        }else{
          return "Processing...";
        }
    }
}