Add search result navigation

allen-ziegenfus · May 29, 2023 · bafad57 · bafad57
1 parent c2e0de6
commit bafad57
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 25 deletions.
diff --git 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,31 +60,27 @@ 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">
         <div className="max-w-6xl m-auto">
           <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
@@ -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
@@ -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
@@ -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,13 +46,15 @@ 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>
       <li><a class="text-blue-800" href={`/${slug}`}> {titel}</a>&nbsp; / &nbsp;</li>
       <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">