Les 6: Global State
Tijdens deze oefeningenreeks breid je de oefeningenreeks voor les 5 verder uit. Deze opgaven vertrekken van van de oplossingen die op Canvas beschikbaar zijn, je kan natuurlijk ook vertrekken van je eigen oplossingen.
Je moet voor deze oefeningen zelf geen Supabase backend opzetten. Je gebruikt het Supabase project dat opgezet is door de lectoren.
De lay-out is niet belangrijk, focus je op de functionaliteit.
Download de startbestanden en voeg deze toe aan je React applicatie. De startbestanden bevatten enkele componenten waarin de lay-out reeds gedefinieerd is. Het is mogelijk dat je imports moet aanpassen, de componenten in de startbestanden zijn geschreven om gebruikt te worden in combinatie met de oplossingen van de vorige les, als je verder werkt van jouw eigen oplossingen, is het mogelijk dat de mappenstructuur anders is.
Tijdens deze oefening maken we gebruik van skeleton text in de loading componenten, deze worden gebouwd met het pakket react-loading-skeleton.
npm install react-loading-skeleton
Oefening 1: Thema
Gebruik de context API om een themakeuze toe te voegen aan de applicatie.
De contextwaarde is nodig in de App component, hier wordt een CSS-klasse toegevoegd aan de Container component. Momenteel staat deze hardgecodeerd op "bg-dark text-light", als het theme gewijzig wordt, moet deze klasse wijzigen naar "bg-light text-dark".
Daarnaast bevat de Navbar een React Bootstrap Switch component waarmee het thema gewijzig kan worden. In onderstaande video zie je dat de achtergrond van de Switch een donkere kleur krijgt als deze aangevinkt is, hiervoor kan je onderstaande CSS-code gebruiken (waarbij #theme-switch het id van de switch is).
#theme-switch:checked {
background-color: #212529;
}
2
3
Oefening 2: Posts
Tijdens deze oefening breid je de GroupDetail component verder uit. Gebruikers kunnen posts toevoegen en commentaren plaatsen op deze posts. De posts en commentaren worden allemaal in één keer geladen. Dit is natuurlijk niet praktisch voor een real-life applicatie, in dat geval zou pagination/infinite scrolling toegevoegd moeten worden.
Oefening 2.1: Create posts
Voeg de optie toe om een post aan te maken, hiervoor kan je gebruik maken van de NewPostModal component uit de startbestanden. Verder kan ook de createPost functie (/src/API/groupAPI.js) van pas komen.
Oefening 2.2: Posts inladen
Schrijf een nieuwe selector die de posts voor een bepaalde groep ophaalt. Gebruik Suspense om de component LoadingPost te tonen terwijl de selector de asynchrone data aan het laden is. De posts kunnen opgehaald worden via de functie getPostsForGroup uit groupAPI.js.
De component Post bevat de UI-code voor een post, gebruik deze om een overzicht van de posts te tonen.
Oefening 2.3: Post herladen
Momenteel moet de pagina herladen worden nadat een nieuwe post toegevoegd wordt, lost dit probleem op. Doe dit door alle posts opnieuw in te laden door de cache te invalideren.
Oefening 2.4: Commentaren inladen
Breid de Post component uit zodat de bestaande commentaren geladen worden. Gebruik, om je code te testen, de groep "Public Demo". Hierin zijn enkele commentaren aangemaakt. Verder kan de functie getCommentsForPost uit het bestand groupAPI.js van pas komen. In de video wordt de Comment component gebruikt. Zorg er tenslotte ook voor dat de Hide/Show comments knop werkt.
Oefening 2.5: Commentaren toevoegen
Voeg de mogelijkheid toe om een nieuwe commentaar te schrijven voor een post, doe dit zonder gebruik te maken van cache invalidatie. Hiervoor heb je een extra atoom nodig en moet de selector uit de vorige oefening uitgebreid worden.
Verder is het ook nuttig om te weten dat de createComment functie niet enkel een commentaar wegschrijft naar de database, maar de nieuw aangemaakte rij ook teruggeeft. Deze rij bevat echter nog geen informatie over de gebruiker die de rij aangemaakt heeft, gebruik de useProfile hook, die in de startbestanden aanwezig is, om de username van de huidige gebruiker op te halen. Zorg dat je de username doorgeeft op dezelfde manier als waarop de Comment component deze verwacht.