November 2024
November 2024
In dit examen bouw je een eenvoudige applicatie voor het beheren van een boekenverzameling. De gebruiker kan boeken toevoegen, verwijderen en filteren. De nadruk ligt op het correct toepassen van React, React Componenten, React Router en TanStack Query.
Dit is een open-boek, open-internet examen. Het enige wat niet is toegestaan, is het gebruik van generatieve AI waar je via natuurlijke taal mee communiceert en elke vorm van communicatie met iemand anders dan je toezichter. Onder natuurlijke taal verstaan we chat tools zoals ChatGPT en (GitHub) Copilot chat, maar ook het schrijven van commentaarlijnen die vervolgens door een AI-tool omgezet worden in code.
AI-powered (multi)line-completion tools zoals GitHub Copilot of de ingebouwde line completion in WebStorm of Visual Studio Code zijn wel toegestaan.
Startbestanden
Belangrijk:
- Je werkt verder op een bestaand project. Download de startbestanden.
- Controleer of je alle benodigde bestanden hebt ontvangen. Contacteer onmiddellijk je toezichter als er iets ontbreekt.
- Voer pnpm install uit om alle benodigde libraries te installeren
- Het is normaal dat er errors zitten in de startbestanden. Aan jou om deze gaandeweg op te lossen. Desalniettemin zou het mogelijk moeten zijn om de webapplicatie op te starten en een startpagina te zien, zelfs met de fouten.
De finale applicatie zou er als volgt moeten uitzien. Merk op dat de getoonde data kan verschillen met jouw data!
Assets
Book
Er is een IBook model voorzien. Dit model bevat een aantal properties die je op de juiste plaatsen zal moeten aanspreken of tonen. Je hoeft aan dit model zelf geen properties of methodes meer toe te voegen of te verwijderen.
API
Binnenin de Api folder is een Book Api voorzien met een aantal methodes die data ophalen en opslaan. Analyseer deze klasse en kies de juiste methoden in je opdracht waar relevant. Aan deze klasse zal je jouw eigen hooks moeten toevoegen om data op te halen en op te slaan.
Belangrijk!:
- Aan de bestaande methodes in deze klasse moet niets meer gewijzigd worden.
- Je hoeft enkel hooks te schrijven rond deze methodes die elders in de applicatie gebruikt kunnen worden.
- De bestaande methodes in dit bestand mogen in andere bestanden nooit rechtstreeks aangesproken worden.
Componenten
De volgende componenten worden ter beschikking gesteld in de startbestanden:
- LoadingPage
- PageNotFound
- NavBar
- About
- BookDetail
- BookItem
- BookList
- Main
Opdracht
1. Opmaak
De startbestanden bevatten een stylesheet met opmaak voor dit examen. Zorg ervoor dat deze opmaak voor het volledige examen ingeladen wordt.
In het verdere verloop van dit examen is het geen probleem als jouw oplossing er anders uitziet. De focus van het examen ligt op de functionaliteit, focus dus niet op CSS-problemen, deze hebben, behalve het koppelen van de .css file geen invloed op je resultaat.
2. Navigatie
2.1 Routing.tsx
Schrijf een routing component met de volgende routes. Alle nodige componenten en assets zitten al in de startbestanden.
- ‘/’ Toont de BookList component, waar een overzicht van alle boeken wordt weergegeven.
- ‘/about’ Toont de About component waar algemene informatie zichtbaar is.
- ‘/book/:id’ Toont de BookDetail component, waar de details van een individueel boek worden bekeken.
- ‘*’: Toont de PageNotFound component voor niet-bestaande routes.
Zorg voor een Suspense boundary rond alle routes. Terwijl een pagina aan het laden is moet de LoadingPage component getoond worden.
2.2 Navbar.tsx
Vervolledig de NavBar component zodat de gebruiker naar de correcte pagina’s kan navigeren. Deze component ziet eruit zoals in bovenstaand voorbeeld. Plaats de Navbar component in exact 1 andere component zodat deze overal op de website zichtbaar is.
3. BookList.tsx
3.1 Items tonen
De BookList component toont een overzicht van alle boeken in de database. Gebruikt de getBooks functie uit de startbestanden om de boeken op te halen. Maak gebruik van de BookItem component om elk boek correct weer te geven.
De BookItem component bevat reeds een tekstblok 'View'. Zorg ervoor dat een gebruiker bij een klik op deze link naar de correcte detail pagina van dit boek gestuurd wordt (zie opdracht 4).
2.2 Items filteren
Het moet mogelijk zijn om boeken te filteren op genre. Als er in de Genre dropdown een bepaald genre geselecteerd wordt, mogen enkel boeken van dit genre getoond worden.
Als 'All' geselecteerd wordt, moeten alle boeken in de database getoond worden.
Om de dropdown op te bouwen kan je gebruik maken van de genres array en het Genre type die in IBooks.ts gedefinieerd zijn.
2.3 Data manipuleren
Via de button 'Add new book' kan er nieuw boek toegevoegd worden met random waardes. De functionaliteit om een nieuw boek toe te voegen bestaat reeds in bookApi.ts. Schrijf een afwachtende update-hook en gebruik deze om de mutatie uit te voeren.
Elk van de BookItem components heeft een 'Delete' link om het boek te verwijderen. De functionaliteit hiervoor bestaat ook reeds. Schrijf een optimistische hook in bookApi.ts en gebruik deze om de mutatie uit te voeren.
4. BookDetail.tsx
De opmaak van deze pagina wordt volledig gegeven. Aan jou om aan de hand van een url parameter de Id van het geselecteerde boek op te halen. Schrijf daarna een nieuwe hook om het volledige boek op te halen en gebruik deze binnen BookDetail om de data op de correcte plaatsen te tonen.
Zorg ervoor dat de gebruiker terug kan navigeren naar de vorige pagina door op de '<-- Terug' knop te drukken. De gebruiker moet teruggaan naar de vorige pagina, ongeacht wat deze pagina is. Je mag dus geen hardgecodeerd pad gebruiken.
5. Context
Schrijf een nieuwe context om de huidige weergavemodus van de gebruiker bij te houden. Er zijn twee modi: "user" en "admin". De modus bepaalt welke acties een gebruiker kan uitvoeren.
Bovenaan elke pagina moet naast de navigatie een switch toegevoegd worden waarmee de gebruiker kan schakelen tussen "user" en "admin" modus. De applicatie start standaard in de "admin" modus.
In de "user" modus:
- Moet de "Verwijder" knop voor een BookItem verborgen zijn.
- Kunnen er geen boeken toegevoegd worden
In de "admin" modus moet de volledige functionaliteit beschikbaar zijn.
