# Examen Januari 2022

Maak een nieuw React project aan, zorg er voor dat alle standaard bestanden in de src map verwijderd worden en je vanaf nul begint. Download vervolgens onderstaande startbestanden en plaats deze in je nieuwe project.

<a download href='./resources/Startbestanden-2022-01.zip'>Startbestanden</a>

In de startbestanden kan je een CSS-bestand vinden, zorg dat dit voor je volledige project gebruikt wordt.

Daarnaast zijn er in de startbestanden ook enkele API-klassen te vinden, deze pas je niet aan. In de API-klassen is documentatie voorzien voor elke functie. De bestanden *shoppingBasketAPI.js* en *productAPI.js* gebruik je doorheen het examen, de andere 2 files heb je niet rechtstreeks nodig, deze worden enkel gebruikt door de code in *shoppingBasketAPI.js* en *productAPI.js*. Je moet enkel gebruik maken van de geëxporteerde functies.

Om dit examen succesvol te maken zijn volgende bibliotheken nodig:

`npm install react-spinners uuid cancelable-promise`

Het examen bestaat uit het opbouwen van een “webshop” waarmee gebruikers producten kunnen bekijken en deze toevoegen aan hun winkelmandje.

Hou volgende punten in acht tijdens het maken van je examen:

* **Alle asynchrone GET (getProduct, getProductById, getBasket) oproepen moeten correct afgehandeld worden.**
* **Indien je problemen hebt met de routing voeg je de componenten onder elkaar toe aan de home page.**
* **Indien je problemen hebt met de "admin view" voeg je de admin functionaliteit toe aan de "user view".**
* **Zoek NIET naar CSS problemen, als de website er niet exact uitziet zoals in het screenshot is dit geen probleem. Het is enkel belangrijk dat je het meegeleverde CSS bestand op de correcte locatie plaatst en correct linkt in je applicatie.**
* **Zit je echt vast op een probleem, dan ga je beter voort naar de volgende opgave in de plaats van te blijven zoeken. Ook als je code niet 100% werkt kan je punten verdienen.**

Je hebt **3u en 15 minuten** de tijd voor dit examen.

## Navbar

Bouw een **NavBar** component waarin volgende links aanwezig zijn

* Products: Verwijst naar een pad ‘/products’
* Shopping Basket: Verwijst naar een pad ‘/basket’

Naast deze 2 links is er ook een checkbox aanwezig die aangeeft of de site in admin modus staat of in gebruikers modus. Maak gebruikt van *context* om de waarde van deze checkbox bij te houden.

Om onderstaande lay-out te bekomen kan je de **Navbar** component omringen in een div met de CSS-klasse 'navbar'.

![](./resources/2022_01_navbar.png)

## Products page

Bouw een *class component* **Products** die bezocht kan worden via het '/products' pad. Deze component toont een overzicht van alle producten in de webshop. Om dit overzicht te bouwen maak je gebruikt van de *getProducts()* methode uit het bestand *productAPI.js*.

Een product bestaat uit de naam van het product, de gemiddelde rating gemeten over alle reviews heen en de shortDescription. Tenslotte zijn er 2 knoppen aanwezig, de eerste knop wordt gebruikt om naar de detailpagina te gaan, de tweede knop wordt gebruikt om het product toe te voegen aan het winkelmandje. Hiervoor kan je gebruikmaken van de functie *addProductToBasket* uit het bestand *shoppingBasketAPI.js*.

Tijdens het laden van de componenten wordt de **Loading** component getoond die in de startbestanden aanwezig is.

Om onderstaande lay-out na te bouwen, kan je een product omringen met een *div* waaraan de CSS-klasse 'product' toegevoegd wordt. Daarnaast kan je de volledige applicatie omringen in een *div* met de CSS-klasse 'container'. 

![](./resources/2022_01_products1.png)

Als de website zich in "Admin modus" bevindt, dan wordt er bovenaan een extra knop getoond waarmee een nieuw product aangemaakt kan worden. Daarnaast worden de knoppen ook aangepast, de eerste knop verwijst nog steeds naar de detailpagina. De tweede knop wordt gebruikt om het product te verwijderen. Hiervoor kan je de functie *deleteProduct()* gebruiken uit *productAPI()*.

<video>
    <source src="./resources/2022_01_products2.webm">
</video>

## Shopping basket

Maak een nieuwe component **ShoppingBasket** die gebruik maakt van *Recoil* voor state mangement. Deze component toont een overzicht van alle producten die de gebruiker toegevoegd heeft aan het winkelmandje. Verder kan de gebruiker het aantal keer dat een product in het winkelmandje zit verhogen of verlagen. De gebruiker kan tenslotte op de naam van een product klikken om naar de detailpagina gebracht te worden. Tijdens het uitwerken van de opgave kan je gebruik maken van de *removeProductFromBasket()*, *addProductToBasket()*, *getBasket()*, en *updateBasket()* functies uit het bestand *shoppingBasketAPI.js*. Niet elke functie is nodig, welke je gebruikt hangt af van hoe je de functionaliteit geïmplementeerd hebt.

Voor deze oefening is demo data voorzien, als de vorige opgave gelukt is, kan je hier nog steeds aan beginnen (automatisch ingeladen in de *getBasket()* methode). De Loading component wordt opnieuw getoond tijdens het laden van de inhoud van het winkelmandje.

<video>
    <source src="./resources/2022_01_shopping_basket.webm">
</video>

## Details

Bouw een component **ProductDetails** waarmee de details van een product bekeken kunnen worden. Gebruik hooks om de data op te halen via de *getProductById()* functie uit het bestand *productAPI.js*.

Voor een product wordt de titel getoond en de beschrijving. Daarnaast wordt er een overzicht gegeven van alle attributen en alle reviews voor het product. De reviews worden standaard geminimaliseerd getoond, de gebruiker kan op de knoppen "Show more" en "Show less" klikken om de reviews respectievelijk dicht of open te klappen.

<video>
    <source src="./resources/2022_01_details1.webm">
</video>

Als de applicatie zich in "admin mode" bevind, dan kunnen attributen toegevoegd en verwijderd worden. Natuurlijk moeten deze wijzigingen bewaard worden nadat de pagina herladen wordt.

<video>
    <source src="./resources/2022_01_details2.webm">
</video>
