Files
school_compare/nextjs-app/app/page.tsx
Tudor 1c0e6298f2
All checks were successful
Build and Push Docker Images / Build Backend (FastAPI) (push) Successful in 34s
Build and Push Docker Images / Build Frontend (Next.js) (push) Successful in 1m12s
Build and Push Docker Images / Trigger Portainer Update (push) Successful in 0s
Fix: Improve UX with empty state, miles, and metric labels
1. Show empty state by default on home page
   - Don't fetch or display schools until user searches
   - Show helpful message prompting users to search
   - Only fetch schools when search params are present

2. Change distance search to miles
   - Display 0.5, 1, and 2 mile options instead of km
   - Convert miles to km when sending to API (backend expects km)
   - Convert km back to miles for display in location banner
   - Maintains backend compatibility while improving UX

3. Fix metric labels in rankings dropdown
   - Backend returns 'name' and 'type' fields
   - Frontend expects 'label' and 'format' fields
   - Added transformation in fetchMetrics to map fields
   - Dropdown now shows proper labels like "RWM Combined %"
     instead of technical codes like "rwm_expected_pct"

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2026-02-02 22:21:55 +00:00

83 lines
2.2 KiB
TypeScript

/**
* Home Page (SSR)
* Main landing page with school search and browsing
*/
import { fetchSchools, fetchFilters } from '@/lib/api';
import { HomeView } from '@/components/HomeView';
interface HomePageProps {
searchParams: Promise<{
search?: string;
local_authority?: string;
school_type?: string;
page?: string;
postcode?: string;
radius?: string;
}>;
}
export const metadata = {
title: 'Home',
description: 'Search and compare primary school KS2 performance across England',
};
// Force dynamic rendering (no static generation at build time)
export const dynamic = 'force-dynamic';
export default async function HomePage({ searchParams }: HomePageProps) {
// Await search params (Next.js 15 requirement)
const params = await searchParams;
// Parse search params
const page = parseInt(params.page || '1');
const radius = params.radius ? parseFloat(params.radius) : undefined;
// Check if user has performed a search
const hasSearchParams = !!(
params.search ||
params.local_authority ||
params.school_type ||
params.postcode
);
// Fetch data on server with error handling
try {
const filtersData = await fetchFilters();
// Only fetch schools if there are search parameters
let schoolsData;
if (hasSearchParams) {
schoolsData = await fetchSchools({
search: params.search,
local_authority: params.local_authority,
school_type: params.school_type,
postcode: params.postcode,
radius,
page,
page_size: 50,
});
} else {
// Empty state by default
schoolsData = { schools: [], page: 1, page_size: 50, total: 0, total_pages: 0 };
}
return (
<HomeView
initialSchools={schoolsData}
filters={filtersData || { local_authorities: [], school_types: [], years: [] }}
/>
);
} catch (error) {
console.error('Error fetching data for home page:', error);
// Return error state with empty data
return (
<HomeView
initialSchools={{ schools: [], page: 1, page_size: 50, total: 0, total_pages: 0 }}
filters={{ local_authorities: [], school_types: [], years: [] }}
/>
);
}
}