From 81d5f2742151fe41d925d18f9224c2e356e2160b Mon Sep 17 00:00:00 2001 From: Doan Thanh Nguyen Date: Fri, 23 Jun 2023 14:51:30 +0700 Subject: [PATCH 1/2] CG-4433 Search param still displayed as undefined - Make the param displayed as an empty string instead of undefined - This bugfix also include CG-4434 Wrong search value when user click on the number of an item in facets --- .../musicfestival-frontend-react/src/App.css | 8 ++ .../src/components/SearchButton.tsx | 14 ++- .../src/pages/SearchPage.tsx | 96 +++++++++---------- 3 files changed, 59 insertions(+), 59 deletions(-) diff --git a/samples/musicfestival-frontend-react/src/App.css b/samples/musicfestival-frontend-react/src/App.css index 08e241e..b4ae768 100644 --- a/samples/musicfestival-frontend-react/src/App.css +++ b/samples/musicfestival-frontend-react/src/App.css @@ -4008,6 +4008,14 @@ input.search-input::placeholder { cursor: pointer; } +.facet-item{ + margin-bottom: 5px; +} + +.facet-item b{ + float: right; +} + .search-zone{ display: inline-block; width: 55%; diff --git a/samples/musicfestival-frontend-react/src/components/SearchButton.tsx b/samples/musicfestival-frontend-react/src/components/SearchButton.tsx index ac318a5..200d560 100644 --- a/samples/musicfestival-frontend-react/src/components/SearchButton.tsx +++ b/samples/musicfestival-frontend-react/src/components/SearchButton.tsx @@ -4,21 +4,19 @@ import { ArtistAutocompleteQuery, useArtistAutocompleteQuery } from "../generate import { generateGQLSearchQueryVars } from "../helpers/queryCacheHelper"; import { isEditOrPreviewMode } from "../helpers/urlHelper"; -const singleKeyUrl = process.env.REACT_APP_CONTENT_GRAPH_GATEWAY_URL as string - type CustomString = string | number | readonly string[] | undefined function SearchButton(): JSX.Element { + const singleKeyUrl = process.env.REACT_APP_CONTENT_GRAPH_GATEWAY_URL as string const [searchParams] = useSearchParams() const [token, setToken] = useState("") const [isShown, setIsShown] = useState(false) - const [searchValue, setSearchValue] = useState(searchParams.get("q")?.toString()) - const [orderBy, setOrderBy] = useState("ASC") - let variables: any = generateGQLSearchQueryVars(token, window.location.pathname, searchValue as string | null, orderBy); - const modeEdit = isEditOrPreviewMode() - let stringArr: (string | null)[] = [] - + const [searchValue, setSearchValue] = useState(searchParams.get("q")?.toString() ?? "") + const [orderBy] = useState("ASC") 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 }) autocompleteData = artistAutocompleteData diff --git a/samples/musicfestival-frontend-react/src/pages/SearchPage.tsx b/samples/musicfestival-frontend-react/src/pages/SearchPage.tsx index 511b946..70f6e37 100644 --- a/samples/musicfestival-frontend-react/src/pages/SearchPage.tsx +++ b/samples/musicfestival-frontend-react/src/pages/SearchPage.tsx @@ -8,51 +8,48 @@ import { generateGQLSearchQueryVars } from "../helpers/queryCacheHelper"; import { getImageUrl, isEditOrPreviewMode } from "../helpers/urlHelper"; import ReactPaginate from 'react-paginate'; -const singleKeyUrl = process.env.REACT_APP_CONTENT_GRAPH_GATEWAY_URL as string - function SearchPage() { + const singleKeyUrl = process.env.REACT_APP_CONTENT_GRAPH_GATEWAY_URL as string + const ARTIST = "Artist" + const OTHERCONTENT = "OtherContent" + const options: {value: string; key: string}[] = [ + {value: "ASC", key: "ASC"}, + {value: "DESC", key: "DESC"} + ] + const itemsPerPageOptions: {value: number; key: string}[] = [ + {value: 10, key: "10"}, + {value: 15, key: "15"} + ] + const filterByOption: {value: string; key: string}[] = [ + {value: "Artists", key: ARTIST}, + {value: "Other Content", key: OTHERCONTENT} + ] + const [token, setToken] = useState("") const [itemOffset, setItemOffset] = useState(0) const [otherItemOffset, setOtherItemOffset] = useState(0) const [itemsPerPage, setItemsPerPage] = useState(10) const [otherItemsPerPage, setOtherItemsPerPage] = useState(10) - const [filterBy, setFilterBy] = useState("Artist") + const [filterBy, setFilterBy] = useState(ARTIST) const [orderBy, setOrderBy] = useState("ASC") const [searchParams] = useSearchParams() - const endOffset = itemOffset + itemsPerPage; - const endOffsetOther = otherItemOffset + otherItemsPerPage; - const modeEdit = isEditOrPreviewMode() - let data: ArtistSearchQuery | undefined = undefined + + let artistData: ArtistSearchQuery | undefined = undefined let otherData: OtherContentSearchQuery | undefined = undefined let autocompleteData : ArtistAutocompleteQuery | undefined = undefined - let queryString: string | null let resultNumber : number let otherResultNumber : number - let variables: any - let options: {value: string; key: string}[] = [ - {value: "ASC", key: "ASC"}, - {value: "DESC", key: "DESC"} - ] - let itemsPerPageOptions: {value: number; key: string}[] = [ - {value: 10, key: "10"}, - {value: 15, key: "15"} - ] - let filterByOption: {value: string; key: string}[] = [ - {value: "Artists", key: "Artist"}, - {value: "Other Content", key: "OtherContent"} - ] - - queryString = searchParams.get("q") - if(queryString === undefined || queryString == 'undefined'){ - queryString = "" - } - - variables = generateGQLSearchQueryVars(token, window.location.pathname, queryString, orderBy); + + let modeEdit = isEditOrPreviewMode() + let queryString = searchParams.get("q") ?? "" + let variables = generateGQLSearchQueryVars(token, window.location.pathname, queryString, orderBy); + let endOffset = itemOffset + itemsPerPage + let endOffsetOther = otherItemOffset + otherItemsPerPage const { data : searchQueryData } = useArtistSearchQuery({ endpoint: singleKeyUrl }, variables, { staleTime: 2000, enabled: !modeEdit || !!token }); - data = searchQueryData - resultNumber = data?.ArtistDetailsPage?.items?.length ?? 0 - const currentItems = data?.ArtistDetailsPage?.items?.slice(itemOffset, endOffset); + artistData = searchQueryData + resultNumber = artistData?.ArtistDetailsPage?.items?.length ?? 0 + const currentItems = artistData?.ArtistDetailsPage?.items?.slice(itemOffset, endOffset); const pageCount = Math.ceil(resultNumber / itemsPerPage); const { data : otherContentSearchQueryData } = useOtherContentSearchQuery({ endpoint: singleKeyUrl }, variables, { staleTime: 2000, enabled: !modeEdit || !!token }); @@ -123,49 +120,46 @@ function SearchPage() {
Filter by: -
+
Artist Name: { - data?.ArtistDetailsPage?.facets?.ArtistName?.map((artist) => { + artistData?.ArtistDetailsPage?.facets?.ArtistName?.map((artist, idx) => { return ( - -
+
Stage Name: { - data?.ArtistDetailsPage?.facets?.StageName?.map((artist) => { + artistData?.ArtistDetailsPage?.facets?.StageName?.map((artist, idx) => { return ( - -
+
Content: { - otherData?.Content?.facets?.Name?.map((content) => { + otherData?.Content?.facets?.Name?.map((content, idx) => { return ( -
+ ) }) @@ -174,7 +168,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: @@ -189,7 +183,7 @@ function SearchPage() {
-
+
{ currentItems?.map((content, idx) => { @@ -273,7 +267,7 @@ function SearchPage() {
-
+
{ currentOtherItems?.map((content, idx) => { From 46a5dcc1a2be6dbc95003b41a5c420a0c6cdcb3b Mon Sep 17 00:00:00 2001 From: Doan Thanh Nguyen Date: Wed, 28 Jun 2023 13:42:23 +0700 Subject: [PATCH 2/2] CG-4433 - Refactoring some dictionaries --- .../src/pages/SearchPage.tsx | 22 +++++++------------ 1 file changed, 8 insertions(+), 14 deletions(-) diff --git a/samples/musicfestival-frontend-react/src/pages/SearchPage.tsx b/samples/musicfestival-frontend-react/src/pages/SearchPage.tsx index 70f6e37..866ad2b 100644 --- a/samples/musicfestival-frontend-react/src/pages/SearchPage.tsx +++ b/samples/musicfestival-frontend-react/src/pages/SearchPage.tsx @@ -12,14 +12,8 @@ function SearchPage() { const singleKeyUrl = process.env.REACT_APP_CONTENT_GRAPH_GATEWAY_URL as string const ARTIST = "Artist" const OTHERCONTENT = "OtherContent" - const options: {value: string; key: string}[] = [ - {value: "ASC", key: "ASC"}, - {value: "DESC", key: "DESC"} - ] - const itemsPerPageOptions: {value: number; key: string}[] = [ - {value: 10, key: "10"}, - {value: 15, key: "15"} - ] + const options: string[] = ["ASC", "DESC"] + const itemsPerPageOptions: number[] = [10, 15] const filterByOption: {value: string; key: string}[] = [ {value: "Artists", key: ARTIST}, {value: "Other Content", key: OTHERCONTENT} @@ -174,9 +168,9 @@ function SearchPage() { Sort: { - itemsPerPageOptions.map((option) => { + itemsPerPageOptions.map((option, idx) => { return ( - + ) }) } @@ -298,9 +292,9 @@ function SearchPage() { Items per page: