The CountriesLayer component renders the interactive country polygons on the map using Leaflet’s GeoJSON layer. It is responsible for applying visual styles and event handlers based on the current selection state of each country.

Purpose

This layer visually reflects the application’s selection logic by:

• Highlighting confirmed and pending country selections
• Reacting to hover and click events
• Communicating user interactions back to the parent view

File Structure

The component is co-located with its test and style files to promote clarity and modularity:

src/
├── Components/
│   └── layers/
│       └── CountriesLayer/
│           ├── CountriesLayer.tsx
│           └── CountriesLayer.test.tsx
│

Behavior Summary

• Selection states are reflected visually via color styles (confirmed, pending add, pending remove).
• Hover effects give users immediate visual feedback on interactivity.
• Click events trigger callbacks to allow selection changes at the view level.
• Reactivity ensures that any change to the selection state updates the map without full re-renders.

Testing

Basic unit tests mock Leaflet’s behavior and verify that the component renders and responds to selection props and callbacks as expected.