LeaderBoard react

/*Downloaded from https://www.codeseek.co/vanderdrilu/leaderboard-react-XYrOKQ */
table.tablesorter {
  font-family: arial;
  background-color: #CDCDCD;
  margin: 10px 0pt 15px;
  font-size: 8pt;
  width: 100%;
  text-align: left;
}

table.tablesorter thead tr th, table.tablesorter tfoot tr th {
  background-color: #e6EEEE;
  border: 1px solid #FFF;
  font-size: 8pt;
  padding: 4px;
}

table.tablesorter thead tr .header {
  background-image: url("https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.30.4/css/images/black-unsorted.gif");
  background-repeat: no-repeat;
  background-position: center right;
  cursor: pointer;
}

table.tablesorter tbody td {
  color: #3D3D3D;
  padding: 4px;
  background-color: #FFF;
  vertical-align: top;
}

table.tablesorter tbody tr.odd td {
  background-color: #F0F0F6;
}

table.tablesorter thead tr .headerSortUp {
  background-image: url("https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.30.4/css/images/black-asc.gif");
}

table.tablesorter thead tr .headerSortDown {
  background-image: url("https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.30.4/css/images/black-desc.gif");
}

table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
  background-color: #8dbdd8;
}

img {
  width: 32px;
  height: 32px;
}

a {
  text-decoration: none;
  color: inherit;
}

a:hover {
  border-color: greenyellow;
}

.shadowbox {
  box-shadow: -2px 2px 8px rgba(0, 0, 0, 0.6), -3px 4px 12px rgba(0, 0, 0, 0.5), -4px 6px 15px rgba(0, 0, 0, 0.4), -5px 8px 18px rgba(0, 0, 0, 0.3);
  margin: 50px;
  padding: 5px;
}

.boxshadowinset {
  box-shadow: inset -1px -3px 20px 5px rgba(0, 0, 0, 0.75);
}

h3 {
  text-shadow: 1px 1px 5px 5px white;
  padding: 8px;
  font-family: 'Courier New', Courier, monospace;
  width: 100%;
  height: 50px;
  border: 1px solid black;
  background-color: darkslateblue;
  text-align: center;
}

/*Downloaded from https://www.codeseek.co/vanderdrilu/leaderboard-react-XYrOKQ */
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; }

var App = function (_Component) {
  _inherits(App, _Component);

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

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

    _this.state = { data: [],
      baseurl: "https://www.freecodecamp.org/" };
    return _this;
  }

  _createClass(App, [{
    key: "loadData",
    value: function loadData() {
      var _this2 = this;

      fetch('https://fcctop100.herokuapp.com/api/fccusers/top/alltime?Origin=*').then(function (response) {
        return response.json();
      }).then(function (data) {
        _this2.setState({ data: data });
      }).catch(function (err) {
        return console.error(_this2.props.url, err.toString());
      });
    }
  }, {
    key: "componentDidMount",
    value: function componentDidMount() {
      this.loadData();
    }
  }, {
    key: "render",
    value: function render() {
      var _state = this.state,
          data = _state.data,
          baseurl = _state.baseurl;

      return React.createElement(
        "div",
        { className: "App" },
        React.createElement("header", { className: "App-header" }),
        React.createElement(
          "div",
          { className: "container shadowbox" },
          React.createElement(
            "h3",
            { className: " tablecolor boxshadowinset" },
            "Leaderboard"
          ),
          React.createElement(
            "table",
            { "class": " table-hover tablesorter", id: "myTable" },
            React.createElement(
              "thead",
              null,
              React.createElement(
                "tr",
                null,
                React.createElement(
                  "th",
                  null,
                  "#"
                ),
                React.createElement(
                  "th",
                  null,
                  "Campername"
                ),
                React.createElement(
                  "th",
                  null,
                  "Points in past 30 days"
                ),
                React.createElement(
                  "th",
                  null,
                  "All time points "
                )
              )
            ),
            React.createElement(
              "tbody",
              null,
              data.map(function (object, i) {

                var element = data[i];

                var username = element.username;

                var x = 0;
                x = Number(i) + 1;

                var userurl = { baseurl: baseurl } + { username: username };
                return React.createElement(
                  "tr",
                  { key: i },
                  React.createElement(
                    "td",
                    { className: "{sorter: false}" },
                    React.createElement(
                      "p",
                      null,
                      " ",
                      x,
                      " "
                    ),
                    " "
                  ),
                  React.createElement(
                    "td",
                    null,
                    React.createElement("img", { src: element.img, alt: "" }),
                    " ",
                    React.createElement(
                      "a",
                      { href: userurl, target: "_blank" },
                      element.username,
                      "  "
                    )
                  ),
                  React.createElement(
                    "td",
                    null,
                    " ",
                    element.recent
                  ),
                  React.createElement(
                    "td",
                    null,
                    " ",
                    element.alltime
                  )
                );
              })
            )
          )
        )
      );
    }
  }]);

  return App;
}(Component);

ReactDOM.render(React.createElement(App, null), document.getElementById('root'));
/*$(document).ready(function () {
            setTimeout(function () {init();},2000);
            function init(){
           
            $.tablesorter.addWidget({
              id: "numbering",
              format: function(table) {
                  var c = table.config;
                  $("tr:visible", table.tBodies[0]).each(function(i) {
                      $(this).find('td').eq(0).text(i + 1);
                  });
              }
            });
            
            $("table").tablesorter({
              // prevent first column from being sortable
              headers: {
                  0: { sorter: false }
              },
              // apply custom widget
              widgets: ['numbering']
            });
            }
            });*/