Augustus 2021 - 2022
Augustus 2021 - 2022
Notitie
Exameninhoud
Let op, de voorbeeldexamens zijn gebruikt in het academiejaar 2021 - 2022 en komen dus niet volledig overeen met de leerstof van dit academiejaar. Je kan de opgaven waar met class components gewerkt wordt natuurlijk wel maken met functiecomponenten, de oefening met recoil en useEffect kan je maken met react-query. Tenslotte kan je voor elke vragen testen schrijven. De voorbeeldexamens geven dus wel een goed beeld van de complexiteit van het examen. Het examen zal dit academiejaar kleiner zijn omdat alle leerstof beter samenhangt en we geen 3 verschillende manieren meer moeten testen.
Maak een nieuw React project aan, zorg er voor dat alle standaard bestanden in de src map verwijderd worden en je vanaf nul begint. Download vervolgens onderstaande startbestanden en plaats deze in je nieuwe project.
In de startbestanden kan je een CSS-bestand vinden, zorg dat dit voor je volledige project gebruikt wordt. Om volledig dezelfde layout te bekomen als in je screenshots, omring je de volledige applicatie in een div met de CSS-klasse 'container'.
Verder is er in deze startbestanden ook API map te vinden. Deze map bevat slechts één bestand dat je mag aanspreken tijdens het examen, namelijk booksApi.js. Gebruik uit dit bestand enkel de geëxporteerde functies. Je past dit bestand niet aan.
Om dit examen succesvol te maken zijn minstens volgende bibliotheken nodig:
pnpm add styled-components uuid cancelable-promise @faker-js/faker
Het examen bestaat uit het opbouwen van een "bibliotheek", je bouwt een overzicht van boeken en van de keren dat elk boek uitgeleend is door een lid van de bibliotheek. De screenshots demonstreren de verwachte functionaliteit, maar kunnen andere data bevatten dan op jouw scherm.
Hou volgende punten in acht tijdens het maken van je examen:
- Alle asynchrone GET (getBooks, getGenres, getGenresForBook, getLoansForBook) oproepen moeten correct afgehandeld worden.
- Indien je problemen hebt met de routing voeg je de componenten onder elkaar toe aan de home page.
- Zoek NIET naar CSS-problemen, als de website er niet exact uitziet zoals in de screenshots en video's is dit geen probleem. Het is enkel belangrijk dat je het meegeleverde CSS-bestand op de correcte locatie plaatst en correct linkt in je applicatie.
- Zit je echt vast op een probleem, dan ga je beter voort naar de volgende opgave in de plaats van te blijven zoeken. Ook als je code niet 100% werkt kan je punten verdienen.
Je hebt 3u en 15 minuten de tijd voor dit examen.
Vraag 0: Navbar & Taalkeuze
Bouw een NavBar component waarin volgende links aanwezig zijn
- Books: Verwijst naar een pad
/books - Loans: Verwijst naar een pad
/loans
Naast deze 2 links is er ook een select aanwezig waarmee de taal van de website gewijzigd kan worden van Engels naar Nederlands (of omgekeerd). Gebruik context om de gekozen waarde te bewaren.
Om onderstaande layout te bekomen kan je de NavBar componenten omringen in een div met de CSS-klasse 'navbar' en de drie links in een <ul> te plaatsen.
Als de taal gewijzigd wordt naar Nederlands, dan moet de NavBar natuurlijk mee wijzigen, de namen van de links worden dan:
Vraag 1: Overzicht boeken -- Class Components
Bouw een class component Books die bezocht kan worden via het /books of / pad. Deze component toont een overzicht van alle boeken in de bibliotheek. Om dit overzicht te bouwen maak je gebruik van de getBooks() methode uit booksApi.js. Terwijl de boeken aan het laden zijn, wordt de <LoadingPage/> component getoond (die aanwezig is in de startbestanden).
Een boek bestaat uit de titel van het boek en de auteur van dit boek. Verder zijn er twee knoppen aanwezig, de eerste knop wordt gebruikt om het boek te verwijderen, de tweede om te navigeren naar de uitleningen pagina voor dat boek. Om onderstaande layout te krijgen kan je een boek omringen in een div met de CSS-klasse 'book', de auteur en titel krijgen respectievelijk de klassen 'author' en 'title'.
Bovenaan de pagina is er een knop aanwezig waarmee een nieuw boek toegevoegd kan worden, gebruik hiervoor de methode addNewBook() uit bookApi.js. (Er kunnen via deze methode slechts 15 boeken toegevoegd worden, daarna reset de lijst.)
Ook hier moet de taalkeuze gerespecteerd worden:
Tenslotte is er een chevron aanwezig die naar beneden wijst als de details niet zichtbaar zijn en naar boven als de details wel zichtbaar zijn. Om deze chevron te tonen kan je de HTML-entiteiten ∧ (∧) en ∨ (∨) gebruiken. Momenteel moet er in details nog niets weergegeven worden, er kan slechts één boek tegelijkertijd opengeklapt zijn (zoals gedemonstreerd in onderstaande video). Omring de chevron in een div met de CSS-klasse 'chevron' en plaats deze vlak na de titel in je JSX-code.
Vraag 2: Details boeken -- Hooks
Maak een nieuwe component BookDetail, deze component wordt getoond als de chevron in bovenstaande vraag opengeklapt wordt. Deze component mag enkel de beschijving en het id van het book doorkrijgen via properties, alle info over de genres moet via hooks opgehaald worden. Voor deze component hoef je geen rekening te houden met de taalkeuze.
De component bevat de beschrijving van het boek en de mogelijkheid om genre's toe te kennen of te verwijderen van het boek. Het menu om de genre's toe te kennen bestaat uit 3 kolommen, de linkse kolom bevat alle genre's die nog niet toegekend zijn aan het boek, de rechtse kolom bevat alle genre's die wel toegekend zijn aan het boek. De middelste kolom bevat tenslotte 2 knoppen waarmee de genre's van link naar rechts verplaatst kunnen worden. Om de data op te halen maak je gebruik van de getGenres() en getGenresForBook() methodes uit booksApi.js. Let op, om de linkse lijst te bouwen moet je de data die je uit de API terugkrijgt filteren.
Om onderstaande layout te reproduceren omring je de genres in een div met de klasse 'genres' en plaats je hierin één div per kolom. Elke individueel genre wordt omringt in een div met de klasse 'genreItem'.
Terwijl deze data aan het laden is maak je gebruik van de <LoadingPart> component die beschikbaar is in de startbestanden.
Voordat een genre verplaatst kan worden van links naar recht (of omgekeerd) moet dit geselecteerd worden door er op te klikken, duid het geselecteerde item aan door dit de CSS-klasse 'selected' te geven. Er kan slechts één genre per keer geselecteerd worden. Als er geen item geselecteerd is doen de knoppen in het midden niets. Het is ook niet mogelijk om een genre meerdere keren toe te voegen aan een boek.
Vraag 3: Boeken uitlenen -- Recoil
Bouw een component Loans die een overzicht geeft van de verschillende keren dat een bepaald boek uitgeleend is. Bouw deze component volledig met Recoil. Voor deze component hoef je geen rekening te houden met de taalkeuze.
De pagina kan op 2 manieren geopend worden. Ten eerste kan op de link in de navbar geklikt worden, in dit geval wordt er een dropdown menu getoond waarmee de gebruiker een boek kan selecteren. Om deze select te bouwen, maak je opnieuw gebruik van de getBooks() methode uit de booksApi.js.
Zodra een boek geselecteerd is, worden de uitleendata voor dat boek geladen, terwijl de data aan het laden is, wordt de <LoadingPart> component opnieuw gebruikt. Onderstaande layout is gebouwd met een HTML <table>. Om de data te laden maak je gebruik van de getLoansForBook() methode uit booksApi.js.
De tweede manier om deze pagina te bezoeken, is door middel van de link in vraag één. In dat geval wordt de select met boeken automatisch opgevuld met het juiste boek en wordt de data automatisch geladen.
Onder de tabel wordt een knop weergegeven waarmee het boek uitgeleend kan worden, indien het boek momenteel uitgeleend is, is deze knop disabled en wordt er in de plaats een knop getoond in de tabel om het boek terug te brengen. Om een boek uit te lenen maak je gebruik van de addLoanToBook() methode, om het boek terug te brengen maak je gebruik van de returnLastLoanForBook methode.
