Retain catalogue index state on navigation

next.config.js

@@ -7,6 +7,9 @@ const redirects = require('./redirects.json');
 const nextConfig = {
   reactStrictMode: true,
   poweredByHeader: false,
+  experimental: {
+    scrollRestoration: true
+  },
   images: {
     remotePatterns: [{
       protocol: 'https',

src/components/Filters/Filters.tsx

@@ -3,24 +3,28 @@ import styles from './Filters.module.scss';
 interface UseSearchProps {
   callback: Function,
   label?: string,
+  defaultValue?: string,
 }
 
 const UseSearch = ({
   callback,
   label = 'Search...',
+  defaultValue,
 }: UseSearchProps) => (
   <input
     type="search"
     name="search"
     onInput={({ target }) => callback((target as HTMLInputElement).value)}
     placeholder={label}
     className={styles.search}
+    defaultValue={defaultValue}
     autoComplete="off"
   />
 );
 
 interface DropdownProps {
   name: string,
+  defaultValue?: string,
   options: Array<{
     text: string,
     value: string,
@@ -30,11 +34,13 @@ interface DropdownProps {
 
 const UseDropdown = ({
   name,
+  defaultValue,
   options,
   callback,
 }: DropdownProps) => (
   <select
     onInput={({ target }) => callback((target as HTMLSelectElement).value)}
+    defaultValue={defaultValue ?? options[0].value}
     className={styles.dropdown}
     name={name}
     key={name}
@@ -56,7 +62,7 @@ const Filters = ({
 }: Props) => (
   <div className={styles.filters}>
     {dropdowns?.map((item) => UseDropdown(item))}
-    {search && UseSearch({ callback: search.callback, label: search.label })}
+    {search && UseSearch(search)}
   </div>
 );
 

src/pages/research/catalogues/bottlenose-dolphin/[slug].tsx

@@ -65,7 +65,7 @@ const Page: NextPage<PageProps> = ({
   const image = otherImages?.[0] ?? leftDorsalFin ?? rightDorsalFin;
   const breadcrumbs = [
     sitemap.research,
-    sitemap.catalogues,
+    { title: sitemap.catalogues.title, path: `${sitemap.catalogues.path}?catalogue=${Catalogues.BottlenoseDolphin}` },
     { title: `Bottlenose Dolphin: ${title}`, path },
   ];
 

src/pages/research/catalogues/index.tsx

@@ -3,6 +3,7 @@
 import type { NextPage, GetServerSideProps } from 'next';
 
 import React, { useState, useEffect } from 'react';
+import { useSearchParams } from 'next/navigation';
 
 import type { PageData, CatalogueAPIResponse } from '@/helpers/types';
 
@@ -24,9 +25,30 @@ interface PageProps {
 const Page: NextPage<PageProps> = ({
   pageData,
 }: PageProps) => {
-  const [page, setPage] = useState<number>(1);
-  const [search, setSearch] = useState<string>('');
-  const [catalogue, setCatalogue] = useState<Catalogues>(Catalogues.BottlenoseDolphin);
+  let initCatalogue = Catalogues.BottlenoseDolphin;
+  let initPage = 1;
+  let initSearch = '';
+
+  const searchParams = useSearchParams();
+
+  const paramCatalogue = searchParams.get('catalogue');
+  if (paramCatalogue && Object.values(Catalogues).includes(paramCatalogue as any)) {
+    initCatalogue = paramCatalogue as Catalogues;
+  }
+
+  const paramPage = searchParams.get('page');
+  if (paramPage) {
+    initPage = parseInt(paramPage)
+  }
+
+  const paramSearch = searchParams.get('search');
+  if (paramSearch) {
+    initSearch = paramSearch;
+  }
+
+  const [catalogue, setCatalogue] = useState<Catalogues>(initCatalogue);
+  const [page, setPage] = useState<number>(initPage);
+  const [search, setSearch] = useState<string>(initSearch);
   const [searchText, setSearchText] = useState<typeof search>('');
   const [data, setData] = useState<null | CatalogueAPIResponse>(null);
   const [loading, setLoading] = useState<boolean>(true);
@@ -50,7 +72,20 @@ const Page: NextPage<PageProps> = ({
 
     const timeout = setTimeout(getData, 500);
     return () => clearTimeout(timeout);
-  }, [page, search, catalogue]);
+  }, [catalogue, page, search]);
+
+  useEffect(() => {
+    let newURL: URL | string = new URL(location.toString());
+
+    newURL.searchParams.set('catalogue', catalogue);
+    newURL.searchParams.set('page', String(page));
+    if (search !== '') {
+      newURL.searchParams.set('search', search);
+    }
+
+    newURL = newURL.toString();
+    history.replaceState({ ...window.history.state, as: newURL, url: newURL }, '', newURL);
+  }, [data]);
 
   const handleSearchChange = (value: string) => {
     setPage(1);
@@ -99,9 +134,11 @@ const Page: NextPage<PageProps> = ({
         search={{
           callback: handleSearchChange,
           label: "Search by name, ID, reference birth year...",
+          defaultValue: search,
         }}
         dropdowns={[{
           name: 'Catalogues',
+          defaultValue: catalogue,
           options: [
             { text: 'Bottlenose dolphins', value: Catalogues.BottlenoseDolphin },
             { text: 'Minke whales', value: Catalogues.MinkeWhale },

src/pages/research/catalogues/minke-whale/[slug].tsx

@@ -58,7 +58,7 @@ const Page: NextPage<PageProps> = ({
   const image = leftDorsalFin ?? rightDorsalFin;
   const breadcrumbs = [
     sitemap.research,
-    sitemap.catalogues,
+    { title: sitemap.catalogues.title, path: `${sitemap.catalogues.path}?catalogue=${Catalogues.MinkeWhale}` },
     { title: `Minke Whale: ${title}`, path },
   ];