Les 5: Mutating data
Les 5: Mutating data
Tijdens deze oefeningenreeks bouw je een To-Do applicatie waarin gebruikers een publieke of privélijst kunnen aanmaken. Daarnaast wordt een privélijst gedeeld met andere gebruikers. In deze oefeningenreeks oefening je op:
- De concepten van de eerste 4 lessen
- Data aanpassen via TanStack Query mutations
- Het gebruik van de useEffect hook voor real-time data
- Het lezen, gebruiken en aanpassen van bestaande code
Supabase BaaS
Deze oefeningenreeks maakt gebruik van Supabase als back-end. De configuratie met deze BaaS wordt voorzien in de startbestanden. Je moet zelf niets configureren, enkel gebruikmaken van de API klassen die reeds voorzien zijn.
Natuurlijk moet je de functies die Supabase aanspreken nog wel gebruiken in useQuery en useMutation hooks.
Oefening 1: Routing
Voorzie routing volgens het volgende diagram, de routing component moet op de daarvoor voorziene plaats in de App component komen. De Home, Login en Username componenten zijn al voorzien in de startbestanden. Je moet enkel de routing toevoegen. De nieuwe componenten moeten natuurlijk nog niets doen. Niet alle noodzakelijke stappen om routing te activeren zijn al aanwezig in de startbestanden.
Als je routing correct geïmplementeerd hebt, zou je, als je de app start onderstaand scherm te zien moeten krijgen. Nadat je jouw e-mailadres ingegeven hebt, wordt je geredirect naar de lege Home component of de Username component als je nog geen gebruikersnaam gekozen hebt in het lesvoorbeeld.
Oefening 2: Aanmaken van nieuwe To-Do lijsten
Breidt de Home component verder uit. Deze component moet een formulier tonen waarmee de gebruiker een nieuwe To-Do lijst kan aanmaken. Het formulier bevat een tekstinput voor de naam van de nieuwe lijst en een checkbox waarmee aangegeven kan worden of de lijst al dan niet privé is.
Als de gebruiker aangeeft dat de lijst een privélijst moet zijn, wordt er een lijst getoond van alle gebruikers die voldoen aan de ingegeven filter. De gebruiker kan één of meer andere gebruikers aanvinken waarmee hij de lijst wil delen. Om de lijst van alle gebruikers op te halen, kan je gebruikmaken van de fetchProfiles functie die je in de startbestanden vindt in /src/API/userAPI.js. Maak tijdens het filteren gebruik van de useIsEditing hook uit de startbestanden. Deze hook is vrijwel identiek aan diegene die in les 4 geschreven is. Toon de LoadingPage component terwijl de lijst van gebruikers aan het laden is. De lijst van gebruikers is in onderstaande screenshots en video's omringd met een ScrollWrapper component met een hoogte van 35. Deze component is voorzien in de startbestanden en is dezelfde component die je in de eerste herhalingsoefeningen geschreven hebt.
De submit knop in het formulier is de FormSubmitButtonWithLoading component die voorzien is in de startbestanden. Daarnaast kan je gebruik maken van de createList functie die je in de startbestanden vindt in /src/API/toDoAPI.js. Nadat je op opslaan drukt, wordt je geredirect naar de detailpagina van de lijst. Deze is natuurlijk nog leeg.
Oefening 3: Overzicht To-Do lijsten
Bouw een overzicht van alle To-Do lijsten die bestaan in het systeem. Hiervoor kan je gebruik maken van de getLists functie die te vinden is in de startbestanden. Toon opnieuw de LoadingPage component terwijl de lijst aan het laden is.
De user interface is ingedeeld in 3 tabbladen. Het eerste tabblad toont de lijsten die aangemaakt zijn door de ingelogde gebruiker, het tweede tabblad toont alle lijsten die gedeeld zijn met de ingelogde gebruiker en het laatste tabblad toont alle publieke lijsten. Als deze lijsten worden teruggegeven door de getLists functie, je moet deze zelf nog filteren op basis van de properties. Als er geen lijsten gevonden zijn voor een bepaald tabblad, wordt er een gepaste boodschap getoond.
Voor elke lijst wordt de naam getoond en de gebruiker die de lijst heeft aangemaakt. Als je op de lijst drukt, wordt je naar de detailpagina gestuurd.
Oefening 3.1: Lijsten deleten
Voorzie een delete knop voor elke lijst. Gebruik de deleteList functie uit de startbestanden om de lijsten te verwijderen. Doe dit via optimistic updates, dit betekent dat de lijst verwijderd wordt uit de UI en bij eventuele fouten terug getoond wordt. Een gebruiker kan zijn eigen lijsten verwijderen, maar de publieke en gedeelde lijsten kunnen niet verwijderd worden.
Oefening 4: Detailpagina
Bouw de detailpagina van een To-Do lijst. Deze pagina maakt gebruik van real-time data, telkens een taak aangemaakt of geüpdatet wordt, zijn de wijzigingen onmiddellijk zichtbaar bij alle gebruikers die de detailpagina voor de lijst in kwestie open hebben staan.
Om data op te halen in real-time is de fetchTasksForListInRealTime functie voorzien in de startbestanden. Deze functie geeft, in tegenstelling tot in de les, een array van geüpdatet taken terug aan de handleChange functie. Je hoeft, in tegenstelling tot in de les, ook geen rekening te houden met het moment waarop de data aangepast is. Je kan de oude state gewoon vervangen met de nieuwe taken in de handleChange functie. Om de create, update en delete operaties te implementeren zijn de createTask, updateTaks en deleteTask functies voorzien in de startbestanden.
Oefening 4.1: Taken als afgewerkt markeren
Zoals in bovenstaand screenshot duidelijk is, worden de naam van de taak en de gebruiker die de taak aangemaakt heeft getoond. Maak gebruik van de HTML-entiteiten 🗹(🗹) en ☐(☐) om aan te geven of de taak al dan niet afgewerkt is. Het moet natuurlijk mogelijk zijn om hierop te drukken om de status aan te passen.
Oefening 4.2: Taken verwijderen
Alle taken die weergegeven worden en door de ingelogde gebruiker gecreëerd zijn tonen een delete knop.
Onderstaande video toont de volledige werking van de detailpagina