From 6ddfcadbdebf8a7f4c3df90a92747335f707addb Mon Sep 17 00:00:00 2001
From: Tudor <tudor@sitaru.org>
Date: Mon, 23 Mar 2026 22:39:50 +0000
Subject: [PATCH] fix(search): correct radius units and distance display for
 postcode search

FilterBar was sending radius in km (e.g. 1.6) but the backend expects miles,
causing the "Showing schools within X miles" banner to display the wrong value.
Change option values to miles (0.5, 1, 3, 5, 10) and default from 1.6 to 1.

school.distance from the API is already in miles (backend haversine uses
R=3959). SchoolRow was dividing by 1609.34 giving 0.0 mi; CompactSchoolItem
was dividing by 1.60934. Both now display school.distance directly.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 nextjs-app/components/FilterBar.tsx | 14 +++++++-------
 nextjs-app/components/HomeView.tsx  |  4 ++--
 nextjs-app/components/SchoolRow.tsx |  2 +-
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/nextjs-app/components/FilterBar.tsx b/nextjs-app/components/FilterBar.tsx
index 423ff14..6c08b94 100644
--- a/nextjs-app/components/FilterBar.tsx
+++ b/nextjs-app/components/FilterBar.tsx
@@ -20,7 +20,7 @@ export function FilterBar({ filters, isHero }: FilterBarProps) {
 
   const currentSearch = searchParams.get('search') || '';
   const currentPostcode = searchParams.get('postcode') || '';
-  const currentRadius = searchParams.get('radius') || '1.6';
+  const currentRadius = searchParams.get('radius') || '1';
   const initialOmniValue = currentPostcode || currentSearch;
 
   const [omniValue, setOmniValue] = useState(initialOmniValue);
@@ -69,7 +69,7 @@ export function FilterBar({ filters, isHero }: FilterBarProps) {
     }
 
     if (isValidPostcode(omniValue)) {
-      updateURL({ postcode: omniValue.trim().toUpperCase(), radius: currentRadius || '1.6', search: '' });
+      updateURL({ postcode: omniValue.trim().toUpperCase(), radius: currentRadius || '1', search: '' });
     } else {
       updateURL({ search: omniValue.trim(), postcode: '', radius: '' });
     }
@@ -113,11 +113,11 @@ export function FilterBar({ filters, isHero }: FilterBarProps) {
               className={styles.radiusSelect}
               disabled={isPending}
             >
-              <option value="0.8">0.5 miles</option>
-              <option value="1.6">1 mile</option>
-              <option value="4.8">3 miles</option>
-              <option value="8.0">5 miles</option>
-              <option value="16.0">10 miles</option>
+              <option value="0.5">0.5 miles</option>
+              <option value="1">1 mile</option>
+              <option value="3">3 miles</option>
+              <option value="5">5 miles</option>
+              <option value="10">10 miles</option>
             </select>
           </div>
         )}
diff --git a/nextjs-app/components/HomeView.tsx b/nextjs-app/components/HomeView.tsx
index 869eec6..e0e9040 100644
--- a/nextjs-app/components/HomeView.tsx
+++ b/nextjs-app/components/HomeView.tsx
@@ -147,7 +147,7 @@ export function HomeView({ initialSchools, filters, totalSchools }: HomeViewProp
             {searchParams.get('search') && <span className={styles.filterChip}>Search: {searchParams.get('search')}<a href="/" className={styles.chipRemove} onClick={e => { e.preventDefault(); }}>×</a></span>}
             {searchParams.get('local_authority') && <span className={styles.filterChip}>{searchParams.get('local_authority')}</span>}
             {searchParams.get('school_type') && <span className={styles.filterChip}>{searchParams.get('school_type')}</span>}
-            {searchParams.get('postcode') && <span className={styles.filterChip}>Near {searchParams.get('postcode')} ({(parseFloat(searchParams.get('radius') || '1.6') / 1.60934).toFixed(1)} mi)</span>}
+            {searchParams.get('postcode') && <span className={styles.filterChip}>Near {searchParams.get('postcode')} ({parseFloat(searchParams.get('radius') || '1')} mi)</span>}
           </div>
         )}
 
@@ -248,7 +248,7 @@ function CompactSchoolItem({ school, onAddToCompare, isInCompare }: CompactSchoo
           </a>
           {school.distance !== undefined && school.distance !== null && (
             <span className={styles.distanceBadge}>
-              {(school.distance / 1.60934).toFixed(1)} mi
+              {school.distance.toFixed(1)} mi
             </span>
           )}
         </div>
diff --git a/nextjs-app/components/SchoolRow.tsx b/nextjs-app/components/SchoolRow.tsx
index 30f528a..64923d9 100644
--- a/nextjs-app/components/SchoolRow.tsx
+++ b/nextjs-app/components/SchoolRow.tsx
@@ -108,7 +108,7 @@ export function SchoolRow({
             )}
           {isLocationSearch && school.distance != null && (
             <span className={styles.distanceBadge}>
-              {(school.distance / 1609.34).toFixed(1)} mi
+              {school.distance.toFixed(1)} mi
             </span>
           )}
         </div>