{"size": 1875, "ext": "js", "max_stars_repo_path": "exercises/higher-order-components/lecture/src/NetworkStatus.js", "max_stars_repo_name": "FormidableLabs/react-europe-workshop", "max_stars_repo_stars_event_min_datetime": "2018-05-26T06:35:39.000Z", "max_stars_repo_stars_event_max_datetime": "2018-11-07T17:13:27.000Z", "max_issues_repo_path": "exercises/higher-order-components/lecture/src/NetworkStatus.js", "max_issues_repo_name": "kipkurui/react-europe-workshop", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "exercises/higher-order-components/lecture/src/NetworkStatus.js", "max_forks_repo_name": "kipkurui/react-europe-workshop", "max_forks_repo_forks_event_min_datetime": "2018-05-14T21:19:15.000Z", "max_forks_repo_forks_event_max_datetime": "2018-05-25T18:05:13.000Z"}
{"max_stars_count": 16, "max_issues_count": null, "max_forks_count": 13, "avg_line_length": 24.0384615385, "max_line_length": 62, "alphanum_fraction": 0.6496}
import React, { Component } from "react";

export class Online extends Component {
  static ConnectionSpeed = () => {
    const { downlink } = navigator.connection;
    return <span>~{downlink}Mbp/s</span>;
  };

  static ConnectionType = () => {
    const { effectiveType } = navigator.connection;
    return <span>{effectiveType.toUpperCase()}</span>;
  };
  state = {
    isOnline: navigator.onLine
  };

  componentDidMount() {
    window.addEventListener("online", this.handleOnline);
    window.addEventListener("offline", this.handleOffline);
  }

  componentWillUnount() {
    window.removeEventListener("online", this.handleOnline);
    window.removeEventListener("offline", this.handleOffline);
  }

  handleOnline = () => {
    this.setState({ isOnline: true });
  };

  handleOffline = () => {
    this.setState({ isOnline: false });
  };

  render() {
    const { isOnline } = this.state;
    return isOnline ? this.props.children : null;
  }
}

export class Offline extends Component {
  static ConnectionSpeed = () => {
    const { downlink } = navigator.connection;
    return <span>~{downlink}Mbp/s</span>;
  };

  static ConnectionType = () => {
    const { effectiveType } = navigator.connection;
    return <span>{effectiveType.toUpperCase()}</span>;
  };
  state = {
    isOnline: navigator.onLine
  };

  componentDidMount() {
    window.addEventListener("online", this.handleOnline);
    window.addEventListener("offline", this.handleOffline);
  }

  componentWillUnount() {
    window.removeEventListener("online", this.handleOnline);
    window.removeEventListener("offline", this.handleOffline);
  }

  handleOnline = () => {
    this.setState({ isOnline: true });
  };

  handleOffline = () => {
    this.setState({ isOnline: false });
  };

  render() {
    const { isOnline } = this.state;
    return isOnline ? null : this.props.children;
  }
}
