{"size": 2395, "ext": "js", "max_stars_repo_path": "client/src/components/contact/Contact.js", "max_stars_repo_name": "muhzi4u/express--mongodb-starter", "max_stars_repo_stars_event_min_datetime": "2019-05-13T01:30:14.000Z", "max_stars_repo_stars_event_max_datetime": "2020-04-09T14:17:37.000Z", "max_issues_repo_path": "client/src/components/contact/Contact.js", "max_issues_repo_name": "muhzi4u/express--mongodb-starter", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "client/src/components/contact/Contact.js", "max_forks_repo_name": "muhzi4u/express--mongodb-starter", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 2, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 26.6111111111, "max_line_length": 80, "alphanum_fraction": 0.5215031315}
import React, { Component } from "react";
import PropTypes from "prop-types";
import DefaultImage from "../../assets/default-image.png";
import "./Contact.css";
class Contact extends Component {
  deleteContact() {
    this.props.deleteContact(this.props);
  }
  editContact() {
    this.props.editContact(this.props);
  }
  viewContact() {
    this.props.viewContact(this.props);
  }
  renderProfilePic() {
    if (this.props.profilePic) {
      return (
        <img
          src={this.props.profilePic}
          width="100"
          height="100"
          alt="profilepic"
        />
      );
    }
    return <img src={DefaultImage} width="100" height="100" alt="profilepic" />;
  }
  renderActionButtons() {
    if (this.props.showActions) {
      return (
        <div className="row">
          <div className="col s4 button-container">
            <a
              className="waves-effect waves-light btn"
              onClick={this.viewContact.bind(this)}
            >
              <i className="material-icons left">info</i>
            </a>
          </div>

          <div className="col s4 button-container">
            <a
              className="waves-effect waves-light btn"
              onClick={this.editContact.bind(this)}
            >
              <i className="material-icons left">edit</i>
            </a>
          </div>
          <div className="col s4 button-container">
            <a
              className="waves-effect waves-light btn"
              // onClick={props.deleteContact(props)}
              onClick={this.deleteContact.bind(this)}
            >
              <i className="material-icons left">delete</i>
            </a>
          </div>
        </div>
      );
    } else {
      return <div />;
    }
  }
  render() {
    return (
      <div className="contact">
        <div className="row main-area ">
          <div className="col s4">{this.renderProfilePic()}</div>
          <div className="col s8">
            <div className="row">
              <p>
                {this.props.firstName} {this.props.secondName}
              </p>
              <p>{this.props.email} </p>
            </div>
            {this.renderActionButtons()}
          </div>
        </div>
      </div>
    );
  }
}
Contact.propTypes = {
  title: PropTypes.string,
  firstName: PropTypes.string,
  secondName: PropTypes.string
};

export default Contact;
