AaronPo/the-biergarten-app
1
0
Fork 0
mirror of https://github.com/aaronpo97/the-biergarten-app.git synced 2026-10-15 10:04:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

testing updates

Browse Source
This commit is contained in:
Aaron Po
2026-08-27 03:40:08 -04:00
parent d7e1a79fb2
commit 9f39a305d5
11 changed files with 647 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
web/frontend/app/features/breweries/components/NearbyBreweriesSection.tsx
View File

@@ -2,6 +2,7 @@ import { lazy, Suspense, useEffect, useState } from 'react';
import { useFetcher } from 'react-router';
import type { LatLngTuple } from 'leaflet';
import ClientOnly from '../../../components/ClientOnly';
import useDebouncedValue from '../../../hooks/useDebouncedValue';
import type { SimplifiedBrewery } from '../breweries.server';
import type { loader as nearbyLoader } from '../routes/breweries-nearby';
import { formatDistance, type DistanceUnit } from '../utils/distance';
@@ -14,6 +15,7 @@ const DEFAULT_RADIUS_KM = 120;
const MIN_RADIUS_KM = 10;
const MAX_RADIUS_KM = 150;
const RADIUS_STEP_KM = 10;
const RADIUS_DEBOUNCE_MS = 300;
export interface FeaturedPin {
id: string;
@@ -186,6 +188,7 @@ const NearbyBreweriesSection = ({
const [locationLabel, setLocationLabel] = useState('your location');
const [geoAttempted, setGeoAttempted] = useState(false);
const [radiusKm, setRadiusKm] = useState(DEFAULT_RADIUS_KM);
const debouncedRadiusKm = useDebouncedValue(radiusKm, RADIUS_DEBOUNCE_MS);
const [unit, setUnit] = useState<DistanceUnit>('km');
const fetcher = useFetcher<typeof nearbyLoader>();
@@ -219,10 +222,10 @@ const NearbyBreweriesSection = ({
useEffect(() => {
if (!center) return;
fetcher.load(
`/breweries/nearby?latitude=${center[0]}&longitude=${center[1]}&rangeInMetres=${radiusKm * 1000}`,
`/breweries/nearby?latitude=${center[0]}&longitude=${center[1]}&rangeInMetres=${debouncedRadiusKm * 1000}`,
);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [center?.[0], center?.[1], radiusKm]);
}, [center?.[0], center?.[1], debouncedRadiusKm]);
const nearby: SimplifiedBrewery[] = fetcher.data?.breweries ?? [];
const withDistance = center