diff --git a/nextjs-app/app/page.tsx b/nextjs-app/app/page.tsx index f73d401..2180a5b 100644 --- a/nextjs-app/app/page.tsx +++ b/nextjs-app/app/page.tsx @@ -15,6 +15,7 @@ interface HomePageProps { page?: string; postcode?: string; radius?: string; + sort?: string; }>; } diff --git a/nextjs-app/components/HomeView.tsx b/nextjs-app/components/HomeView.tsx index c81c6cd..a8fe55d 100644 --- a/nextjs-app/components/HomeView.tsx +++ b/nextjs-app/components/HomeView.tsx @@ -6,7 +6,7 @@ 'use client'; import { useState, useEffect, useRef } from 'react'; -import { useSearchParams } from 'next/navigation'; +import { useSearchParams, useRouter, usePathname } from 'next/navigation'; import { FilterBar } from './FilterBar'; import { SchoolRow } from './SchoolRow'; import { SecondarySchoolRow } from './SecondarySchoolRow'; @@ -26,10 +26,12 @@ interface HomeViewProps { export function HomeView({ initialSchools, filters, totalSchools }: HomeViewProps) { const searchParams = useSearchParams(); + const router = useRouter(); + const pathname = usePathname(); const { addSchool, removeSchool, selectedSchools } = useComparisonContext(); const [resultsView, setResultsView] = useState<'list' | 'map'>('list'); const [selectedMapSchool, setSelectedMapSchool] = useState(null); - const [sortOrder, setSortOrder] = useState('default'); + const sortOrder = searchParams.get('sort') || 'default'; const [allSchools, setAllSchools] = useState(initialSchools.schools); const [currentPage, setCurrentPage] = useState(initialSchools.page); const [hasMore, setHasMore] = useState(initialSchools.total_pages > 1); @@ -193,7 +195,19 @@ export function HomeView({ initialSchools, filters, totalSchools }: HomeViewProp )} {resultsView === 'list' && ( - { + const params = new URLSearchParams(searchParams); + if (e.target.value === 'default') { + params.delete('sort'); + } else { + params.set('sort', e.target.value); + } + router.push(`${pathname}?${params.toString()}`); + }} + className={styles.sortSelect} + > {!isSecondaryView && } {!isSecondaryView && }