<!DOCTYPE html>
<html>

<head>
  <title>Adres IP</title>
</head>

<body>
  <div id="container">

  </div>
</body>

</html>
---

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import IPAddressContainer from "./IPAddressContainer";

var destination = document.querySelector("#container");

ReactDOM.render(
  <div>
    <IPAddressContainer/>
  </div>,
  destination
);
---

import React, { Component } from "react";

class IPAddressContainer extends Component {
  render() {
    return (
      <p>Jeszcze nic nie ma!</p>
    );
  }
}

export default IPAddressContainer;
---

var xhr;

class IPAddressContainer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      ip_address: "..."
    };

    this.processRequest = this.processRequest.bind(this);
  }

  componentDidMount() {
    xhr = new XMLHttpRequest();
    xhr.open("GET", "https://ipinfo.io/json", true);
    xhr.send();

    xhr.addEventListener("readystatechange", this.processRequest, false);
  }

  processRequest() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      var response = JSON.parse(xhr.responseText);

      this.setState({
        ip_address: response.ip
      });
    }
  }

  render() {
    return (
      <div>Nothing yet!</div>
    );
  }
};
---

      <div>{this.state.ip_address}</div>
---

import React, { Component } from "react";

class IPAddress extends Component {
  render() {
    return (
      <div>
        Hej!
      </div>
    );
  }
}

export default IPAddress;
---

      <div>
        <h1>{this.props.ip}</h1>
        <p>(To jest Twój adres IP... chyba :P).</p>
      </div>
---

h1 {
  font-family: sans-serif;
  text-align: center;
  padding-top: 140px;
  font-size: 60px;
  margin: -15px;
}
p {
  font-family: sans-serif;
  color: #907400;
  text-align: center;
}
---

