Refactor MapboxProvider Logic Using Custom Hooks

[takuyaW]

Background

The current MapboxProvider component needs to be refactored by extracting logic into custom hooks to achieve better separation of concerns.

Implementation

1. Create useMapSetup Hook

This hook will handle map initialization and configuration.

const useMapSetup = (containerId: string) => {
  // Map initialization and configuration logic
  return {
    map,
    isLoading,
    error
  };
};

2. Create useMarkers Hook

This hook will manage marker-related state and operations.

const useMarkers = (map: mapboxgl.Map | null, locations: Location[]) => {
  // Marker state management
  return {
    markers,
    addMarker,
    removeMarker,
    updateMarkers
  };
};

3. Create useLocationFilters Hook

This hook will handle location filtering functionality.

const useLocationFilters = (initialFilters: LocationTypes[]) => {
  // Filter management logic
  return {
    activeFilters,
    setActiveFilters,
    filterLocations
  };
};

Technical Considerations

• Ensure proper cleanup in hooks using useEffect cleanup functions
• Maintain TypeScript type safety
• Consider memoization for performance optimization

[cat-thimm]

@takuyaW From my understanding the problem with several custom hooks is that i will create several states in different hooks that depend on each other. So I think leaving them at one place will make the logic easier and would prevent race conditions (for example all hooks will need to work with the same maps instance that i will need to pass around etc.)