# Herexamen frontend frameworks, augustus 2025 

In dit examen bouw je een eenvoudige applicatie voor het beheren en doorzoeken van een dranken database.
De gebruiken kan draken bekijken en filteren op naam en soort.
Daarnaast kunnen dranken verwijderd worden en kunnen de ingrediënten van een drank aangepast worden. 

Gebruik **React Router** en **TanStack Query** om de applicatie te bouwen, als je andere libraries gebruikt verlies je
een groot deel van je punten.

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.

## CSS

In de startbestanden vind je een CSS-bestand, zorg ervoor dat dit correct ingeladen wordt en beschikbaar is voor alle
componenten in de applicatie.

##	Routing

Bouw een routing component die onderstaande routes voorziet en plaats deze op de correcte plaats in je applicatie.

*	Het pad '_/_' toont de **HomePage** component die al te vinden is in de startbestanden.
*	Het pad '_/drinks/id_' toont de **DetailPage** component die eveneens te vinden is in de startbestanden.
    Het tweede segment (_id_) is een dynamische parameter waaraan het _id_ van een drank meegegeven kan worden.

Zorg voor een **Suspense** boundary rond alle routes.
Terwijl een component suspended is, moet de **LoadingPage** component (die te vinden is in de startbestanden) getoond
worden.

##	Dranken tonen

Maak gebruikt van de _getDrinks_ functie uit de startbestanden en _TanStack Query_ om een overzicht te tonen
van alle dranken in de database.
Om onderstaande lay-out na te bouwen kan je gebruik maken van de **Drink** component uit de startbestanden.

![](./public/assignmentImages/drink_overview.webp)

### Dranken filteren

Maak gebruik van de select en het input veld om de dranken te filteren, beide filters moeten samen werken.
De naam filter is niet gevoelig voor hoofdletters.

![](./public/assignmentImages/filtered_drinks.webp)

## Detailpagina

Zorg er voor dat de gebruiker via de &gt; (**ChevronRight**) knop (in de **Drink** component) naar de '_/drinks/id_' 
route gebracht wordt.

![](./public/assignmentImages/navlink.webp)

Op deze route worden de details van de drank getoond, in de **DetailPage** component vind je statische placeholders, 
vervang deze door de correcte data.

![](./public/assignmentImages/detail_page.webp)

### Terug navigeren

Via de "< Back to Home" button wordt de gebruiker terug naar de vorige pagina gebracht, ongeacht wat deze pagina is.

##	Ingrediënten updaten

De detail pagina bevat een lijst van de ingrediënten waarmee de drank gemaakt wordt, zorg ervoor dat deze gegevens
aangepast kunnen worden via een **optimistic update**.
Elke aanpassing (keypress) moet onmiddellijk weggeschreven worden via een TanStack mutation. 
Hiervoor kan je de _updateDrink_ functie uit de startbestanden gebruiken.

**Als het je niet lukt om de ingrediënten te updaten, kan je de instructies updaten voor een klein beetje minder
punten.** 

## Context: dranken selecteren

Op de homepagina moet de gebruiker dranken kunnen selecteren door op de afbeelding te klikken, een geselecteerde drank
moet de _selected_ CSS-klasse krijgen.
Verder moet het aantal geselecteerde dranken getoond worden en moeten de 'Clear selection' en 'Delete selection' knoppen
uitgeschakeld worden als er geen dranken geselecteerd zijn.

Je gebruikt **context** om de id's van de geselecteerde dranken te bewaren. 

![](./public/assignmentImages/context.webp)

### Selectie resetten

Via de knop 'Clear selection' moet de selectie van dranken gewist worden, de klasse _selected_ moet van alle dranken
verwijderd worden, de knoppen 'Clear selection' en 'Delete selection' moeten uitgeschakeld worden en het aantal wordt 
terug op 0 gezet.

## Dranken verwijderen

Via de knop "Delete selection" moeten de geselecteerde dranken verwijderd worden via een **afwachtende update**.

**Als het je niet gelukt is om de context te implementeren, zorg je ervoor dat een afbeelding verwijderd kan worden door
op de afbeelding te klikken. 
Je verliest hierdoor geen punten op dit onderdeel (natuurlijk wel op de context)** 
