school_compare/nextjs-app/app/page.tsx

/**
 * Home Page (SSR)
 * Main landing page with school search and browsing
 */

import { fetchSchools, fetchFilters, fetchDataInfo } from '@/lib/api';
import { HomeView } from '@/components/HomeView';
import { HowItWorksSection } from '@/components/HowItWorksSection';
import { EditorialSection } from '@/components/EditorialSection';

interface HomePageProps {
  searchParams: Promise<{
    search?: string;
    local_authority?: string;
    school_type?: string;
    phase?: string;
    page?: string;
    postcode?: string;
    radius?: string;
    sort?: string;
    gender?: string;
    admissions_policy?: string;
    has_sixth_form?: string;
  }>;
}

export const metadata = {
  title: 'Home',
  description: 'Search and compare school performance across England',
};

// The page reads searchParams, which makes rendering dynamic by default.
// We don't use `force-dynamic` here so the internal filter/data-info fetches
// can still hit Next.js's data cache (configured per-call in lib/api.ts).

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.phase ||
    params.postcode ||
    params.gender ||
    params.admissions_policy ||
    params.has_sixth_form
  );

  // Fetch data on server with error handling
  try {
    const [filtersData, dataInfo] = await Promise.all([fetchFilters(), fetchDataInfo().catch(() => null)]);

    // 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,
        phase: params.phase,
        postcode: params.postcode,
        radius,
        page,
        page_size: 50,
        gender: params.gender,
        admissions_policy: params.admissions_policy,
        has_sixth_form: params.has_sixth_form,
      });
    } else {
      // Empty state by default
      schoolsData = { schools: [], page: 1, page_size: 50, total: 0, total_pages: 0 };
    }

    const resolvedFilters = filtersData || { local_authorities: [], school_types: [], years: [], phases: [], genders: [], admissions_policies: [] };
    const total = dataInfo?.total_schools ?? null;
    return (
      <HomeView
        initialSchools={schoolsData}
        filters={resolvedFilters}
        totalSchools={total}
        howItWorks={hasSearchParams ? null : <HowItWorksSection />}
        editorial={hasSearchParams ? null : <EditorialSection totalSchools={total} localAuthorityCount={resolvedFilters.local_authorities.length} />}
      />
    );
  } catch (error) {
    console.error('Error fetching data for home page:', error);

    const emptyFilters = { local_authorities: [], school_types: [], years: [], phases: [], genders: [], admissions_policies: [] };
    return (
      <HomeView
        initialSchools={{ schools: [], page: 1, page_size: 50, total: 0, total_pages: 0 }}
        filters={emptyFilters}
        totalSchools={null}
        howItWorks={hasSearchParams ? null : <HowItWorksSection />}
        editorial={hasSearchParams ? null : <EditorialSection totalSchools={null} localAuthorityCount={0} />}
      />
    );
  }
}