Les 4: Lifecycle & Container Components

Tijdens deze oefeningenreeks bouw je een applicatie waarmee je de meest populaire artikels van The New York Times kan lezen. Je oefent op het gebruik van Axios, het lezen van JSON-data, lifecycle hooks en het container-presentational patroon.

Oefening 0: Voorbereiding

Ga naar https://developer.nytimes.com/ en vraag een gratis API key aan. Kies nadat je een account aangemaakt hebt en ingelogd bent voor ‘Apps’ in de menubalk.

Fig 1: NYT Developer Account

Maak een nieuwe applicatie aan en zorg er voor dat je de ‘Top Stories API’ activeert.

Fig 2: NYT Developer Account - App aanmaken

Nu kan je de meest populaire artikels bekijken via onderstaande link (waar je <key> vervangt met jouw API key).

https://api.nytimes.com/svc/topstories/v2/home.json?api-key=<key>

Het resultaat zou er als volgt uit moeten zien. De artikels staan in de results-array.

Fig 3: NYT Developer Account - API Result

Om de artikels op te vragen voor een specifieke categorie verander je 'home' in bovenstaande URL met de categorie waarvoor je artikels wil opvragen.

https://api.nytimes.com/svc/topstories/v2/&lt;categorie&gt;.json?api-key=<key>

Project aanmaken

Download de startversie van de API klasse en plaats deze in een nieuw project. Zorg er vervolgens voor dat je een .env file toevoegt en hier je API key in bewaard. Deze API key moet natuurlijk ook ingeladen worden in de API klasse. Voor deze opgave zal je gebruik moeten maken van Axios en Bootstrap. Installeer deze bibliotheken alvast.

Oefening 1: Lay-out

De home page van de applicatie ziet er als volgt uit.

Fig 4: Home Page lay-out

Bouw deze lay-out (ongeveer) na met React Bootstrap. Hou hierbij rekening met het container-presentational patroon. Voorlopig kan je onderstaande dummy data gebruiken om je lay-out te testen.

[
  {
    title: "The very first post",
    abstract: "lorem ipsum dolor sit amet"
  },
  {
    title: "And then there was the second",
    abstract: "lorem ipsum dolor sit amet"
  },
  {
    title: "Third time's the charm",
    abstract: "lorem ipsum dolor sit amet"
  },
  {
    title: "A fourth post",
    abstract: "lorem ipsum dolor sit amet"
  }
]

Oefening 2: API aanspreken

Breid de klasse NytApi uit met de nodige methode(s), zodat je via deze klasse de artikels voor ene bepaalde categorie kan ophalen. Elk van deze oproepen is annuleerbaar. Gebruik de juiste lifecycle hook om de API aan te spreken, en voorzie clean-up via een andere lifecycle hook.

Fig 5: Artikels

Oefening 3: Afbeeldingen

Bekijk het resultaat dat je terugkrijgt van de API, zorg er vervolgens voor dat de afbeeldingen voor elk artikel getoond worden. Indien er geen afbeelding beschikbaar is, kan je een placeholder (http://placehold.it/300x200?text=N/A) gebruiken. Als je op een afbeelding klikt wordt je naar de New York Times pagina van het artikel gebracht.

Fig 6: Artikels met afbeeldingen

Oefening 4: Categorieën

Voeg de verschillende categorieën toe aan de keuzelijst. Hiervoor kan je gebruik maken van de getCategories() methode uit de NytApi klasse. Hou opnieuw rekening met het container-presentational patroon, zorg dat de categorieën en geselecteerde categorie in de state van een container component bewaard worden.

Fig 7: Categorieën

Zorg er vervolgens voor dat de artikels automatisch gerefresht worden als de gebruiker een andere categorie selecteert. Doe dit via de lifecycle hook componentDidUpdate. Tenslotte, kan de gebruiker, door op de retrieve knop te drukken, ook de artikels verversen.

Spinner

Maak gebruik van de React CSS Spinners om aan te geven dat de data geladen wordt. Je kan een delay inbouwen in je API call om dit te testen, zie hiervoor het lesvoorbeeld of gebruik een setTimeout().

Fig 8: Artikels met preloader