React Start Wars API

/*Downloaded from https://www.codeseek.co/-J0hn-/react-start-wars-api-qVxpBv */
body {
  height: 100vh;
  background: black url("http://dodskypict.com/D/Star-Wars-Wallpaper-On-Wallpaper-Hd-4-1920x1080.jpg") no-repeat center center;
  background-size: cover;
}

#app {
  height: 100%;
  display: flex;
  flex-direction: column;
  color: yellow;
}

.tg {
  border-collapse: collapse;
  border-spacing: 0;
  width: 90%;
  margin: 10px auto;
}

.tg td {
  font-family: Arial, sans-serif;
  font-size: 14px;
  padding: 10px 5px;
  border-style: solid;
  border-color: yellow;
  border-width: 3px;
  overflow: hidden;
  word-break: normal;
  color: white;
  font-weight: bold;
  background: black;
}
.tg td:hover {
  background: yellow;
  color: black;
}

.tg th {
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: normal;
  padding: 10px 5px;
  border-style: solid;
  border-width: 3px;
  border-color: yellow;
  overflow: hidden;
  word-break: normal;
  font-weight: bold;
  color: white;
}

.tg .tg-yw4l {
  vertical-align: top;
}

#pagination {
  margin-top: auto;
  padding: 10px;
  display: flex;
  justify-content: center;
}
#pagination button {
  margin: 0 5px;
  padding: 5px 10px;
  background: none;
  border: solid 2px yellow;
  color: yellow;
  font-weight: bold;
  cursor: pointer;
}
#pagination button:hover {
  background: yellow;
  color: black;
}

/*Downloaded from https://www.codeseek.co/-J0hn-/react-start-wars-api-qVxpBv */
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

// const LoaderHOC = (Component) => {
//   return class LoaderHOC extends React.Component {
//     render() {
//       return this.props.characters.length === 0 ? 
//         <div style={{color: 'yellow'}}>Loading...</div> : 
//         <Component {...props} />
//     }
//   }
// }

var App = function (_React$Component) {
  _inherits(App, _React$Component);

  function App(props) {
    _classCallCheck(this, App);

    var _this = _possibleConstructorReturn(this, (App.__proto__ || Object.getPrototypeOf(App)).call(this, props));

    _this.fetchData = function (link) {
      fetch(link).then(function (resp) {
        return resp.json();
      }).then(function (data) {
        _this.setState({
          characters: data.results,
          prev: data.previous,
          next: data.next
        });
        console.log(data);
      });
    };

    _this.moreResults = function (link) {
      _this.fetchData("" + link);
    };

    _this.state = {
      characters: []
    };
    return _this;
  }

  _createClass(App, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      this.fetchData('https://swapi.co/api/people/?page=1');
    }
  }, {
    key: "render",
    value: function render() {
      var _this2 = this;

      var _state = this.state,
          characters = _state.characters,
          next = _state.next,
          prev = _state.prev;

      return React.createElement(
        "div",
        { id: "app" },
        React.createElement(Characters, { characters: characters }),
        React.createElement(
          "div",
          { id: "pagination" },
          prev && React.createElement(
            "button",
            { onClick: function onClick() {
                return _this2.moreResults(prev);
              } },
            "Prev"
          ),
          next && React.createElement(
            "button",
            { onClick: function onClick() {
                return _this2.moreResults(next);
              } },
            "Next"
          )
        )
      );
    }
  }]);

  return App;
}(React.Component);

var Characters = function Characters(_ref) {
  var characters = _ref.characters;
  return React.createElement(
    "table",
    { className: "tg" },
    React.createElement(
      "tr",
      null,
      React.createElement(
        "th",
        { "class": "tg-031e" },
        "Name"
      ),
      React.createElement(
        "th",
        { "class": "tg-yw4l" },
        "Height"
      ),
      React.createElement(
        "th",
        { "class": "tg-yw4l" },
        "Mass"
      )
    ),
    characters.length === 0 ? React.createElement(
      "div",
      null,
      "Loading..."
    ) : characters.map(function (character) {
      return React.createElement(CharacterInfo, { character: character });
    })
  );
};

var CharacterInfo = function CharacterInfo(_ref2) {
  var _ref2$character = _ref2.character,
      name = _ref2$character.name,
      height = _ref2$character.height,
      mass = _ref2$character.mass;
  return React.createElement(
    "tr",
    null,
    React.createElement(
      "td",
      { "class": "tg-yw4l" },
      name
    ),
    React.createElement(
      "td",
      { "class": "tg-yw4l" },
      height
    ),
    React.createElement(
      "td",
      { "class": "tg-yw4l" },
      mass
    )
  );
};

Characters.propTypes = {
  characters: PropTypes.array.isRequired
};

CharacterInfo.propTypes = {
  name: PropTypes.string.isRequired,
  height: PropTypes.number.isRequired
};

ReactDOM.render(React.createElement(App, null), document.getElementById('app'));