diff --git a/src/components/Layout/components/Header/components/Content/components/Actions/components/Search/components/SearchBar/common/constants.ts b/src/components/Layout/components/Header/components/Content/components/Actions/components/Search/components/SearchBar/common/constants.ts new file mode 100644 index 00000000..38fb387c --- /dev/null +++ b/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", +}; diff --git a/src/components/Layout/components/Header/components/Content/components/Actions/components/Search/components/SearchBar/common/utils.ts b/src/components/Layout/components/Header/components/Content/components/Actions/components/Search/components/SearchBar/common/utils.ts new file mode 100644 index 00000000..58c3767c --- /dev/null +++ b/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; +} diff --git a/src/components/Layout/components/Header/components/Content/components/Actions/components/Search/components/SearchBar/searchBar.tsx b/src/components/Layout/components/Header/components/Content/components/Actions/components/Search/components/SearchBar/searchBar.tsx index e02f5cc0..8173338e 100644 --- a/src/components/Layout/components/Header/components/Content/components/Actions/components/Search/components/SearchBar/searchBar.tsx +++ b/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(null); + const searchParams = useSearchParams(); const [searchTerm, setSearchTerm] = useState(""); /** @@ -58,21 +70,34 @@ export default function SearchBar({ * @param searchStr - Current search string. * @param url - Current configured search path. */ - const handleSubmit = ( - formEvent: FormEvent, - 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, + 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 (