twitch api (bluebird) working

index.html

<a href="#" class='hi' onClick="$('.hidden').removeClass('hidden')">show all</a> / <a href="#" onClick="$('.online').addClass('hidden');$('.offline').removeClass('hidden')">offline</a> / <a href="#" onClick="$('.offline').addClass('hidden');$('.online').removeClass('hidden')">online</a>
<p></p>
<div class="yo"></div>

script.babel

console.clear();

var html = "";
var users = [
  "ESL_SC2",
  "OgamingSC2",
  "cretetion",
  "freecodecamp",
  "storbeck",
  "habathcx",
  "RobotCaleb",
  "noobs2ninjas",
  "aslezak",
  "brunofin"
];

class TwitchUser {
  constructor(name) {
    this.url = `https://wind-bow.gomix.me/twitch-api`;
    this.users = `${this.url}/users/${name}`;
    this.streams = `${this.url}/streams/${name}`;
    this.name = "";
    this.channel = "";
    this.stream = "";
    this.status = "";
    this.online = "";
    this.unavailable = 0;
  }

  getUserInfo(user) {
    return fetch(this.users)
      .then(res => res.json())
      .then(json => {
        //console.log(json)
        if (json.name == null) {
          this.name = user;
          this.online = "unavailable";
          this.unavailable = 1;
         // console.log(this);
          return this;
        } else {
          return this.name = json.name;
        }
      })
      .catch(err => console.log(err));
  }

  getStreamsInfo() {
    return fetch(this.streams)
      .then(res => res.json())
      .then(json => this.stream = json.stream)
      .catch(err => console.log(err));
  }

  isOnline() {
    let self = this;
    return new Promise(function(resolve, reject) {
      if (self.online == "unavailable") {
        self.online = "offline unavailable";
        resolve(self);
      } else if (self.stream == null) {
        self.online = "offline";
        self.status = "";
        resolve(self);
      } else {
        //console.log(self.stream.channel);
        self.online = `online`;
        self.status = `and playing ${self.stream.game} with ${self.stream.viewers} viewers`;
        resolve(self);
      }
    });
  }
}

Promise.map(users, user => {
  let myUser = new TwitchUser(user);

  myUser
    .getUserInfo(user)
    .then(user => myUser.getStreamsInfo())
    .then(user => myUser.isOnline())
    .then(
      user => html += `<div class='user ${myUser.online}'>
                <span class='name'>${myUser.name}</span> 
                is <span class='${myUser.online}'>${myUser.online}</span>
                ${myUser.status}
                </div>`
    )
    .then(myHtml => $(".yo").html(myHtml))
    .catch(err => console.log(err));
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.4.7/bluebird.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=fetch"></script>

style.css

.name {
  font-weight: 700;
}

span.online {
  color: green
}

span.offline {
  color: red
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

twitch-api-bluebird-working.markdown

twitch api (bluebird) working

A Pen by Andy Slezak on CodePen.

License.