{"size": 1067, "ext": "js", "max_stars_repo_path": "src/components/Apps/Picolabs/CloudAgent/Connections/Ping.js", "max_stars_repo_name": "Picolab/ManifoldRewrite", "max_stars_repo_stars_event_min_datetime": "2019-10-09T19:28:18.000Z", "max_stars_repo_stars_event_max_datetime": "2021-02-16T13:26:22.000Z", "max_issues_repo_path": "src/components/Apps/Picolabs/CloudAgent/Connections/Ping.js", "max_issues_repo_name": "Picolab/Manifold", "max_issues_repo_issues_event_min_datetime": "2017-08-15T17:56:53.000Z", "max_issues_repo_issues_event_max_datetime": "2021-12-02T20:07:47.000Z", "max_forks_repo_path": "src/components/Apps/Picolabs/CloudAgent/Connections/Ping.js", "max_forks_repo_name": "Picolab/ManifoldRewrite", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 4, "max_issues_count": 179, "max_forks_count": null, "avg_line_length": 24.25, "max_line_length": 103, "alphanum_fraction": 0.5885660731}
import React from 'react';
import "./Ping.css"

class Ping extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      pingStatus: this.props.pingStatus
    };
  }

  static getDerivedStateFromProps(nextProps, prevState){
    if(nextProps.pingStatus !== prevState.pingStatus && nextProps.pingStatus !== ""){
      return { pingStatus: nextProps.pingStatus};
    }
    else return null;
  }

  displayPingButton() {
    return (
      <div style={{"display": "grid"}}>
        <button className="pingAgentButton" onClick={this.props.sendTrustPing}>Send Trust Ping</button>
      </div>
    )
  }

  render() {
    return (
      <div className="pingContainer">
        <h4>Ping Status</h4>
        <div className="textStickOut">
          Last Session Response:
          <span style={{"color": (this.state.pingStatus === "connected") ? "green" : "red" }}>
            {' '}{this.state.pingStatus.toUpperCase()}
          </span>
        </div>
        { this.displayPingButton() } {' '}
      </div>
    );
  }
}

export default Ping;
