Refactor API clients and update project structure for TimeToLeave

src/app/event/EventCard.tsx

@@ -1,27 +1,47 @@
 'use client';
 
-import React from 'react';
-import { Event, TripDataEntry } from '@/types';
+import React, { useState, useCallback } from 'react';
+import { Event, Station } from '@/types';
 import TrainSection from './TrainSection';
 import BikeSection from './BikeSection';
 import LeaveByBadge from './LeaveByBadge';
 import { calculateCountdown } from '@/lib/countdown-utils';
+import { useDestinationStation } from '@/hooks/useDestinationStation';
+import { useGeocode } from '@/hooks/useGeocode';
+import { useJourneys } from '@/hooks/useJourneys';
+import { useBikeRoute } from '@/hooks/useBikeRoute';
+import { useGeolocation } from '@/hooks/useGeolocation';
 
 type EventCardProps = {
   event: Event;
-  tripData: TripDataEntry;
+  originStation: Station | null;
   className?: string;
 };
 
-const EventCard: React.FC<EventCardProps> = ({
-  event,
-  tripData,
-  className = '',
-}) => {
+const EventCard: React.FC<EventCardProps> = ({ event, originStation, className = '' }) => {
+  const [refreshKey, setRefreshKey] = useState(0);
+  const handleRefresh = useCallback(() => setRefreshKey((k) => k + 1), []);
+
+  const { location } = useGeolocation();
+  const { station: destStation } = useDestinationStation(event.destination);
+  const { coords: destCoords } = useGeocode(event.destination);
+
+  const { journeys, loading, error } = useJourneys(
+    originStation?.extId ?? null,
+    destStation?.extId ?? null,
+    event.eventTime,
+    refreshKey,
+  );
+
+  const { bikeRoute, loading: bikeLoading, error: bikeError } = useBikeRoute(
+    location?.coords.latitude,
+    location?.coords.longitude,
+    destCoords?.lat,
+    destCoords?.lng,
+  );
+
   return (
-    <div className={
-      `bg-white dark:bg-gray-800 rounded-lg shadow-sm overflow-hidden ${className}`
-    }>
+    <div className={`bg-white dark:bg-gray-800 rounded-lg shadow-sm overflow-hidden ${className}`}>
       <div className="p-4 border-b border-gray-200 dark:border-gray-700">
         <div className="flex items-start justify-between">
           <div className="flex-1">
@@ -35,15 +55,17 @@ const EventCard: React.FC<EventCardProps> = ({
       </div>
       <div className="p-4">
         <TrainSection
-          journeys={tripData.journeys}
+          journeys={journeys}
           eventTime={event.eventTime}
-          destName={event.destination}
-          loading={tripData.loading}
+          destName={destStation?.name ?? event.destination}
+          loading={loading}
+          error={error}
+          onRefresh={handleRefresh}
         />
         <BikeSection
-          bikeRoute={tripData.bikeRoute}
-          bikeLoading={tripData.bikeLoading || false}
-          bikeError={tripData.bikeError}
+          bikeRoute={bikeRoute}
+          bikeLoading={bikeLoading}
+          bikeError={bikeError}
         />
       </div>
     </div>