Fixed saved Premium 93 station logic and display.

frontend/src/features/stations/pages/StationsPage.tsx

@@ -16,14 +16,14 @@ import {
   Typography
 } from '@mui/material';
 import LocalGasStationIcon from '@mui/icons-material/LocalGasStation';
-import { OctanePreference, SavedStation, Station, StationSearchRequest } from '../types/stations.types';
+import { SavedStation, Station, StationSearchRequest } from '../types/stations.types';
 import { CommunityStation, StationBounds } from '../types/community-stations.types';
 import {
   useStationsSearch,
   useSavedStations,
   useSaveStation,
   useDeleteStation,
-  useUpdateSavedStation
+  useGeolocation
 } from '../hooks';
 import {
   StationMap,
@@ -34,7 +34,7 @@ import {
   SubmitFor93Dialog,
   Premium93TabContent
 } from '../components';
-import { octanePreferenceToFlags, resolveSavedStationPlaceId } from '../utils/savedStations';
+import { resolveSavedStationPlaceId } from '../utils/savedStations';
 import { useEnrichedStations } from '../hooks/useEnrichedStations';
 
 interface TabPanelProps {
@@ -94,6 +94,13 @@ export const StationsPage: React.FC = () => {
     error: savedError
   });
 
+  // Get user's geolocation for community station lookups (fallback when no search performed)
+  const { coordinates: geoCoordinates } = useGeolocation();
+
+  // Effective coordinates: use search location if available, otherwise use geolocation
+  const effectiveLatitude = currentLocation?.latitude ?? geoCoordinates?.latitude ?? null;
+  const effectiveLongitude = currentLocation?.longitude ?? geoCoordinates?.longitude ?? null;
+
   // Enrich search results with community station data
   const { enrichedStations, communityStationsMap } = useEnrichedStations(
     searchResults,
@@ -135,8 +142,6 @@ export const StationsPage: React.FC = () => {
 
   const { mutate: saveStation } = useSaveStation();
   const { mutate: deleteStation } = useDeleteStation();
-  const { mutate: updateSavedStation } = useUpdateSavedStation();
-  const [octaneUpdatingId, setOctaneUpdatingId] = useState<string | null>(null);
 
   // Create set of saved place IDs and addresses for quick lookup
   const { savedStationsMap, savedPlaceIds, savedAddresses } = useMemo(() => {
@@ -215,12 +220,24 @@ export const StationsPage: React.FC = () => {
     });
   };
 
-  // Handle save station
+  // Handle save station - auto-copies 93 octane data from community verification
   const handleSave = (station: Station) => {
+    // Get community data for this station if available
+    const normalizedAddress = station.address
+      ?.toLowerCase()
+      .trim()
+      .replace(/\s+/g, ' ')
+      .replace(/[,]/g, '') || '';
+    const communityData = communityStationsMap.get(normalizedAddress);
+
     saveStation(
       {
         placeId: station.placeId,
-        data: { isFavorite: true }
+        data: {
+          isFavorite: true,
+          has93Octane: communityData?.has93Octane,
+          has93OctaneEthanolFree: communityData?.has93OctaneEthanolFree
+        }
       },
       {
         onSuccess: () => {
@@ -234,28 +251,28 @@ export const StationsPage: React.FC = () => {
     );
   };
 
+  // Handle save community station (auto-sets has93Octane flag)
+  const handleSaveCommunityStation = useCallback((station: CommunityStation) => {
+    saveStation({
+      placeId: station.id, // Use community station ID as placeId
+      data: {
+        isFavorite: true,
+        has93Octane: station.has93Octane,
+        has93OctaneEthanolFree: station.has93OctaneEthanolFree
+      }
+    });
+  }, [saveStation]);
+
+  // Handle unsave community station
+  const handleUnsaveCommunityStation = useCallback((stationId: string) => {
+    deleteStation(stationId);
+  }, [deleteStation]);
+
   // Handle delete station
   const handleDelete = (placeId: string) => {
     deleteStation(placeId);
   };
 
-  const handleOctanePreferenceChange = useCallback(
-    (placeId: string, preference: OctanePreference) => {
-      const flags = octanePreferenceToFlags(preference);
-      setOctaneUpdatingId(placeId);
-
-      updateSavedStation(
-        { placeId, data: flags },
-        {
-          onSettled: () => {
-            setOctaneUpdatingId((current) => (current === placeId ? null : current));
-          }
-        }
-      );
-    },
-    [updateSavedStation]
-  );
-
   // Handle station selection - wrapped in useCallback to prevent infinite renders
   const handleSelectStation = useCallback((station: Station | CommunityStation) => {
     setMapCenter({
@@ -354,19 +371,23 @@ export const StationsPage: React.FC = () => {
             error={savedError ? (savedError as any).message : null}
             onSelectStation={handleSelectStation}
             onDeleteStation={handleDelete}
-            onOctanePreferenceChange={handleOctanePreferenceChange}
-            octaneUpdatingId={octaneUpdatingId}
             onSubmitFor93={(station) => setSubmitFor93Station(station as unknown as Station)}
+            communityStationsMap={communityStationsMap}
+            latitude={effectiveLatitude}
+            longitude={effectiveLongitude}
           />
         </TabPanel>
 
         <TabPanel value={tabValue} index={2}>
           <Premium93TabContent
-            latitude={currentLocation?.latitude ?? null}
-            longitude={currentLocation?.longitude ?? null}
-            savedStations={savedStations?.filter(s => s.has93Octane) || []}
+            latitude={effectiveLatitude}
+            longitude={effectiveLongitude}
+            savedStations={savedStations}
+            communityStationsMap={communityStationsMap}
             onStationSelect={handleSelectStation}
             searchBounds={searchBounds}
+            onSaveCommunityStation={handleSaveCommunityStation}
+            onUnsaveCommunityStation={handleUnsaveCommunityStation}
             onSubmitFor93={(station) => setSubmitFor93Station(station as unknown as Station)}
             savedAddresses={savedAddresses}
           />
@@ -480,19 +501,23 @@ export const StationsPage: React.FC = () => {
               error={savedError ? (savedError as any).message : null}
               onSelectStation={handleSelectStation}
               onDeleteStation={handleDelete}
-              onOctanePreferenceChange={handleOctanePreferenceChange}
-              octaneUpdatingId={octaneUpdatingId}
               onSubmitFor93={(station) => setSubmitFor93Station(station as unknown as Station)}
+              communityStationsMap={communityStationsMap}
+              latitude={effectiveLatitude}
+              longitude={effectiveLongitude}
             />
           </TabPanel>
 
           <TabPanel value={tabValue} index={2}>
             <Premium93TabContent
-              latitude={currentLocation?.latitude ?? null}
-              longitude={currentLocation?.longitude ?? null}
-              savedStations={savedStations?.filter(s => s.has93Octane) || []}
+              latitude={effectiveLatitude}
+              longitude={effectiveLongitude}
+              savedStations={savedStations}
+              communityStationsMap={communityStationsMap}
               onStationSelect={handleSelectStation}
               searchBounds={searchBounds}
+              onSaveCommunityStation={handleSaveCommunityStation}
+              onUnsaveCommunityStation={handleUnsaveCommunityStation}
               onSubmitFor93={(station) => setSubmitFor93Station(station as unknown as Station)}
               savedAddresses={savedAddresses}
             />