Ga naar inhoud

Nieuws (Frontend)

UI-Architectuur & Design

De nieuwsmodule werkt op mobiel en desktop. Op mobiel is het een compacte lijst met een actieknop voor beheerders, op desktop een ruimere weergave met filters en zoekopties. Navigatie verloopt via Expo Router; elk bericht heeft een eigen URL voor dieplinken. Een bericht kan een foto, een video, een PDF of een tekstbericht met een gekozen icoon zijn. Berichten waarvan de media nog wordt verwerkt tonen een laad-indicator; mislukte verwerking toont een waarschuwing met de mogelijkheid om opnieuw te proberen.

Component-hierarchie

graph TD
    NieuwsScreen --> CategoryPillsBar
    NieuwsScreen --> NewsListItem
    NieuwsScreen --> AddNewsItemModal
    NieuwsScreen --> CategoryManagerModal
    AddNewsItemModal --> RichEditorLite
    AddNewsItemModal --> IconColorPickerModal
    AddNewsItemModal --> VideoFramePicker
    NewsListItem --> NieuwsDetailScreen
    NieuwsDetailScreen --> PdfViewer
    NieuwsDetailScreen --> RichEditorLite

State & Data Flow

De lijst gebruikt usePaginatedList met een paginagrootte van 50. Categorieen worden bij openen en bij focus geladen. Zolang een bericht media in verwerking heeft (queued of processing) polt het scherm elke 4 seconden tot alles ready of failed is. Het toevoegformulier bewaart een concept in lokale opslag (news_add_draft_v1) zodat invoer niet verloren gaat.

Media-uploads lopen langs twee paden. Afbeeldingen gaan als multipart naar de backend, die ze omzet naar WebP. Video's en PDF's gaan via een presigned POST rechtstreeks naar S3; daarna wordt de upload afgerond en de verwerking ingepland. Het bericht wordt pas aangemaakt nadat de mediastap is afgehandeld.

Flow: nieuwsbericht toevoegen

sequenceDiagram
    participant Gebruiker
    participant Modal as AddNewsItemModal
    participant API as newsApi
    participant S3
    participant Backend

    Gebruiker->>Modal: Vult gegevens in en kiest media
    alt foto
      Modal->>API: uploadNewsMedia (multipart)
      API->>Backend: POST /api/nieuws/media/
      Backend-->>API: WebP S3-key
    else video / pdf
      Modal->>API: directUpload
      API->>Backend: POST /api/nieuws/media/upload-url/
      Backend-->>API: presigned POST
      API->>S3: upload bestand
      API->>Backend: POST /api/nieuws/media/complete/
      Backend-->>API: queued
    end
    Modal->>API: createItem
    API->>Backend: POST /api/nieuws/items/
    Backend-->>API: bericht
    Modal->>NieuwsScreen: sluit en ververst de lijst
  • /nieuws - hoofdscherm met de pagina-genummerde lijst.
  • /nieuws/[id] - detailscherm van een bericht; polt door terwijl media wordt verwerkt en biedt liken plus (met news.edit) bewerken en verwijderen.
  • /nieuws/nieuw - scherm voor een nieuw bericht.
  • Modals worden ingezet voor het toevoegen van een bericht, het kiezen van een icoon en het beheren van categorieen.

Bestandsstructuur & Verantwoordelijkheden

  • src/features/nieuws/api/newsApi.ts - alle communicatie met de backend, inclusief de upload-routing (multipart versus directe S3) en likes.
  • src/features/nieuws/screens/ - NieuwsScreen, NieuwsDetailScreen en NieuwsNieuwScreen.
  • src/features/nieuws/components/ - lijstitem, categoriebalk, het toevoegformulier, de categorie-manager, de icoonkiezer, de video-framekiezer, de PDF-viewer en de tekst-editor.
  • src/features/nieuws/types.ts - de datastructuren voor categorie, media (de vier varianten), auteur, likes en bericht.
  • src/features/nieuws/components/skeletons/ - laadskeletten voor de lijst en het detailscherm.

Belangrijke bestanden

  • src/features/nieuws/api/newsApi.ts
  • src/features/nieuws/screens/NieuwsScreen.tsx
  • src/features/nieuws/components/AddNewsItemModal.tsx
  • src/features/nieuws/components/PdfViewer.tsx