From f9dcb4d6f69b9ccb9984ceaaf724963ca8e6cf56 Mon Sep 17 00:00:00 2001
From: samwisekind <samuel.kindler@icloud.com>
Date: Sun, 27 Oct 2024 12:38:24 +0000
Subject: [PATCH 1/2] Retain catalogue index state on navigation

---
 next.config.js                                |  3 ++
 src/components/Filters/Filters.tsx            |  8 +++-
 .../catalogues/bottlenose-dolphin/[slug].tsx  |  2 +-
 src/pages/research/catalogues/index.tsx       | 45 +++++++++++++++++--
 .../catalogues/minke-whale/[slug].tsx         |  2 +-
 5 files changed, 53 insertions(+), 7 deletions(-)

diff --git a/next.config.js b/next.config.js
index efb3380..13e1b20 100644
--- a/next.config.js
+++ b/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',
diff --git a/src/components/Filters/Filters.tsx b/src/components/Filters/Filters.tsx
index 1825cb2..a8d2cf3 100644
--- a/src/components/Filters/Filters.tsx
+++ b/src/components/Filters/Filters.tsx
@@ -3,11 +3,13 @@ import styles from './Filters.module.scss';
 interface UseSearchProps {
   callback: Function,
   label?: string,
+  defaultValue?: string,
 }
 
 const UseSearch = ({
   callback,
   label = 'Search...',
+  defaultValue,
 }: UseSearchProps) => (
   <input
     type="search"
@@ -15,12 +17,14 @@ const UseSearch = ({
     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>
 );
 
diff --git a/src/pages/research/catalogues/bottlenose-dolphin/[slug].tsx b/src/pages/research/catalogues/bottlenose-dolphin/[slug].tsx
index dfd65dd..7a7b305 100644
--- a/src/pages/research/catalogues/bottlenose-dolphin/[slug].tsx
+++ b/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 },
   ];
 
diff --git a/src/pages/research/catalogues/index.tsx b/src/pages/research/catalogues/index.tsx
index eec7269..b41de2a 100644
--- a/src/pages/research/catalogues/index.tsx
+++ b/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 initPage = 1;
+  let initSearch = '';
+  let initCatalogue = Catalogues.BottlenoseDolphin;
+
+  const searchParams = useSearchParams();
+
+  const paramPage = searchParams.get('page');
+  if (paramPage) {
+    initPage = parseInt(paramPage)
+  }
+
+  const paramSearch = searchParams.get('search');
+  if (paramSearch) {
+    initSearch = paramSearch;
+  }
+
+  const paramCatalogue = searchParams.get('catalogue');
+  if (paramCatalogue && Object.values(Catalogues).includes(paramCatalogue as any)) {
+    initCatalogue = paramCatalogue as Catalogues;
+  }
+
+  const [page, setPage] = useState<number>(initPage);
+  const [search, setSearch] = useState<string>(initSearch);
+  const [catalogue, setCatalogue] = useState<Catalogues>(initCatalogue);
   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('page', String(page));
+    newURL.searchParams.set('catalogue', catalogue);
+    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 },
diff --git a/src/pages/research/catalogues/minke-whale/[slug].tsx b/src/pages/research/catalogues/minke-whale/[slug].tsx
index fd69847..766288c 100644
--- a/src/pages/research/catalogues/minke-whale/[slug].tsx
+++ b/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 },
   ];
 

From 9057ae0d77e5e13214dbdbb9cf9ff9f5320087fb Mon Sep 17 00:00:00 2001
From: samwisekind <samuel.kindler@icloud.com>
Date: Sun, 27 Oct 2024 12:43:03 +0000
Subject: [PATCH 2/2] Update

---
 src/pages/research/catalogues/index.tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/pages/research/catalogues/index.tsx b/src/pages/research/catalogues/index.tsx
index b41de2a..021d6ba 100644
--- a/src/pages/research/catalogues/index.tsx
+++ b/src/pages/research/catalogues/index.tsx
@@ -25,12 +25,17 @@ interface PageProps {
 const Page: NextPage<PageProps> = ({
   pageData,
 }: PageProps) => {
+  let initCatalogue = Catalogues.BottlenoseDolphin;
   let initPage = 1;
   let initSearch = '';
-  let initCatalogue = Catalogues.BottlenoseDolphin;
 
   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)
@@ -41,14 +46,9 @@ const Page: NextPage<PageProps> = ({
     initSearch = paramSearch;
   }
 
-  const paramCatalogue = searchParams.get('catalogue');
-  if (paramCatalogue && Object.values(Catalogues).includes(paramCatalogue as any)) {
-    initCatalogue = paramCatalogue as Catalogues;
-  }
-
+  const [catalogue, setCatalogue] = useState<Catalogues>(initCatalogue);
   const [page, setPage] = useState<number>(initPage);
   const [search, setSearch] = useState<string>(initSearch);
-  const [catalogue, setCatalogue] = useState<Catalogues>(initCatalogue);
   const [searchText, setSearchText] = useState<typeof search>('');
   const [data, setData] = useState<null | CatalogueAPIResponse>(null);
   const [loading, setLoading] = useState<boolean>(true);
@@ -77,8 +77,8 @@ const Page: NextPage<PageProps> = ({
   useEffect(() => {
     let newURL: URL | string = new URL(location.toString());
 
-    newURL.searchParams.set('page', String(page));
     newURL.searchParams.set('catalogue', catalogue);
+    newURL.searchParams.set('page', String(page));
     if (search !== '') {
       newURL.searchParams.set('search', search);
     }