feat(frontend): add configuration and confirm dialog components

- Introduced a new configuration file to manage API base URL and Mapbox token.
- Added a ConfirmDialog component for consistent confirmation prompts across the application.
- Updated MapView and other components to utilize the new hooks for improved modularity and maintainability.
- Refactored imports in MapView to align with the new directory structure for hooks and utilities.

This commit enhances the overall structure and user experience by providing reusable components and centralized configuration management.

Author: cosmith

frontend/src/components/common/ConfirmDialog.tsx

@@ -0,0 +1,75 @@
+import React from 'react'
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalFooter,
+  ModalBody,
+  ModalCloseButton,
+  Button,
+  Text,
+  Alert,
+  AlertIcon,
+} from '@chakra-ui/react'
+
+interface ConfirmDialogProps {
+  isOpen: boolean
+  onClose: () => void
+  onConfirm: () => void
+  title: string
+  confirmLabel?: string
+  severity?: 'warning' | 'info'
+  body?: React.ReactNode
+  nameHighlight?: string
+}
+
+export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
+  isOpen,
+  onClose,
+  onConfirm,
+  title,
+  confirmLabel = 'Confirm',
+  severity = 'warning',
+  body,
+  nameHighlight,
+}) => (
+  <Modal isOpen={isOpen} onClose={onClose}>
+    <ModalOverlay />
+    <ModalContent>
+      <ModalHeader>{title}</ModalHeader>
+      <ModalCloseButton />
+      <ModalBody>
+        <Alert status={severity} mb={4}>
+          <AlertIcon />
+          This action cannot be undone.
+        </Alert>
+        {body ?? (
+          <Text>
+            Are you sure you want to proceed
+            {nameHighlight ? (
+              <>
+                {' '}
+                with{' '}
+                <Text as="span" fontWeight="bold">
+                  {nameHighlight}
+                </Text>
+                ?
+              </>
+            ) : (
+              '?'
+            )}
+          </Text>
+        )}
+      </ModalBody>
+      <ModalFooter>
+        <Button variant="ghost" mr={3} onClick={onClose}>
+          Cancel
+        </Button>
+        <Button colorScheme="red" onClick={onConfirm}>
+          {confirmLabel}
+        </Button>
+      </ModalFooter>
+    </ModalContent>
+  </Modal>
+)

frontend/src/components/maps/MapControls.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Box, Text, VStack, HStack, Switch, FormLabel } from '@chakra-ui/react'
-import { MapControls } from '../../types/map'
+import type { MapControls } from '../../types/map'
 
 interface MapControlsProps {
   controls: MapControls

frontend/src/components/maps/MapView.tsx

@@ -1,16 +1,17 @@
 import React, { useEffect, useState, useRef } from 'react'
 import mapboxgl from 'mapbox-gl'
 import { Box, Text, useDisclosure } from '@chakra-ui/react'
-import { useMapData } from '../../hooks/useMapData'
-import { useStopMarkers } from '../../hooks/useStopMarkers'
-import { useVehicleMarkers } from '../../hooks/useVehicleMarkers'
-import { useTripRoutes } from '../../hooks/useTripRoutes'
-import { useMapClickHandler } from '../../hooks/useMapClickHandler'
+import { useMapData } from './hooks/useMapData'
+import { useStopMarkers } from './hooks/useStopMarkers'
+import { useVehicleMarkers } from './hooks/useVehicleMarkers'
+import { useTripRoutes } from './hooks/useTripRoutes'
+import { useMapClickHandler } from './hooks/useMapClickHandler'
 import { useAuth } from '../../contexts/AuthContext'
 import type { MapControls, Trip } from '../../types/map'
-import { getMapCustomCSS } from '../../utils/mapStyles'
+import { getMapCustomCSS } from './utils/mapStyles'
 import MapControlsComponent from './MapControls'
 import { TripDetailsDrawer } from '../trips/TripDetailsDrawer'
+import { get } from '../../lib/api'
 import 'mapbox-gl/dist/mapbox-gl.css'
 
 const MapView: React.FC = () => {
@@ -37,22 +38,11 @@ const MapView: React.FC = () => {
     if (selectedTrip && token) {
       try {
         // Fetch the latest trip data
-        const response = await fetch(
-          `http://localhost:8000/api/trips/${selectedTrip.id}/`,
-          {
-            headers: {
-              Authorization: `Token ${token}`,
-              'Content-Type': 'application/json',
-            },
-          }
-        )
-        if (response.ok) {
-          const updatedTrip = await response.json()
-          // Update the selected trip state
-          setSelectedTrip(updatedTrip)
-          // Refresh just this trip's route on the map
-          tripRoutes.refreshSelectedTrip(updatedTrip, controls.showTrips)
-        }
+        const updatedTrip = await get<Trip>(`/trips/${selectedTrip.id}/`)
+        // Update the selected trip state
+        setSelectedTrip(updatedTrip)
+        // Refresh just this trip's route on the map
+        tripRoutes.refreshSelectedTrip(updatedTrip, controls.showTrips)
       } catch (error) {
         console.error('Error fetching updated trip:', error)
       }

frontend/src/hooks/useMapClickHandler.ts …ponents/maps/hooks/useMapClickHandler.tsfrontend/src/hooks/useMapClickHandler.ts renamed to frontend/src/components/maps/hooks/useMapClickHandler.ts frontend/src/hooks/useMapClickHandler.ts renamed to frontend/src/components/maps/hooks/useMapClickHandler.ts

@@ -1,8 +1,8 @@
 import { useCallback } from 'react'
-import mapboxgl from 'mapbox-gl'
+import type { Map } from 'mapbox-gl'
 
 export const useMapClickHandler = (
-  map: React.MutableRefObject<mapboxgl.Map | null>,
+  map: React.MutableRefObject<Map | null>,
   closeAllPopups: () => void
 ) => {
   const setupMapClickHandler = useCallback(() => {

frontend/src/components/maps/hooks/useMapData.ts

@@ -0,0 +1,69 @@
+import { useState, useEffect, useCallback } from 'react'
+import type { Stop, Trip, VehiclePosition } from '../../../types/map'
+import { useAuth } from '../../../contexts/AuthContext'
+import { get } from '../../../lib/api'
+
+export const useMapData = () => {
+  const [stops, setStops] = useState<Stop[]>([])
+  const [trips, setTrips] = useState<Trip[]>([])
+  const [vehiclePositions, setVehiclePositions] = useState<VehiclePosition[]>(
+    []
+  )
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  const { token } = useAuth()
+
+  const fetchStops = useCallback(async () => {
+    try {
+      setLoading(true)
+      const stops = await get<Stop[]>('/stops/')
+      const stopsWithCoords = stops.filter(
+        (stop: Stop) => stop.latitude && stop.longitude
+      )
+      setStops(stopsWithCoords)
+    } catch (error) {
+      console.error('Error fetching stops:', error)
+      setError('Failed to load stops')
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  const fetchTrips = useCallback(async () => {
+    try {
+      const trips = await get<Trip[]>('/trips/')
+      setTrips(trips)
+    } catch (error) {
+      console.error('Error fetching trips:', error)
+    }
+  }, [])
+
+  const fetchVehiclePositions = useCallback(async () => {
+    try {
+      const positions = await get<VehiclePosition[]>('/positions/latest/')
+      setVehiclePositions(positions)
+    } catch (error) {
+      console.error('Error fetching vehicle positions:', error)
+    }
+  }, [])
+
+  useEffect(() => {
+    if (token) {
+      fetchStops()
+      fetchTrips()
+      fetchVehiclePositions()
+    }
+  }, [token, fetchStops, fetchTrips, fetchVehiclePositions])
+
+  return {
+    stops,
+    trips,
+    vehiclePositions,
+    loading,
+    error,
+    refetchStops: fetchStops,
+    refetchTrips: fetchTrips,
+    refetchVehiclePositions: fetchVehiclePositions,
+  }
+}

frontend/src/hooks/useMapLayers.ts …rc/components/maps/hooks/useMapLayers.tsfrontend/src/hooks/useMapLayers.ts renamed to frontend/src/components/maps/hooks/useMapLayers.ts frontend/src/hooks/useMapLayers.ts renamed to frontend/src/components/maps/hooks/useMapLayers.ts

@@ -1,6 +1,6 @@
 import { useRef, useCallback } from 'react'
 import mapboxgl from 'mapbox-gl'
-import { Stop, Trip, VehiclePosition } from '../types/map'
+import type { Stop, Trip, VehiclePosition } from '../../../types/map'
 import {
   createStopPopupContent,
   createTripPopupContent,

frontend/src/hooks/useMapPopups.ts …rc/components/maps/hooks/useMapPopups.tsfrontend/src/hooks/useMapPopups.ts renamed to frontend/src/components/maps/hooks/useMapPopups.ts frontend/src/hooks/useMapPopups.ts renamed to frontend/src/components/maps/hooks/useMapPopups.ts

@@ -1,6 +1,6 @@
 import { useRef, useCallback } from 'react'
 import mapboxgl from 'mapbox-gl'
-import type { Stop } from '../types/map'
+import type { Stop } from '../../../types/map'
 import { createStopPopupContent } from '../utils/mapPopups'
 import { createStopMarkerElement } from '../utils/mapStyles'
 export const useStopMarkers = (

frontend/src/hooks/useStopMarkers.ts …/components/maps/hooks/useStopMarkers.tsfrontend/src/hooks/useStopMarkers.ts renamed to frontend/src/components/maps/hooks/useStopMarkers.ts frontend/src/hooks/useStopMarkers.ts renamed to frontend/src/components/maps/hooks/useStopMarkers.ts

@@ -1,6 +1,6 @@
 import { useRef, useCallback } from 'react'
 import mapboxgl from 'mapbox-gl'
-import type { Trip } from '../types/map'
+import type { Trip } from '../../../types/map'
 import { createTripPopupContent } from '../utils/mapPopups'
 import { getStatusColor } from '../utils/mapStyles'
 export const useTripRoutes = (

frontend/src/hooks/useTripRoutes.ts …c/components/maps/hooks/useTripRoutes.tsfrontend/src/hooks/useTripRoutes.ts renamed to frontend/src/components/maps/hooks/useTripRoutes.ts frontend/src/hooks/useTripRoutes.ts renamed to frontend/src/components/maps/hooks/useTripRoutes.ts

@@ -1,6 +1,6 @@
 import { useRef, useCallback } from 'react'
 import mapboxgl from 'mapbox-gl'
-import type { VehiclePosition } from '../types/map'
+import type { VehiclePosition } from '../../../types/map'
 import { createVehiclePopupContent } from '../utils/mapPopups'
 import { createVehicleArrowElement } from '../utils/mapStyles'
 export const useVehicleMarkers = (