# Herexamen: Augustus 2024

Download "_Startbestanden.zip_". 
Deze zip bevat twee submappen, één voor deel 1 en één voor deel 2. 
Alle nodige libraries zijn al toegevoegd aan package.json, je moet dus enkel nog een `pnpm install` uitvoeren.
De startbestanden voor deel 1 worden gebruikt om je React kennis te testen terwijl de bestanden voor deel 2 gebruikt
wordt om je kennis over Cypress te testen.
Hou de twee mappen afgezonderd, dit zijn twee aparte projecten en je zal dus ook twee keer het `pnpm install` commando
moeten uitvoeren.

**Voor sommige componenten is startcode gegeven waarin enkele properties voorzien zijn, deze properties zijn NIET
EXHAUSTIEF. 
Het is dus mogelijk dat je aan de gegeven componenten nog properties moet toevoegen.**

**Dit is een open-boek, open-internet examen. 
Het enige wat niet toegestaan is, is het gebruik van (generative) AI en elke vorm van communicatie met iemand anders dan
je toezichter.**

## Deel 1: React

Tijdens dit examen bouw je een frontend voor een database met trivia vragen waar enkele CRUD-operaties op uitgevoerd 
kunnen worden.

###	Startbestanden

De startbestanden bevatten een stylesheet met opmaak voor dit examen. 
Zorg ervoor dat deze opmaak voor het volledige examen ingeladen wordt.
Let op, de startbestanden bevatten ook een bestand _cssForStyledComponents.txt_, dit zal je in een volgende opgaven als 
bron moeten gebruiken, je kopieert deze code niet naar het CSS-bestand.

**In het verdere verloop van dit examen worden af en toe CSS-klassen vermeld die toegevoegd kunnen worden om de opmaak in 
de screenshots na te bouwen. Als jouw oplossing er anders uitziet, is dit geen probleem.
De focus van het examen ligt op de functionaliteit, focus dus niet op CSS-problemen, deze hebben, behalve het koppelen
van de .css file en het gebruik van _styled-components_ geen invloed op je resultaat.**

Alle CRUD-operaties moeten gebeuren door middel van _TanStack (React) Query_. 
Voor alternatieve oplossingen krijg je geen punten.

###	Routing

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

*	Het pad '_/_' toont de **Home** component die al te vinden is in de startbestanden.  
*	Het pad '_/detail/id_' toont de **Detail** component die nog aangemaakt moet worden.
    Het tweede segment (_id_) is een dynamische parameter waaraan het _id_ van een vraag 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.

###	Trivia vragen tonen

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

![](./opgave/trivia_overview.png)

### Vragen verwijderen

Maak gebruik van een **afwachtende** update om een vraag te verwijderen als er op de '_Delete_' knop gedrukt wordt.

Terwijl de vraag verwijderd wordt moet de **LoadingPart** component (die te vinden is in de startbestanden) getoond 
worden.

![](./opgave/delete_question.png)

### Detailpagina

Zorg er voor dat de gebruiker via de 'Details' knop naar de '_/detail/id_' route gebracht wordt.
Je kan gebruik maken van de **DetailUI** (die in de startbestanden te vinden is) om onderstaande UI te bouwen.

![](./opgave/detail_page.png)

### Terug navigeren

Zorg er voor dat de gebruiker terug kan navigeren naar de vorige pagina door op de '<--' knop te drukken.
De gebruiker moet terug gaan naar de vorige pagina, ongeacht wat deze pagina is.

###	Vraag updaten

Via de **DetailUI** component worden de mogelijke antwoorden voor de vraag op het scherm getoond. 
Schrijf de nodige code om het correcte antwoord aan te passen via een **optimistische update**. 
Doe dit, voor volledige punten, **zonder useState**.

Je zal merken dat de volgorde van de antwoorden aangepast wordt als je een nieuw correct antwoord selecteert.
Los dit probleem op.

### Vragen filteren

Maak gebruik de CSS-code in _cssForStyledComponents_ om een met _styled-components_ opgemaakte &lt;select&gt; component 
te bouwen. 
Gebruik deze component vervolgens om aan de 'Category', 'Type' en 'Difficulty' kolommen een filter toe te voegen. 
Deze filters moeten individueel en allemaal samen werken.
In de models map van de startbestanden vind je _enums_ die je kan gebruiken om de opties in de select op te vullen.
Via `Object.values(enum)` haal je alle keys uit een _enum_ op.

![](./opgave/filters.png)

### Context

Creëer een nieuwe context die de view-modus van de applicatie bijhoud. 
Er zijn twee modi, 'user' en 'admin'. 
Standaard wordt de applicatie gestart in de 'admin' modus. 
Via een checkbox bovenaan beide pagina’s kan de modus gewijzigd worden.
Om de lay-out in onderstaand screenshot na te bootsen kan je het label en de checkbox in een _&lt;div&gt;_ met de
CSS-klasse _content-menu_ plaatsen.

![](./opgave/context_1.png)
![](./opgave/context_2.png)

#### Context gebruiken

Als de applicatie in 'user' modus staat, moet de delete-kolom in de homepagina verborgen worden.

![](./opgave/context_off_1.png)

Verder moeten de radiobutton in de detailpagina uitgeschakeld worden. 

![](./opgave/context_off_2.png)

## Deel 2: Testing

De startbestanden bevatten reeds de nodige _Cypress_ configuratie, inclusief de nodige commando’s. 
Pas de _Cypress_ environment variables aan voordat je testen begint te schrijven.

De startbestanden bevatten reeds de nodige _data-cy_ properties.
Je mag er altijd extra toevoegen, maar normaal gezien is dit niet nodig.
De properties zijn de volgende:

*	_plot_: Een plot in de tuin.
*	_planted-filter_: De filter waarmee de plots met geplante gewassen geselecteerd kunnen worden.
*	_trimmed-filter_: De filter waarmee de plots met getrimde gewassen geselecteerd kunnen worden.
*	_harvested-filter_: De filter waarmee de plots met geoogste gewassen geselecteerd kunnen worden.
*	_create-plot_: De knop waarmee een nieuw plot aangemaakt kan worden.
*	_plant-name_: De tekst input waarmee de naam van het gewas in een nieuw plot ingegeven kan worden.

### End-to-end testen
Schrijf onderstaand testscenario uit voor de '/' route.
rie van de onderstaande tests slagen standaard niet (twee van de tests omwille van dezelfde foute code). 
Pas de _React_ code aan zodat deze wel slagen, hiervoor moet je tussen de 1 - 5 lijnen code aanpassen of toevoegen.

- Een niet-ingelogde gebruiker 
  - Kan de plots zien
  - Kan de plots filteren, als alle filters af staan, mag geen enkel plot zichtbaar zijn. 
- Een ingelogde gebruiker
  - Kan geen plot aanmaken met een lege plantnaam.
  - Kan een plot aanmaken met een valide plantnaam.
