# Examen Front-end Frameworks

## Inleiding

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.

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!

![5.png](public%2Fimages%2F5.png)

## 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
- LoadingPart
- 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.

![2.png](public%2Fimages%2F2.png)

### 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](#4-bookdetailtsx)).

![7.png](public%2Fimages%2F7.png)

#### 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.

![8.png](public%2Fimages%2F8.png)

#### 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 **<u>afwachtende</u>** 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 **<u>optimistische</u>** 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.

![4.png](public%2Fimages%2F4.png)

### 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.

'User mode'
![6.png](public%2Fimages%2F6.png)

'Admin mode'
![5.png](public%2Fimages%2F5.png)

Veel succes! 