The WorldMap view is the central interactive interface of the application, allowing users to visually select and manage visited countries.

Purpose

This view combines map-based interaction (via Leaflet) with a textual country selector. It enables users to:

• Click on countries to stage them for selection or removal.
• Confirm or cancel these changes using dedicated controls.
• View selected countries persistently across sessions.

Component Breakdown

This view is composed of the following collocated files:

• WorldMap.tsx - Contains the main logic and UI structure, including map rendering, state management, and interaction handlers.
• WorldMap.test.tsx - A unit test that mocks external dependencies like Leaflet and verifies the view renders correctly.
• WorldMap.css - Scoped CSS that handles layout, sizing, and positioning of elements like the map and buttons.

Each of these files lives side-by-side to promote clarity, separation of concerns, and ease of maintenance.

Key Subcomponents Used

• CountriesLayer - Renders interactive country polygons.
• CountrySelector - Offers an alternative list-based UI to toggle country selections.
• ConfirmButton / CancelButton - Controls to apply or discard pending changes.

These are imported from the respective component and button folders.