From bafad57e9b9be5394b5dca3f9c3a0578cd12a6aa Mon Sep 17 00:00:00 2001
From: Allen Ziegenfus <allen.ziegenfus@liferay.com>
Date: Mon, 29 May 2023 16:27:19 -0500
Subject: [PATCH] Add search result navigation

---
 src/components/SearchBar.jsx        | 76 ++++++++++++++++++++---------
 src/components/SearchNavigation.jsx | 21 ++++++++
 src/layouts/Layout.astro            |  2 +-
 src/pages/[slug]/[workSlug].astro   |  3 ++
 4 files changed, 77 insertions(+), 25 deletions(-)
 create mode 100644 src/components/SearchNavigation.jsx

diff --git a/src/components/SearchBar.jsx b/src/components/SearchBar.jsx
index 007e4fc..8358434 100644
--- a/src/components/SearchBar.jsx
+++ b/src/components/SearchBar.jsx
@@ -2,20 +2,49 @@ import { React, useEffect, useState } from "react";
 import Fuse from "fuse.js";
 
 export default function SearchBar({}) {
-  const [searchInput, setSearchInput] = useState();
+  const urlParams = new URLSearchParams(window.location.search);
+  const search = urlParams.get("search");
+
+  const [searchInput, setSearchInput] = useState(search || "");
   const [displayRows, setDisplayRows] = useState([]);
-  const [records, setRecords] = useState([])
+  const [records, setRecords] = useState([]);
   const [open, setOpen] = useState(false);
 
-  useEffect(async () => {
-    try {
-      const recordsresponse = await fetch("/records.json")
-      setRecords(await recordsresponse.json());
+  function openSearch(e) {
+    setOpen(true);
+  }
+  useEffect(() => {
+    window.addEventListener("openSearch", openSearch);
+    return () => window.removeEventListener("openSearch", openSearch);
+  }, []);
+
+  useEffect(() => {
+    function performSearch() {
+      const searchResults = fuse.search(searchInput);
+      if (searchResults) {
+        setDisplayRows(
+          searchResults.slice(0, 8).map((searchResult) => ({
+            Titel: searchResult.item.Titel,
+            Slug: `/${searchResult.item.WerkgruppeSlug}/${searchResult.item.Slug}`,
+            Thumbnail: searchResult.item.Thumbnail,
+            InvNr: searchResult.item.InvNr,
+          }))
+        );
+      }
     }
-    catch (error) {
-      console.log(error);
+    performSearch();
+  }, [searchInput, records]);
+  useEffect(() => {
+    async function fetchRecords() {
+      try {
+        const recordsresponse = await fetch("/records.json");
+        setRecords(await recordsresponse.json());
+      } catch (error) {
+        console.log(error);
+      }
     }
-  }, {});
+    fetchRecords();
+  }, []);
 
   const fuse = new Fuse(records, {
     threshold: 0.4,
@@ -31,7 +60,14 @@ export default function SearchBar({}) {
   });
 
   if (!open) {
-    return   <button onClick={() => setOpen(true)} className="absolute py-5 right-0 top-0 ml-auto">🔍</button>
+    return (
+      <button
+        onClick={() => setOpen(true)}
+        className="absolute py-5 right-0 top-0 ml-auto"
+      >
+        🔍
+      </button>
+    );
   } else {
     return (
       <div className="fixed top-0 bottom-0 left-0 right-0 bg-black">
@@ -39,23 +75,12 @@ export default function SearchBar({}) {
           <input
             className="flex my-5 mx-auto w-1/2 h-10 rounded-lg p-2"
             placeholder="Suchen"
+            value={searchInput}
             onChange={(e) => {
               const searchTerm = e.target.value;
               setSearchInput(searchTerm);
               if (searchTerm) {
-                const searchResults = fuse.search(searchTerm);
-                console.log(searchResults);
-                setSearchInput(searchTerm);
-                if (searchResults) {
-                  setDisplayRows(
-                    searchResults.slice(0, 8).map((searchResult) => ({
-                      Titel: searchResult.item.Titel,
-                      Slug: `/${searchResult.item.WerkgruppeSlug}/${searchResult.item.Slug}`,
-                      Thumbnail: searchResult.item.Thumbnail,
-                      InvNr: searchResult.item.InvNr,
-                    }))
-                  );
-                }
+                performSearch();
               } else {
                 setDisplayRows([]);
                 setSearchInput("");
@@ -71,7 +96,10 @@ export default function SearchBar({}) {
             {displayRows.length > 1 &&
               displayRows.map((row) => (
                 <li className="list-none border-2 rounded-lg p-3 text-center hover:border-gray-600">
-                  <a className="flex flex-col" href={row.Slug}>
+                  <a
+                    className="flex flex-col"
+                    href={`${row.Slug}/?search=${searchInput}`}
+                  >
                     <img src={row.Thumbnail} alt={row.Titel} />
                     <h2 className="pt-2">{row.Titel}</h2>
                     <h3 className="pt-2">{row.InvNr}</h3>
diff --git a/src/components/SearchNavigation.jsx b/src/components/SearchNavigation.jsx
new file mode 100644
index 0000000..4bd961a
--- /dev/null
+++ b/src/components/SearchNavigation.jsx
@@ -0,0 +1,21 @@
+import { React, useEffect, useState } from "react";
+
+function setSearchState(search) {
+  const event = new Event("openSearch");
+  window.dispatchEvent(event);
+}
+
+export default function SearchNavigation({}) {
+  const urlParams = new URLSearchParams(window.location.search);
+
+  const search = urlParams.get("search");
+  return (
+    search && (
+      <div class="my-3">
+        <a class="cursor-pointer" onClick={setSearchState}>
+          ← Zurück zu Suchergebnissen für {search}
+        </a>
+      </div>
+    )
+  );
+}
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 25bf724..106a02d 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -26,7 +26,7 @@ const { title } = Astro.props;
             Werkverzeichnis von Vollrad Kutscher 1968 bis 2000
           </h1></a
         >
-        <SearchBar client:load />
+        <SearchBar client:only />
       </div>
 
       <nav>
diff --git a/src/pages/[slug]/[workSlug].astro b/src/pages/[slug]/[workSlug].astro
index bf647a9..b9716b0 100644
--- a/src/pages/[slug]/[workSlug].astro
+++ b/src/pages/[slug]/[workSlug].astro
@@ -2,6 +2,7 @@
 import Layout from "../../layouts/Layout.astro";
 import ImageViewer from "../../components/ImageViewer.jsx";
 import werkgruppen from "../../../public/werkgruppen.json";
+import SearchNavigation from "../../components/SearchNavigation";
 
 export async function getStaticPaths() {
   const works = [];
@@ -45,6 +46,7 @@ const imgs = await Promise.all(
 
 <Layout title={work.Titel}>
   
+  <SearchNavigation client:only />
   <nav>
     <ul class="flex flex-row">
       <li><a class="text-blue-800" href="/">Startseite</a>&nbsp; / &nbsp;</li>
@@ -52,6 +54,7 @@ const imgs = await Promise.all(
       <li><a class="text-blue-800" href={`/${slug}/${workSlug}`}>{work.InvNr}</a></li>
     </ul>
   </nav>
+  
   <h2 class="text-2xl py-3">{work.Titel}</h2>
   <main class="flex flex-col-reverse lg:flex-row">
     <div class="eigenschaften w-full lg:w-1/2">