# Examen Front-end Frameworks

## Inleiding

In dit examen bouw je een eenvoudige applicatie waarmee een museumcollectie beheerd kan worden. 
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

https://gitpub.pit-graduaten.be/public/web/9fb72225-6435-4026-9349-e207ef1a7b38

## Opdracht

### 1. Opmaak

De startbestanden bevatten, in de root van het project, 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 zitten al in de startbestanden.

- '/collection' Toont de **CollectionPage** component, waar een overzicht van alle artefacten in het museum wordt weergegeven.
- '/artifact/:id' Toont de **ArtifactPage** component, waar de details van een individueel artefact worden bekeken.
- '*': Toont de eveneens de **CollectionPage** component.

Zorg voor een **Suspense** boundary rond alle routes.
Terwijl een pagina aan het laden is moet de **Loading** component getoond worden.

#### 2.2 Navbar.tsx

Vervolledig de **NavBar** component, deze bevat één link die de gebruiker naar _/collection_ stuurt. 

![](./public/assignment/navbar_collection.webp)

### 3. CollectionPage.tsx

#### 3.1 Artefacten tonen

De **CollectionPage** component toont een overzicht van alle artefacten in de database.
Programmeer een nieuwe hook die de methode 'getArtifacts' oproept om de artefacten op te halen.
Maak vervolgens gebruik van de **Artifact** component om elk artefact correct weer te geven (vervang de placeholder data
met dynamische). 
De component toont voorlopig enkel de Nederlandstalige beschrijving.

![](./public/assignment/artifact_list.webp)

#### 3.2 Artefacten filteren

Via de tekstinput bovenaan de pagina moeten de artefacten gefilterd kunnen worden op **naam** of **era**, het zoekveld
moet case-insensitive zijn en alle artefacten teruggeven waarvoor de naam of era de zoekterm bevat.

![](./public/assignment/artifacts_filter_text.webp)

Als de tentoongesteld checkbox aangevinkt is, mogen enkel de artefacten getoond worden die de status "On Display"
hebben.
Als het veld niet aangevinkt is, toon je alle artefacten ongeacht hun status.

![](./public/assignment/artifacts_filter_checkbox.webp)

LET OP: Beide filters zullen dus hand in hand te werk gaan om de artefacten te filteren.
Als een zoekterm is ingevuld én de checkbox is aangevinkt, moeten enkel de artefacten getoond worden waarvan de naam of
era de zoekterm bevat **EN** waarvan de status "On Display" is.

![](./public/assignment/artifacts_filter_both.webp)

#### 3.3 Data manipuleren

##### 3.3.1 Nieuw artefact toevoegen

Via de "+ Artefact toevoegen" knop moet een nieuw willekeurig artefact toegevoegd worden aan de database.
Hiervoor gebruik je de _addArtifact_ functie die voorzien is in de startbestanden.

Schrijf een **<u>afwachtende</u>** create-hook en gebruik deze om de mutatie uit te voeren.

##### 3.3.2 Artefact verwijderen

Via de delete knop in een artifact card moet het artefact verwijderd worden uit de database, gebruik hiervoor de 
_deleteArtifact_ functie die voorzien is in de startbestanden.

Gebruik hiervoor een **<u>afwachtende</u>** delete-hook.
Terwijl de mutatie bezig is, voeg je de CSS-klasse 'delete' toe aan de artifact container (die momenteel al de klasse 
'artifact' heeft).
Deze klasse voegt een animatie toe die het artefact laat vervagen.

![](./public/assignment/delete_artifact.webp)

### 4. ArtifactPage.tsx

#### 4.1 Navigatie toevoegen in Artifact.tsx

Door op de naam van een artefact te klikken in de **Artifact** component, moet de gebruiker
kunnen navigeren naar de detailpagina van dat artefact.

#### 4.2 ArtifactPage.tsx

Schrijf een nieuwe hook om de details van één artifact op te halen en gebruik deze om onderstaande pagina te bouwen.
Hiervoor maak je gebruik van de **ArtifactPageLayout** component die voorzien is in de startbestanden.

Zorg ervoor dat de gebruiker terug kan navigeren naar de vorige pagina via de "Back" button.
De gebruiker moet teruggaan naar de vorige pagina, ongeacht wat deze pagina is.
Je mag dus geen hardgecodeerd pad gebruiken.

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

#### 4.3 Artefact bijwerken

Maak gebruik van de _displayStatuses_ array uit de startbestanden om de optie in het dropdown menu op te vullen. 
Schrijf vervolgens een **<u>optimistische</u>** update-hook om de display status van het artefact bij te werken. 
Voor alle punten, doe je dit zonder _useState_ te gebruiken. 

![](./public/assignment/status_update.png)

### 5. LanguageProvider.tsx

Schrijf een nieuwe context om bij te houden wat de geselecteerde taal is (Nederlands, Frans of Engels).
Via de knoppen in de **Navbar** moet de gebruiker een andere taal kunnen selecteren. 
De taal die momenteel actief is, wordt aangegeven door de CSS-klasse 'active' toe te voegen aan de corresponderende knop.

De beschrijving op de collectie pagina moet aangepast worden aan de geselecteerde taal.

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