Issue 13 website search bar

package.json

@@ -52,6 +52,9 @@
     "prettier-plugin-tailwindcss": "^0.3.0",
     "tailwindcss": "^3.3.2",
     "ts-node": "^10.9.1",
-    "typescript": "^5.3.3"
+    "typescript": "^5.3.3",
+    "algoliasearch":"^4.22.1",
+    "react-instantsearch": "^7.6.0",
+    "react-instantsearch-router-nextjs": "^7.6.0"
   }
 }

src/components/Header/README.md

@@ -0,0 +1,8 @@
+The implementation of the functionality of the web search bar may need to be integrated with headless WordPress. 
+Check out this blog:
+https://www.datocms.com/blog/algolia-nextjs-how-to-add-algolia-instantsearch
+
+and for algolia setup:
+
+https://www.algolia.com/doc/guides/building-search-ui/going-further/server-side-rendering/react/#with-nextjs
+

src/components/Header/SearchBar.tsx

@@ -1,5 +1,5 @@
 import { ChangeEvent, KeyboardEvent, useState } from "react";
-export default function Search({ prompt }: { prompt: string }) {
+export default function ({ prompt }: { prompt: string }) {
   const [value, setValue] = useState("Enter search...");
   const searchHandler = (event: ChangeEvent<HTMLInputElement>) => {
     const { target } = event;

src/components/Header/index.tsx

@@ -1,4 +1,5 @@
-import { useState } from "react";
+import {ChangeEvent, KeyboardEvent, useState} from "react";
+import { useRouter } from "next/navigation";
 import Link from "next/link";
 import { FiSearch, FiX } from "react-icons/fi";
 
@@ -7,6 +8,30 @@ import PanicButton from "./PanicButton";
 
 export default function Header() {
   const [searchOpen, setSearchOpen] = useState(false);
+  const [inputValue, setInputValue] = useState("");
+  const router = useRouter()
+
+
+  const searchHandler = (event: ChangeEvent<HTMLInputElement>) => {
+    const { target } = event;
+    setInputValue(target.value);
+  };
+
+  const handleSearch = () => {
+
+    if (inputValue) return router.push(`/?q=${inputValue}`);
+
+    else return router.push("/")
+
+  }
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === "Enter") {
+      setInputValue(inputValue);
+      return handleSearch()
+    }
+  };
+
 
   return (
     <header className="sticky top-0 z-50">
@@ -44,6 +69,8 @@ export default function Header() {
             placeholder="Search..."
             type="text"
             className="relative inset-0 w-80 bg-transparent placeholder:text-starick-white placeholder:opacity-80  focus:outline-none"
+            onChange={searchHandler}
+            onKeyDown={handleKeyDown}
           />
           <FiSearch className="inline" />
         </div>

src/components/SearchBar/search.tsx

@@ -1,41 +1,61 @@
 import { ChangeEvent, KeyboardEvent, useState } from "react";
 import React from "react";
+
 export default function Search({ prompt }: { prompt: string }) {
-  const [value, setValue] = useState("Enter search...");
+  const [value, setValue] = useState("");
+
   const searchHandler = (event: ChangeEvent<HTMLInputElement>) => {
-    const { target } = event;
-    setValue(target.value);
+    setValue(event.target.value);
   };
 
-  const handleClick = () => {
-    setValue(prompt);
+  // Function to handle the redirection to Google with site search
+  const redirectToGoogleSearch = () => {
+    // Trim the search value and check if it's not empty
+    const trimmedValue = value.trim();
+    if (trimmedValue) {
+      // Encode the search query and construct the Google search URL
+      const searchQuery = encodeURIComponent(trimmedValue);
+      const googleSearchUrl = `https://www.google.com/search?q=site:starick.org.au ${searchQuery}`;
+      // Redirect to the Google search page
+      window.location.href = googleSearchUrl;
+    }
   };
 
+  // Event handler for the Enter key
   const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
     if (event.key === "Enter") {
-      setValue(prompt);
+      event.preventDefault();  // Prevent form submission
+      redirectToGoogleSearch();
     }
   };
 
+  // Event handler for the search button click
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault();  // Prevent form submission
+    redirectToGoogleSearch();
+  };
+
   return (
     <div className="relative top-16 mx-auto mb-5 mt-8 w-1/2 text-gray-600">
       <input
         type="search"
         name="search"
-        placeholder={value}
+        value={value} // Bind input to the state value
+        placeholder={prompt}
         onChange={searchHandler}
         onKeyDown={handleKeyDown}
         className="h-10 w-full rounded-full bg-gray-300 px-5 pr-10 text-sm focus:outline-none"
       />
       <button
-        onClick={handleClick}
-        className="absolute right-0 top-0 mr-4 mt-3"
+      onClick={handleClick}
+      className="absolute right-0 top-0 mt-3 mr-4"
+      type="submit"
       >
         <svg
-          xmlns="http://www.w3.org/2000/svg"
-          height="16"
-          width="16"
-          viewBox="0 0 512 512"
+        xmlns="http://www.w3.org/2000/svg"
+        height="16"
+        width="16"
+        viewBox="0 0 512 512"
         >
           <path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6 .1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z" />
         </svg>

src/pages/search-page.tsx

@@ -0,0 +1,52 @@
+import { renderToString } from 'react-dom/server';
+import algoliasearch from 'algoliasearch/lite';
+import {
+    InstantSearch,
+    InstantSearchServerState,
+    InstantSearchSSRProvider,
+    getServerState, SearchBox, Hits,
+} from 'react-instantsearch';
+
+const searchClient = algoliasearch(process.env["NEXT_PUBLIC_ALGOLIA_ID"] as string, process.env["NEXT_PUBLIC_ALGOLIA_KEY"] as string);
+
+type SearchPageProps = {
+    serverState?: InstantSearchServerState;
+};
+
+interface HitProps {
+    hit: {
+        title: string;
+        excerpt: string;
+    };
+}
+
+export function Hit({ hit }: HitProps) {
+    return (
+        <article>
+            <h1>{hit.title}</h1>
+            <p>${hit.excerpt}</p>
+        </article>
+    );
+}
+
+export default function SearchPage({ serverState }: SearchPageProps) {
+    return (
+        <InstantSearchSSRProvider {...serverState}>
+            <InstantSearch searchClient={searchClient} indexName="starick">
+                <SearchBox/>
+                <Hits hitComponent={Hit} />
+            </InstantSearch>
+        </InstantSearchSSRProvider>
+    );
+}
+
+export async function getStaticProps() {
+    const serverState = await getServerState(<SearchPage />, {
+        renderToString
+    });
+    return {
+        props: {
+            serverState,
+        },
+    };
+}