feat: update search bar redirect to allow for an internal link (#149)

src/components/Layout/components/Header/components/Content/components/Actions/components/Search/components/SearchBar/common/constants.ts

@@ -0,0 +1,4 @@
+export const SEARCH_PARAMETERS = {
+  CATEGORY: "category",
+  QUERY: "q",
+};

src/components/Layout/components/Header/components/Content/components/Actions/components/Search/components/SearchBar/common/utils.ts

@@ -0,0 +1,17 @@
+import { ReadonlyURLSearchParams } from "next/navigation";
+import { SEARCH_PARAMETERS } from "./constants";
+
+/**
+ * Return the search params, for the given search string.
+ * @param searchParams - Current search params.
+ * @param searchStr - Search string.
+ * @returns updated search params.
+ */
+export function getSearchParams(
+  searchParams: ReadonlyURLSearchParams,
+  searchStr: string
+): URLSearchParams {
+  const params = new URLSearchParams(searchParams.toString());
+  params.set(SEARCH_PARAMETERS.QUERY, searchStr);
+  return params;
+}

src/components/Layout/components/Header/components/Content/components/Actions/components/Search/components/SearchBar/searchBar.tsx

@@ -1,7 +1,18 @@
 import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
-import React, { ChangeEvent, FormEvent, useRef, useState } from "react";
+import { useSearchParams } from "next/navigation";
+import Router from "next/router";
+import React, {
+  ChangeEvent,
+  FormEvent,
+  useCallback,
+  useRef,
+  useState,
+} from "react";
+import { isValidUrl } from "../../../../../../../../../../../../common/utils";
 import { ButtonPrimary } from "../../../../../../../../../../../common/Button/components/ButtonPrimary/buttonPrimary";
 import { SearchIcon } from "../../../../../../../../../../../common/CustomIcon/components/SearchIcon/searchIcon";
+import { isClientSideNavigation } from "../../../../../../../../../../../Links/common/utils";
+import { getSearchParams } from "./common/utils";
 import {
   ClearButton,
   SearchBar as SearchDialog,
@@ -23,6 +34,7 @@ export default function SearchBar({
   searchURL,
 }: Props): JSX.Element {
   const inputRef = useRef<HTMLInputElement>(null);
+  const searchParams = useSearchParams();
   const [searchTerm, setSearchTerm] = useState<string>("");
 
   /**
@@ -58,21 +70,34 @@ export default function SearchBar({
    * @param searchStr - Current search string.
    * @param url - Current configured search path.
    */
-  const handleSubmit = (
-    formEvent: FormEvent<HTMLFormElement>,
-    searchStr: string,
-    url?: string
-  ): void => {
-    formEvent.preventDefault();
-    if (searchStr && url) {
-      closeMenu();
-      closeSearch();
-      // Build search URL and redirect to it.
-      const location = new URL(url);
-      location.searchParams.set("q", searchStr);
-      window.location.href = location.href;
-    }
-  };
+  const handleSubmit = useCallback(
+    (
+      formEvent: FormEvent<HTMLFormElement>,
+      searchStr: string,
+      url?: string
+    ): void => {
+      formEvent.preventDefault();
+      if (searchStr && url) {
+        closeMenu();
+        closeSearch();
+        if (isClientSideNavigation(url)) {
+          Router.push({
+            pathname: url,
+            search: getSearchParams(searchParams, searchStr).toString(),
+          });
+          return;
+        }
+        if (isValidUrl(url)) {
+          // Build search URL and redirect to it.
+          const location = new URL(url);
+          location.search = getSearchParams(searchParams, searchStr).toString();
+          window.location.href = location.href;
+        }
+        throw new Error("Invalid search URL.");
+      }
+    },
+    [closeMenu, closeSearch, searchParams]
+  );
 
   return (
     <SearchDialog