📈 Week 2: werken met een api

Wat was de opdracht?

Werk met een externe API en vraag data uit met een endpoint om vervolgens iets te doen met deze data.

Wat wilde ik maken?

Ik heb gekozen om met de Spotify API te werken omdat ik deze erg interessant vond. Ook heb ik gekozen om dit met React te gaan maken omdat ik meer wil leren over dit framework mede door me werk.

Hoe heb ik dit gedaan?

Ik heb gebruik gemaakt van classes in javascript om functies te importeren of exporten dus als er bijvoorbeeld staat spotifyProvider of cleanDataFunction dan staat die functie in een andere file. Op deze pagina ligt ik dat nog kort toe.

Ik vind het makkelijker om code uit te leggen door het in de code te vertellen aan de hand van comments dus in de snippet hieronder de toelichting:

  const getData = async () => {
    if (count === 0) setLoading(true);
    try {
      // voer de functie getCurrentPlayingTrack uit in spotifyProvider
      await spotifyProvider
        .getCurrentPlayingTrack(hash.access_token)
        .then((player) => {
          // als dit gelukt is zet het resultaat in de state maar set deze nog niet
          state.player = player;
          console.log(player);
          // geef de player door naar de volgende functie
          return player;
        })
        .then((res) => {
          // voer de volgende spotifyProvider functie uit om artist data op te halen, geef de artist id van de player mee
          const artist = spotifyProvider.getArtistData(hash.access_token, res.item.artists[0].id);
          return artist;
        })
        .then((data) => {
          // om de followers netjes te tonen voer een functie uit om dit met komma's te seperaten
          let clean = cleanDataFunctions.integerSeperator(data);
          return clean;
        })
        .then((res) => {
          // reken het percentage uit van populariteit
          let percentage = cleanDataFunctions.getPopularityPercentage(res);
          return percentage;
        })
        .then((percentage) => {
          // op basis van het percentage voeg de data toe aan het object in woorden
          let popularity = cleanDataFunctions.getPopularityEmotion(percentage);
          // voeg de popularity toe aan de state maar set deze nog niet
          state.artist = popularity;
          return popularity;
        });

      if (state.artist) {
        // deze functie had in de chain moeten staan, echter had ik een error en geen tijd meer om dit te fixen dus dan maar zo
        const relatedArtists = await spotifyProvider.getRelatedArtists(
          hash.access_token,
          state.player.item.artists[0].id
        );
        // voeg toe aan state maar set nog niet
        state.relatedArtists = relatedArtists;
      }
      // set state met de nieuwe objecten zodat we dit kunnen laten zien in de dom
      setState(state);
      if (!loading) setLoading(false);
    } catch (err) {
      // if error setError in state zodat je dit kan tonen in de dom
      setError(err.message);
      setLoading(false);
    }
  };

SpotifyProvider

// voor nu 1 api call aangezien de rest hetzelfde is
class SpotifyProvider {
  // spotify API calls
  async getCurrentPlayingTrack(token) {
    let response = await fetch("https://api.spotify.com/v1/me/player", {
      method: "get",
      headers: {
        Accept: "application/json, text/plain, */*",
        "Content-Type": "application/json",
        Authorization: "Bearer " + token,
      },
    });
    // if statuscode 200 return response ander null, hierdoor laat de frontend ook niks zien omdat het null is en de components dan niet
    // renderen
    if (response.ok) return response.json();
    else return null;
  }
}

export default new SpotifyProvider();

DataCleanupFunctions

class CleanDataFunctions {
  integerSeperator(data) {
    // normale duizendtal notatie geen idee hoe het heet maar het word 1,000,000 ipv 1000000
    data.followers.total = data.followers.total.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,");
    return data;
  }

  getPopularityPercentage(data) {
    // reken percentage uit
    const percentage = (data.popularity * 100) / 100;
    data.percentage = percentage;
    return data;
  }

  getPopularityEmotion(data) {
    // switch case om te zeggen hoe bekend iemand is in woorden
    const x = data.popularity;
    switch (true) {
      case x < 20:
        data.emotion = "Niet bekend 🥺";
        break;
      case x >= 20 && x <= 40:
        data.emotion = "Niet zo bekend 🙂";
        break;
      case x >= 40 && x <= 60:
        data.emotion = "Gemiddeld bekend 😊";
        break;
      case x >= 60 && x <= 80:
        data.emotion = "Best bekend 😄";
        break;
      case x >= 80 && x <= 100:
        data.emotion = "Mega bekend 🤩";
        break;
      default:
        data.emotion = "Laden...";
        break;
    }
    return data;
  }
}

export default new CleanDataFunctions();

Resultaat

Dit is het uiteindelijke resultaat van de tweede week: Week 2: resultaat

🪲 Bekende bugs

• Bij sommige mensen kan hij de playback niet terughalen, ik weet nog niet of dit met de scopes van Spotify te maken heeft en ik dus meer rechten moet vragen als mensen inloggen of dat het een bug is uit mijn code, ik denk eerder het laatste helaas.
• Wanneer een artiest geen profielfoto heeft bugged de app en kan hij bepaalde data niet laden.
• Wanneer een artiest niet bekend is kan hij geen relevante artiesten vinden om te laten zien, hier bugged hij ook.

Wishlist

Er waren nog een paar dingetjes die ik graag had willen doen namelijk:

• Per kleur een kolom maken zodat je een soort bar chart krijgt.
• De functie colorToHex refactoren aangezien ik nu een nieuw object maak en deze return, volgensmij kan dit netter door me for loop te returnen maar dat weet ik niet zeker