Ga naar inhoud

Agenda (Frontend)

De Agenda-module biedt een visueel overzicht van afspraken en verjaardagen, met ondersteuning voor zowel mobiele als desktop-gebruikers.

UI-Architectuur & Design

De frontend is opgebouwd rond de AgendaScreen, die fungeert als de centrale controller voor de module. De interface past zich aan op basis van het schermformaat (isDesktop check) en de geselecteerde modus.

Component Hiërarchie

graph TD
    AgendaScreen --> HeaderMobile/Desktop
    AgendaScreen --> SegmentedControl[Modus Kiezer]
    AgendaScreen --> WeekNavigator
    AgendaScreen --> AgendaContent
    AgendaContent --> WeekStrip[Lijst Modus]
    AgendaContent --> AgendaList
    AgendaContent --> MonthCalendar[Kalender Modus]
    AgendaContent --> BirthdayList[Verjaardagen Modus]
    AgendaScreen --> AddAgendaItemModal[Modals]
    AgendaScreen --> SyncAgendaModal

De UI maakt gebruik van een SegmentedControl om te schakelen tussen de drie hoofdfuncties: 1. Lijst: Een dag-bij-dag overzicht met een WeekStrip voor snelle datumnavigatie. 2. Kalender: Een volledige maandkalender (MonthCalendar) die aangeeft op welke dagen er afspraken zijn (via een 'dot' indicator). 3. Verjaardagen: Een chronologische lijst van aankomende verjaardagen.

State & Data Flow

De module gebruikt React hooks (useState, useMemo, useCallback) voor state-management. Er wordt geen globale store gebruikt; alle data wordt per sessie opgehaald en in de AgendaScreen vastgehouden.

  • Data ophalen: Bij het laden van de pagina of het wijzigen van de anchorDate (geselecteerde week/maand) wordt listAgendaItems aangeroepen.
  • Filtering: De lijst wordt lokaal gefilterd op basis van de geselecteerde dag of een zoekopdracht. De useMemo hook filteredForList zorgt voor efficiënte herberekening bij wijzigingen in de zoekterm of datum.
  • Optimistic Updates: Bij het verwijderen van een item wordt de lokale state direct bijgewerkt (setItems) om een snelle interface te garanderen.

De module is geïntegreerd met de Expo Router en is bereikbaar via de route /agenda.

  • Modals: Voor interactieve acties (toevoegen, bewerken, sync-instellingen) wordt gebruik gemaakt van AppModal. Dit houdt de hoofdpagina licht en gefocust.
  • Deep Linking: Hoewel de module momenteel voornamelijk state-based werkt, kan deze worden uitgebreid om specifieke items te openen via URL-parameters.

Bestandsstructuur & Verantwoordelijkheden

De code is strikt gescheiden volgens de modulestructuur onder src/features/agenda/:

  • src/features/agenda/api/agendaApi.ts: Bevat alle API-functies (REST) voor communicatie met de backend.
  • src/features/agenda/components/AgendaList.tsx: Verantwoordelijk voor het renderen van de lijst met afspraken, gegroepeerd per dag.
  • src/features/agenda/components/AddAgendaItemModal.tsx: Een complex formulier voor het maken en bewerken van afspraken, inclusief herinneringen en deelnemers.
  • src/features/agenda/components/MonthCalendar.tsx: Een grid-gebaseerde maandkalender met selectie-logica.
  • src/features/agenda/components/BirthdayList.tsx: Toont de aankomende verjaardagen van teamleden.
  • src/features/agenda/components/SyncAgendaModal.tsx: Beheert de iCal-abonnementslink (webcal-feed) voor externe agenda's.
  • src/features/agenda/screens/AgendaScreen.tsx: De hoofd-container die de lay-out en business logic beheert.
  • src/features/agenda/types/agenda.ts: TypeScript definities voor API-responses en payload-structuren.

Belangrijke bestanden

  • screens/AgendaScreen.tsx: De "brain" van de frontend module.
  • api/agendaApi.ts: Definieert de verbinding met de backend endpoints.
  • components/AddAgendaItemModal.tsx: Bevat de logica voor het beheer van deelnemers (rollen/gebruikers) en herinnerings-offsets.