5. Mutating data & effects
5. Mutating data & effects
Tijdens deze oefeningenreeks bouw je een To-Do applicatie waarin gebruikers een publieke of privélijst kunnen aanmaken en een privélijst kunnen delen 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
- 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 useSuspenseQuery en useMutation hooks.
Startbestanden
Voorbereiding
De startbestanden zijn nog niet volledig in orde. Als je de development server start, zie je dat er verschillende errors geprint worden in de console. Deze errors worden veroorzaakt door ontbrekende configuratie voor de @tanstack/react-query en react-router-dom bibliotheken.
Oefening 1: Routing
Voorzie routing volgens het onderstaand diagram, gebruik hiervoor de reeds voorziene (en lege) Routing component. De Login component is al voorzien in de startbestanden, je moet deze enkel toevoegen aan de routing. De nieuwe componenten moeten natuurlijk nog niets doen.
Als je routing correct geïmplementeerd hebt, zou je onderstaand scherm moeten zien als de app start. Nadat je ingelogd bent, word je geredirect naar de lege Home component. Als je al ingelogd hebt in het lesvoorbeeld (en deze developer server niet meer draait), kom je rechtstreeks op de Home component uit.
Oefening 2: Aanmaken van nieuwe To-Do lijsten
Breid 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. Gebruik als submit knop in het formulier de SubmitButtonWithLoading component die voorzien is in de startbestanden. Om een nieuwe lijst aan te maken gebruik je de createList methode die terug te vinden is in todo.ts.
Als de gebruiker aangeeft dat de lijst privé is, 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 getProfiles functie die je in de startbestanden vindt. Maak tijdens het filteren gebruik van de useDebouncedState hook uit de startbestanden.
Terwijl de lijst van gebruikers aan het laden is moet de LoadingPart component getoond worden (via suspense). De gebruikers informatie mag pas opgehaald worden op het moment dat de checkbox aangevinkt wordt.
Zorg ervoor dat de lijst van gebruikers 40vh groot is, als er meer gebruikers zijn dan er in de lijst getoond kunnen moet er door de lijst gescrolled kunnen worden.
Nadat de list succesvol aangemaakt is, word 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 uit de startbestanden. Toon de LoadingPage component terwijl de lijst aan het laden is, je maakt natuurlijk gebruik van suspense.
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. Al 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 klikt, word je naar de detailpagina gestuurd. De UI is opgebouwd met behulp van de ListGroup component uit de startbestanden.
Oefening 3.1: Lijsten verwijderen
Voorzie een delete-knop voor elke lijst, als de gebruiker op deze knop drukt, wordt de bijhorende lijst verwijderd via een optimistic update. Gebruik de deleteList functie om deze functionaliteit te implementeren.
Een gebruiker kan enkel de eigen lijsten verwijderen, je hoeft hier zelf niets voor te implementeren. Toch moet de delete-knop voor elke gebruiker zichtbaar zijn op elke lijst. Dit is een heel slechte beslissing als we uit een UX-standpunt kijken, maar we doen dit hier zodat we duidelijk kunnen zien dat de optimistische update mislukt en dat de data terug toegevoegd wordt aan de UI.
Oefening 4: Detailpagina
Bouw de detailpagina van een To-Do lijst. Deze pagina bevat een lijst van de taken en een formulier waarmee een nieuwe taak aangemaakt kan worden. Daarnaast worden ook de namen van de To-Do lijst en de gebruiker die de lijst aangemaakt heeft getoond.
Oefening 4.1: Nieuw taak formulier
Het formulier bestaat uit twee inputs, de eerste input wordt gebruikt om de naam van de nieuwe taak in te geven, het tweede element is een input van het type datetime-local. Via deze twee input kan een deadline ingegeven worden.
Gebruik de createTask functie om een nieuwe taak aan te maken via een afwachtende update, i.e. de data in de cache wordt geïnvalideerd als de create opdracht afgerond is.
Oefening 4.2: Overzicht taken
Bouw een overzicht waarmee de bestaande taken bekeken kunnen worden. Om dit overzicht te bouwen kan je gebruik maken van de TaskItem component die te vinden is in de startbestanden.
Oefening 4.2.1: Countdown
Bouw een countdown hook waarmee de tijd tot de deadline van de taak weergegeven kan worden. Deze hook moet elke seconde een aangepaste string weergeven die de tijd weergeeft in dagen, uren, minuten en seconden. Als de deadline reeds voorbij is, wordt de tekst 'DEADLINE HAS PASSED!' getoond. Natuurlijk de countdown niet getoond worden als de taak al afgewerkt is.
Het formaat van de date input kan er anders uitzien op jouw machine, dit hangt van de locale-instellingen van de browser af.
Oefening 4.2.2: Taken aanpassen
De taken moeten gemarkeerd kunnen worden als afgewerkt of niet. Iedereen die toegang heeft tot de taak kan de status van deze taak aanpassen. Gebruik hiervoor opnieuw een optimistische update.
Taken moeten natuurlijk ook verwijderd kunnen worden, dit mag echter enkel gebeuren door de gebruiker die de taak aangemaakt heeft. Andere gebruikers kunnen de delete-knop niet zien.
Onderstaande video toont de volledige werking van de detailpagina.