From 3b7e28ece42073053c8cef9d6c92823900ab4d41 Mon Sep 17 00:00:00 2001 From: Ngoc Tuyen Nguyen Date: Tue, 19 Sep 2023 16:27:27 +0700 Subject: [PATCH 1/2] CG-4918: Add Neural Search to Sample site --- .../musicfestival-frontend-react/src/App.css | 184 ++++++++++++++++-- .../src/components/SearchButton.tsx | 115 +++++++---- .../src/generated.ts | 11 +- .../src/helpers/queryCacheHelper.ts | 8 +- .../src/helpers/string.utils.ts | 17 ++ .../src/pages/SearchPage.tsx | 31 +-- 6 files changed, 294 insertions(+), 72 deletions(-) create mode 100644 samples/musicfestival-frontend-react/src/helpers/string.utils.ts diff --git a/samples/musicfestival-frontend-react/src/App.css b/samples/musicfestival-frontend-react/src/App.css index b4ae768..9b1801d 100644 --- a/samples/musicfestival-frontend-react/src/App.css +++ b/samples/musicfestival-frontend-react/src/App.css @@ -2785,6 +2785,7 @@ button { box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.36); border: 0; transition: all 300ms; + max-height: 40px; } .Button:hover, @@ -3458,6 +3459,7 @@ Component for the navigation bar. */ .NavBar { padding: 10px 5px 0; + margin-top: 11px; } @media (min-width: 425px) { @@ -3889,10 +3891,6 @@ footer .ContentArea.Grid--gutterA { margin-top: 1em; } -.buy-ticket-button, .search-button { - margin-top: 11px; -} - .search-button{ text-transform: none; } @@ -3944,19 +3942,22 @@ main { text-transform: uppercase; } -.nav-table{ - width: 100%; - display: table; -} +/*.nav-table{*/ +/* width: 100%; */ +/* display: table;*/ +/*}*/ .nav-table-row{ - display: table-row; - float: left; + /*display: table-row;*/ + /*float: left;*/ + display: flex; + gap: 10px; } .nav-table-cell{ - display: table-cell; - padding-right: 10px; + /*display: table-cell;*/ + /*padding-right: 10px;*/ + max-height: 40px; } input.search-input{ @@ -4118,4 +4119,163 @@ input.search-input::placeholder { .autocomplete-block div:hover{ background-color: #aaa; +} + +.switch_box{ + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; +} + +.switch_box:has(input[type="checkbox"].switch_input:checked) label { + color: #41FFF5; +} + +input[type="checkbox"].switch_input{ + font-size: 30px; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + width: 1.5em; + height: 0.75em; + background: #808080; + border-radius: 3em; + position: relative; + cursor: pointer; + outline: none; + -webkit-transition: all .2s ease-in-out; + transition: all .2s ease-in-out; +} + +input[type="checkbox"].switch_input:checked{ + background: #41FFF5; +} + +input[type="checkbox"].switch_input:after{ + position: absolute; + content: ""; + width: 0.75em; + height: 0.75em; + border-radius: 50%; + background: #fff; + -webkit-box-shadow: 0 0 .25em rgba(0,0,0,.3); + box-shadow: 0 0 .25em rgba(0,0,0,.3); + -webkit-transform: scale(.7); + transform: scale(.7); + left: 0; + -webkit-transition: all .2s ease-in-out; + transition: all .2s ease-in-out; +} + +input[type="checkbox"].switch_input:checked:after{ + left: calc(100% - 0.8em); +} + +.d-flex { + display: flex !important; +} + +.me-0 { + margin-right: 0 !important; +} + +.me-1 { + margin-right: 0.25rem !important; +} + +.me-2 { + margin-right: 0.5rem !important; +} + +.me-3 { + margin-right: 1rem !important; +} + +.me-4 { + margin-right: 1.5rem !important; +} + +.me-5 { + margin-right: 3rem !important; +} + +.ms-0 { + margin-left: 0 !important; +} + +.ms-1 { + margin-left: 0.25rem !important; +} + +.ms-2 { + margin-left: 0.5rem !important; +} + +.ms-3 { + margin-left: 1rem !important; +} + +.ms-4 { + margin-left: 1.5rem !important; +} + +.ms-5 { + margin-left: 3rem !important; +} + +.mb-0 { + margin-bottom: 0 !important; +} + +.mb-1 { + margin-bottom: 0.25rem !important; +} + +.mb-2 { + margin-bottom: 0.5rem !important; +} + +.mb-3 { + margin-bottom: 1rem !important; +} + +.mb-4 { + margin-bottom: 1.5rem !important; +} + +.mb-5 { + margin-bottom: 3rem !important; +} + +.fw-lighter { + font-weight: lighter !important; +} + +.fw-light { + font-weight: 300 !important; +} + +.fw-normal { + font-weight: 400 !important; +} + +.fw-medium { + font-weight: 500 !important; +} + +.fw-semibold { + font-weight: 600 !important; +} + +.fw-bold { + font-weight: 700 !important; } \ No newline at end of file diff --git a/samples/musicfestival-frontend-react/src/components/SearchButton.tsx b/samples/musicfestival-frontend-react/src/components/SearchButton.tsx index 2f800a6..10a36eb 100644 --- a/samples/musicfestival-frontend-react/src/components/SearchButton.tsx +++ b/samples/musicfestival-frontend-react/src/components/SearchButton.tsx @@ -1,78 +1,113 @@ -import { useState } from "react"; -import { useSearchParams } from "react-router-dom"; -import { ArtistAutocompleteQuery, useArtistAutocompleteQuery } from "../generated"; -import { generateGQLSearchQueryVars } from "../helpers/queryCacheHelper"; -import { isEditOrPreviewMode } from "../helpers/urlHelper"; +import {useEffect, useRef, useState} from "react"; +import {useSearchParams} from "react-router-dom"; +import {ArtistAutocompleteQuery, Ranking, useArtistAutocompleteQuery} from "../generated"; +import {generateGQLSearchQueryVars} from "../helpers/queryCacheHelper"; +import {isEditOrPreviewMode} from "../helpers/urlHelper"; +import {capitalize} from "../helpers/string.utils"; type CustomString = string | number | readonly string[] | undefined function SearchButton({filterValue}: any): JSX.Element { + const isFirstLoad = useRef(true); const singleKeyUrl = process.env.REACT_APP_CONTENT_GRAPH_GATEWAY_URL as string const ARTIST = "Artist" const [searchParams] = useSearchParams() const [token, setToken] = useState("") const [isShown, setIsShown] = useState(false) const [searchValue, setSearchValue] = useState(searchParams.get("q")?.toString() ?? "") + const [ranking, setRanking] = useState(Ranking[capitalize(searchParams.get("r")?.toString().toLowerCase() || "") as keyof typeof Ranking] || Ranking.Relevance) const [orderBy] = useState("ASC") - let autocompleteData : ArtistAutocompleteQuery | undefined = undefined - + let autocompleteData: ArtistAutocompleteQuery | undefined = undefined + let modeEdit = isEditOrPreviewMode() - let variables = generateGQLSearchQueryVars(token, window.location.pathname, searchValue as string | null, orderBy); - const { data : artistAutocompleteData } = useArtistAutocompleteQuery({ endpoint: singleKeyUrl }, variables, { staleTime: 2000, enabled: !modeEdit || !!token }) + let variables = generateGQLSearchQueryVars(token, window.location.pathname, searchValue as string | null, orderBy, ranking); + const {data: artistAutocompleteData} = useArtistAutocompleteQuery({endpoint: singleKeyUrl}, variables, { + staleTime: 2000, + enabled: !modeEdit || !!token + }) autocompleteData = artistAutocompleteData - - function search(event: any, action: string){ - if ((action == "keypress" && event.charCode === 13) || action == "buttonclick") { - window.location.href = `${window.location.origin}/search?q=${searchValue}&f=${filterValue ?? ARTIST}` + + const onSearch = (event: any) => { + window.location.href = `${window.location.origin}/search?q=${searchValue}&f=${filterValue ?? ARTIST}&r=${ranking}`; + } + + const onPressSearch = (event: any) => { + if (event.key === 'Enter' || event.keyCode === 13) { + onSearch(event); } } - function onValueChange(event: any){ + const onValueChange = (event: any) => { setSearchValue(event.target.value); event.target.value !== undefined ? setIsShown(true) : setIsShown(false); } - function onAutoClick(event: any){ + const onAutoClick = (event: any) => { setSearchValue(event.target.textContent); - window.location.href = `${window.location.origin}/search?q=${event.target.textContent}&f=${filterValue ?? ARTIST}` + window.location.href = `${window.location.origin}/search?q=${event.target.textContent}&f=${filterValue ?? ARTIST}&r=${ranking}`; + } + + const onChangeSearchType = (event: any) => { + if (event.target.checked) { + setRanking(Ranking.Semantic); + } else { + setRanking(Ranking.Relevance); + } } + useEffect(() => { + if (isFirstLoad.current) { + isFirstLoad.current = false; + } else { + if (searchValue) { + window.location.href = `${window.location.origin}/search?q=${searchValue}&f=${filterValue ?? ARTIST}&r=${ranking}`; + } + } + }, [ranking]); + return ( -
-
- {search(event, 'keypress')}} - value={searchValue} - onChange={onValueChange} - onFocus={() => setIsShown(true)} - onBlur={() => - setTimeout(() => { - setIsShown(false); - }, 150) - } /> - {search(event, 'buttonclick')}}> - - -
+
+
+ setIsShown(true)} + onBlur={() => + setTimeout(() => { + setIsShown(false); + }, 150) + }/> + + + +
{ autocompleteData?.ArtistDetailsPage?.autocomplete?.ArtistName?.map((name, idx) => { - return( -
onAutoClick(event)}>{name}
+ return ( +
{name}
) - }) + }) } { autocompleteData?.ArtistDetailsPage?.autocomplete?.StageName?.map((name, idx) => { - return( -
onAutoClick(event)}>{name}
+ return ( +
{name}
) }) }
+
+
+ + +
+
); } diff --git a/samples/musicfestival-frontend-react/src/generated.ts b/samples/musicfestival-frontend-react/src/generated.ts index 41e0d94..279e77d 100644 --- a/samples/musicfestival-frontend-react/src/generated.ts +++ b/samples/musicfestival-frontend-react/src/generated.ts @@ -3389,7 +3389,8 @@ export type RangeFacetsInput = { export enum Ranking { BoostOnly = 'BOOST_ONLY', Doc = 'DOC', - Relevance = 'RELEVANCE' + Relevance = 'RELEVANCE', + Semantic = "SEMANTIC", } export type SearchableStringFilterInput = { @@ -3883,10 +3884,10 @@ export const useArtistAutocompleteQuery = < options ); export const ArtistSearchDocument = ` - query ArtistSearch($searchParam: String!, $locales: Locales!, $order: OrderBy) { + query ArtistSearch($searchParam: String!, $locales: Locales!, $order: OrderBy, $ranking: Ranking) { ArtistDetailsPage( locale: [$locales] - orderBy: {_ranking: RELEVANCE, ArtistName: $order} + orderBy: {_ranking: $ranking, ArtistName: $order} where: {_or: [{Name: {contains: $searchParam, boost: 10}}, {Name: {startsWith: $searchParam, boost: 10}}, {StageName: {startsWith: $searchParam}}]} ) { items { @@ -3931,10 +3932,10 @@ export const useArtistSearchQuery = < options ); export const OtherContentSearchDocument = ` - query OtherContentSearch($searchParam: String!, $locales: Locales!, $order: OrderBy) { + query OtherContentSearch($searchParam: String!, $locales: Locales!, $order: OrderBy, $ranking: Ranking) { Content( locale: [$locales] - orderBy: {_ranking: RELEVANCE, Name: $order} + orderBy: {_ranking: $ranking, Name: $order} where: {_or: [{Name: {contains: $searchParam, boost: 10}}, {Name: {startsWith: $searchParam, boost: 10}}], _and: {ContentType: {notEq: "ArtistDetailsPage"}}} ) { items { diff --git a/samples/musicfestival-frontend-react/src/helpers/queryCacheHelper.ts b/samples/musicfestival-frontend-react/src/helpers/queryCacheHelper.ts index e11900d..2914ef2 100644 --- a/samples/musicfestival-frontend-react/src/helpers/queryCacheHelper.ts +++ b/samples/musicfestival-frontend-react/src/helpers/queryCacheHelper.ts @@ -1,5 +1,5 @@ import { QueryClient } from "@tanstack/react-query"; -import { ArtistSearchQuery, Locales, StartQuery } from "../generated"; +import {ArtistSearchQuery, Locales, Ranking, StartQuery} from "../generated"; import { ContentSavedMessage } from "../models/ContentSavedMessage"; import { extractParams, isEditOrPreviewMode } from "./urlHelper"; @@ -15,11 +15,11 @@ const generateGQLQueryVars = (token: string, pathname: string): any => { return variables } -const generateGQLSearchQueryVars = (token: string, pathname: string, searchParam: string | null, sortOption: string): any => { +const generateGQLSearchQueryVars = (token: string, pathname: string, searchParam: string | null, sortOption: string, ranking: Ranking = Ranking.Relevance): any => { const { locales } = extractParams(pathname) - let variables: any = { locales: locales as Locales, searchParam: searchParam, order: sortOption }; + let variables: any = { locales: locales as Locales, searchParam: searchParam, order: sortOption, ranking: ranking }; if (isEditOrPreviewMode() && token) { - variables = { locales: locales as Locales, searchParam, sortOption }; + variables = { locales: locales as Locales, searchParam, sortOption, ranking }; } return variables diff --git a/samples/musicfestival-frontend-react/src/helpers/string.utils.ts b/samples/musicfestival-frontend-react/src/helpers/string.utils.ts new file mode 100644 index 0000000..2468c64 --- /dev/null +++ b/samples/musicfestival-frontend-react/src/helpers/string.utils.ts @@ -0,0 +1,17 @@ +// declare global { +// interface String { +// capitalize(): string; +// } +// } +// +// String.prototype.capitalize = function () { +// return this.charAt(0).toUpperCase() + this.slice(1); +// }; +// +// export {} + +const capitalize = (v: string): string => { + return v.charAt(0).toUpperCase() + v.slice(1); +} + +export {capitalize} \ No newline at end of file diff --git a/samples/musicfestival-frontend-react/src/pages/SearchPage.tsx b/samples/musicfestival-frontend-react/src/pages/SearchPage.tsx index 49f3cf3..b9cc577 100644 --- a/samples/musicfestival-frontend-react/src/pages/SearchPage.tsx +++ b/samples/musicfestival-frontend-react/src/pages/SearchPage.tsx @@ -3,7 +3,15 @@ import { useSearchParams } from "react-router-dom"; import Footer from "../components/Footer"; import Header from "../components/Header"; import SearchButton from "../components/SearchButton"; -import { ArtistAutocompleteQuery, ArtistSearchQuery, OtherContentSearchQuery, useArtistAutocompleteQuery, useArtistSearchQuery, useOtherContentSearchQuery } from "../generated"; +import { + ArtistAutocompleteQuery, + ArtistSearchQuery, + OtherContentSearchQuery, + Ranking, + useArtistAutocompleteQuery, + useArtistSearchQuery, + useOtherContentSearchQuery +} from "../generated"; import { generateGQLSearchQueryVars, updateSearchQueryCache } from "../helpers/queryCacheHelper"; import { getImageUrl, isEditOrPreviewMode } from "../helpers/urlHelper"; import ReactPaginate from 'react-paginate'; @@ -11,6 +19,7 @@ import { useMutation, useQueryClient } from "@tanstack/react-query"; import { ContentSavedMessage } from "../models/ContentSavedMessage"; import authService from "../authService"; import { subcribeContentSavedEvent } from "../helpers/contentSavedEvent"; +import {capitalize} from "../helpers/string.utils"; let previousSavedMessage: any = null; const singleKeyUrl = process.env.REACT_APP_CONTENT_GRAPH_GATEWAY_URL as string @@ -35,6 +44,7 @@ function SearchPage() { let queryString = searchParams.get("q") ?? "" let filterQueryString = searchParams.get("f") ?? "" const [filterBy, setFilterBy] = useState(filterQueryString ?? ARTIST) + const ranking = Ranking[capitalize(searchParams.get("r")?.toString().toLowerCase() || "") as keyof typeof Ranking] || Ranking.Relevance; let artistData: ArtistSearchQuery | undefined = undefined let otherData: OtherContentSearchQuery | undefined = undefined @@ -76,7 +86,7 @@ function SearchPage() { subcribeContentSavedEvent((message: any) => mutate(message)) } - variables = generateGQLSearchQueryVars(token, window.location.pathname, queryString, orderBy) + variables = generateGQLSearchQueryVars(token, window.location.pathname, queryString, orderBy, ranking) const { data : searchQueryData } = useArtistSearchQuery({ endpoint: url, fetchParams: { headers: headers } }, variables, { staleTime: 2000, enabled: !modeEdit || !!token }) artistData = searchQueryData @@ -116,7 +126,7 @@ function SearchPage() { } const handleFacetClick = (event: any) => { - window.location.href = `${window.location.origin}/search?q=${event.target.innerText}&f=${filterBy}` + window.location.href = `${window.location.origin}/search?q=${event.target.innerText}&f=${filterBy}&r=${ranking}` } const handleFilterByChange = (event : any) => { @@ -124,7 +134,6 @@ function SearchPage() { //setOtherItemsPerPage(event.target.value) } - return (
@@ -161,7 +170,7 @@ function SearchPage() { return ( @@ -176,7 +185,7 @@ function SearchPage() { return ( @@ -202,7 +211,7 @@ function SearchPage() {
-
Your search for {queryString} resulted in {filterBy == ARTIST ? resultNumber : otherResultNumber} hits
+
Your search for {queryString} resulted in {filterBy == ARTIST ? resultNumber : otherResultNumber} hits
Sort: @@ -234,7 +243,7 @@ function SearchPage() {

{content?.ArtistName}

-
+

{content?.ArtistDescription}

@@ -250,7 +259,7 @@ function SearchPage() { autocompleteData?.ArtistDetailsPage?.autocomplete?.ArtistName?.map((name, idx) => { return ( @@ -261,7 +270,7 @@ function SearchPage() { autocompleteData?.ArtistDetailsPage?.autocomplete?.StageName?.map((name, idx) => { return ( @@ -315,7 +324,7 @@ function SearchPage() {

{content?.Name}

-
+

{content?.RelativePath}

From fd4ac4d9de55b9479342d2fa96a6a6373988c95e Mon Sep 17 00:00:00 2001 From: Ngoc Tuyen Nguyen Date: Tue, 26 Sep 2023 11:14:19 +0700 Subject: [PATCH 2/2] CG-4918: Add Neural Search to Sample site --- .../src/components/SearchButton.tsx | 13 +++++------ .../src/helpers/string.utils.ts | 17 -------------- .../src/helpers/urlHelper.ts | 22 ++++++++++++++----- .../src/pages/SearchPage.tsx | 6 ++--- 4 files changed, 24 insertions(+), 34 deletions(-) delete mode 100644 samples/musicfestival-frontend-react/src/helpers/string.utils.ts diff --git a/samples/musicfestival-frontend-react/src/components/SearchButton.tsx b/samples/musicfestival-frontend-react/src/components/SearchButton.tsx index 10a36eb..b94b359 100644 --- a/samples/musicfestival-frontend-react/src/components/SearchButton.tsx +++ b/samples/musicfestival-frontend-react/src/components/SearchButton.tsx @@ -2,8 +2,7 @@ import {useEffect, useRef, useState} from "react"; import {useSearchParams} from "react-router-dom"; import {ArtistAutocompleteQuery, Ranking, useArtistAutocompleteQuery} from "../generated"; import {generateGQLSearchQueryVars} from "../helpers/queryCacheHelper"; -import {isEditOrPreviewMode} from "../helpers/urlHelper"; -import {capitalize} from "../helpers/string.utils"; +import {getRankingFromSearchParams, isEditOrPreviewMode} from "../helpers/urlHelper"; type CustomString = string | number | readonly string[] | undefined @@ -15,17 +14,15 @@ function SearchButton({filterValue}: any): JSX.Element { const [token, setToken] = useState("") const [isShown, setIsShown] = useState(false) const [searchValue, setSearchValue] = useState(searchParams.get("q")?.toString() ?? "") - const [ranking, setRanking] = useState(Ranking[capitalize(searchParams.get("r")?.toString().toLowerCase() || "") as keyof typeof Ranking] || Ranking.Relevance) + const [ranking, setRanking] = useState(getRankingFromSearchParams(searchParams)) const [orderBy] = useState("ASC") - let autocompleteData: ArtistAutocompleteQuery | undefined = undefined let modeEdit = isEditOrPreviewMode() let variables = generateGQLSearchQueryVars(token, window.location.pathname, searchValue as string | null, orderBy, ranking); - const {data: artistAutocompleteData} = useArtistAutocompleteQuery({endpoint: singleKeyUrl}, variables, { + const autocompleteData = useArtistAutocompleteQuery({endpoint: singleKeyUrl}, variables, { staleTime: 2000, enabled: !modeEdit || !!token - }) - autocompleteData = artistAutocompleteData + }).data; const onSearch = (event: any) => { window.location.href = `${window.location.origin}/search?q=${searchValue}&f=${filterValue ?? ARTIST}&r=${ranking}`; @@ -105,7 +102,7 @@ function SearchButton({filterValue}: any): JSX.Element {
- +
diff --git a/samples/musicfestival-frontend-react/src/helpers/string.utils.ts b/samples/musicfestival-frontend-react/src/helpers/string.utils.ts deleted file mode 100644 index 2468c64..0000000 --- a/samples/musicfestival-frontend-react/src/helpers/string.utils.ts +++ /dev/null @@ -1,17 +0,0 @@ -// declare global { -// interface String { -// capitalize(): string; -// } -// } -// -// String.prototype.capitalize = function () { -// return this.charAt(0).toUpperCase() + this.slice(1); -// }; -// -// export {} - -const capitalize = (v: string): string => { - return v.charAt(0).toUpperCase() + v.slice(1); -} - -export {capitalize} \ No newline at end of file diff --git a/samples/musicfestival-frontend-react/src/helpers/urlHelper.ts b/samples/musicfestival-frontend-react/src/helpers/urlHelper.ts index b54624c..e97d6e5 100644 --- a/samples/musicfestival-frontend-react/src/helpers/urlHelper.ts +++ b/samples/musicfestival-frontend-react/src/helpers/urlHelper.ts @@ -1,3 +1,5 @@ +import {Ranking} from "../generated"; + const isEditOrPreviewMode = () => { const params = window.location.search.split(/[&?]+/); return params.includes("epieditmode=true") || params.includes("epieditmode=false"); @@ -8,8 +10,8 @@ const getImageUrl = (path = "") => { if (!path) { return "" } - - return path.startsWith("http") ? path : siteUrl + path + + return path.startsWith("http") ? path : siteUrl + path } const extractParams = (urlPath: string) => { @@ -25,7 +27,7 @@ const extractParams = (urlPath: string) => { if (relativePath.endsWith('/')) { relativePath = relativePath.slice(0, -1) } - + if (relativePath.includes(",")) { const [, , idString] = relativePath.split(",") if (idString.includes("_")) { @@ -44,7 +46,17 @@ const extractParams = (urlPath: string) => { const urlSegments = relativePath.split('/') const language = urlSegments.length ? urlSegments.find(s => s.length === 2) : "en" - return { relativePath, locales: language, language, contentId, workId } + return {relativePath, locales: language, language, contentId, workId} +} + +const getRankingFromSearchParams = (searchParams: URLSearchParams): Ranking => { + for (const [key, value] of Object.entries(Ranking)) { + if (key.toLowerCase() === searchParams.get("r")?.toString().toLowerCase()) { + return value; + } + } + + return Ranking.Relevance; } -export { isEditOrPreviewMode, extractParams, getImageUrl } \ No newline at end of file +export {isEditOrPreviewMode, extractParams, getImageUrl, getRankingFromSearchParams} \ No newline at end of file diff --git a/samples/musicfestival-frontend-react/src/pages/SearchPage.tsx b/samples/musicfestival-frontend-react/src/pages/SearchPage.tsx index b9cc577..04644f6 100644 --- a/samples/musicfestival-frontend-react/src/pages/SearchPage.tsx +++ b/samples/musicfestival-frontend-react/src/pages/SearchPage.tsx @@ -7,19 +7,17 @@ import { ArtistAutocompleteQuery, ArtistSearchQuery, OtherContentSearchQuery, - Ranking, useArtistAutocompleteQuery, useArtistSearchQuery, useOtherContentSearchQuery } from "../generated"; import { generateGQLSearchQueryVars, updateSearchQueryCache } from "../helpers/queryCacheHelper"; -import { getImageUrl, isEditOrPreviewMode } from "../helpers/urlHelper"; +import {getImageUrl, getRankingFromSearchParams, isEditOrPreviewMode} from "../helpers/urlHelper"; import ReactPaginate from 'react-paginate'; import { useMutation, useQueryClient } from "@tanstack/react-query"; import { ContentSavedMessage } from "../models/ContentSavedMessage"; import authService from "../authService"; import { subcribeContentSavedEvent } from "../helpers/contentSavedEvent"; -import {capitalize} from "../helpers/string.utils"; let previousSavedMessage: any = null; const singleKeyUrl = process.env.REACT_APP_CONTENT_GRAPH_GATEWAY_URL as string @@ -44,7 +42,7 @@ function SearchPage() { let queryString = searchParams.get("q") ?? "" let filterQueryString = searchParams.get("f") ?? "" const [filterBy, setFilterBy] = useState(filterQueryString ?? ARTIST) - const ranking = Ranking[capitalize(searchParams.get("r")?.toString().toLowerCase() || "") as keyof typeof Ranking] || Ranking.Relevance; + const ranking = getRankingFromSearchParams(searchParams); let artistData: ArtistSearchQuery | undefined = undefined let otherData: OtherContentSearchQuery | undefined = undefined