Skip to content

Commit 81d5f27

Browse files
doanthanhnguyen95doanthanhnguyen95
committed
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
1 parent 28ce1a6 commit 81d5f27

File tree

3 files changed

+59
-59
lines changed

3 files changed

+59
-59
lines changed

‎samples/musicfestival-frontend-react/src/App.css‎

Lines changed: 8 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎samples/musicfestival-frontend-react/src/components/SearchButton.tsx‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,21 +4,19 @@ import { ArtistAutocompleteQuery, useArtistAutocompleteQuery } from "../generate
44
import { generateGQLSearchQueryVars } from "../helpers/queryCacheHelper";
55
import { isEditOrPreviewMode } from "../helpers/urlHelper";
66

7-
const singleKeyUrl = process.env.REACT_APP_CONTENT_GRAPH_GATEWAY_URL as string
8-
97
type CustomString = string | number | readonly string[] | undefined
108

119
function SearchButton(): JSX.Element {
10+
const singleKeyUrl = process.env.REACT_APP_CONTENT_GRAPH_GATEWAY_URL as string
1211
const [searchParams] = useSearchParams()
1312
const [token, setToken] = useState("")
1413
const [isShown, setIsShown] = useState(false)
15-
const [searchValue, setSearchValue] = useState<CustomString>(searchParams.get("q")?.toString())
16-
const [orderBy, setOrderBy] = useState("ASC")
17-
let variables: any = generateGQLSearchQueryVars(token, window.location.pathname, searchValue as string | null, orderBy);
18-
const modeEdit = isEditOrPreviewMode()
19-
let stringArr: (string | null)[] = []
20-
14+
const [searchValue, setSearchValue] = useState<CustomString>(searchParams.get("q")?.toString() ?? "")
15+
const [orderBy] = useState("ASC")
2116
let autocompleteData : ArtistAutocompleteQuery | undefined = undefined
17+
18+
let modeEdit = isEditOrPreviewMode()
19+
let variables = generateGQLSearchQueryVars(token, window.location.pathname, searchValue as string | null, orderBy);
2220
const { data : artistAutocompleteData } = useArtistAutocompleteQuery({ endpoint: singleKeyUrl }, variables, { staleTime: 2000, enabled: !modeEdit || !!token })
2321
autocompleteData = artistAutocompleteData
2422

‎samples/musicfestival-frontend-react/src/pages/SearchPage.tsx‎

Lines changed: 45 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -8,51 +8,48 @@ import { generateGQLSearchQueryVars } from "../helpers/queryCacheHelper";
88
import { getImageUrl, isEditOrPreviewMode } from "../helpers/urlHelper";
99
import ReactPaginate from 'react-paginate';
1010

11-
const singleKeyUrl = process.env.REACT_APP_CONTENT_GRAPH_GATEWAY_URL as string
12-
1311
function SearchPage() {
12+
const singleKeyUrl = process.env.REACT_APP_CONTENT_GRAPH_GATEWAY_URL as string
13+
const ARTIST = "Artist"
14+
const OTHERCONTENT = "OtherContent"
15+
const options: {value: string; key: string}[] = [
16+
{value: "ASC", key: "ASC"},
17+
{value: "DESC", key: "DESC"}
18+
]
19+
const itemsPerPageOptions: {value: number; key: string}[] = [
20+
{value: 10, key: "10"},
21+
{value: 15, key: "15"}
22+
]
23+
const filterByOption: {value: string; key: string}[] = [
24+
{value: "Artists", key: ARTIST},
25+
{value: "Other Content", key: OTHERCONTENT}
26+
]
27+
1428
const [token, setToken] = useState("")
1529
const [itemOffset, setItemOffset] = useState(0)
1630
const [otherItemOffset, setOtherItemOffset] = useState(0)
1731
const [itemsPerPage, setItemsPerPage] = useState(10)
1832
const [otherItemsPerPage, setOtherItemsPerPage] = useState(10)
19-
const [filterBy, setFilterBy] = useState("Artist")
33+
const [filterBy, setFilterBy] = useState(ARTIST)
2034
const [orderBy, setOrderBy] = useState("ASC")
2135
const [searchParams] = useSearchParams()
22-
const endOffset = itemOffset + itemsPerPage;
23-
const endOffsetOther = otherItemOffset + otherItemsPerPage;
24-
const modeEdit = isEditOrPreviewMode()
25-
let data: ArtistSearchQuery | undefined = undefined
36+
37+
let artistData: ArtistSearchQuery | undefined = undefined
2638
let otherData: OtherContentSearchQuery | undefined = undefined
2739
let autocompleteData : ArtistAutocompleteQuery | undefined = undefined
28-
let queryString: string | null
2940
let resultNumber : number
3041
let otherResultNumber : number
31-
let variables: any
32-
let options: {value: string; key: string}[] = [
33-
{value: "ASC", key: "ASC"},
34-
{value: "DESC", key: "DESC"}
35-
]
36-
let itemsPerPageOptions: {value: number; key: string}[] = [
37-
{value: 10, key: "10"},
38-
{value: 15, key: "15"}
39-
]
40-
let filterByOption: {value: string; key: string}[] = [
41-
{value: "Artists", key: "Artist"},
42-
{value: "Other Content", key: "OtherContent"}
43-
]
44-
45-
queryString = searchParams.get("q")
46-
if(queryString === undefined || queryString == 'undefined'){
47-
queryString = ""
48-
}
49-
50-
variables = generateGQLSearchQueryVars(token, window.location.pathname, queryString, orderBy);
42+
43+
let modeEdit = isEditOrPreviewMode()
44+
let queryString = searchParams.get("q") ?? ""
45+
let variables = generateGQLSearchQueryVars(token, window.location.pathname, queryString, orderBy);
46+
let endOffset = itemOffset + itemsPerPage
47+
let endOffsetOther = otherItemOffset + otherItemsPerPage
5148

5249
const { data : searchQueryData } = useArtistSearchQuery({ endpoint: singleKeyUrl }, variables, { staleTime: 2000, enabled: !modeEdit || !!token });
53-
data = searchQueryData
54-
resultNumber = data?.ArtistDetailsPage?.items?.length ?? 0
55-
const currentItems = data?.ArtistDetailsPage?.items?.slice(itemOffset, endOffset);
50+
artistData = searchQueryData
51+
resultNumber = artistData?.ArtistDetailsPage?.items?.length ?? 0
52+
const currentItems = artistData?.ArtistDetailsPage?.items?.slice(itemOffset, endOffset);
5653
const pageCount = Math.ceil(resultNumber / itemsPerPage);
5754

5855
const { data : otherContentSearchQueryData } = useOtherContentSearchQuery({ endpoint: singleKeyUrl }, variables, { staleTime: 2000, enabled: !modeEdit || !!token });
@@ -123,49 +120,46 @@ function SearchPage() {
123120
<div className="search-panel">
124121
<div className="left-panel">
125122
<b>Filter by: </b>
126-
<div className="facets" style={filterBy == "Artist" ? {display: "inherit"}: {display: "none"}}>
123+
<div className="facets" style={filterBy == ARTIST ? {display: "inherit"}: {display: "none"}}>
127124
<b>Artist Name: </b>
128125
{
129-
data?.ArtistDetailsPage?.facets?.ArtistName?.map((artist) => {
126+
artistData?.ArtistDetailsPage?.facets?.ArtistName?.map((artist, idx) => {
130127
return (
131-
<div>
128+
<div key={idx} className="facet-item">
132129
<a key={artist?.name} onClick={(event) => handleFacetClick(event)}>
133-
<span>{artist?.name}</span>
134-
&nbsp;
135-
<b>({artist?.count})</b>
130+
<span>{artist?.name}</span>
136131
</a>
132+
<b>{artist?.count}</b>
137133
</div>
138134
)
139135
})
140136
}
141137
</div>
142-
<div className="facets" style={filterBy == "Artist" ? {display: "inherit"}: {display: "none"}}>
138+
<div className="facets" style={filterBy == ARTIST ? {display: "inherit"}: {display: "none"}}>
143139
<b>Stage Name: </b>
144140
{
145-
data?.ArtistDetailsPage?.facets?.StageName?.map((artist) => {
141+
artistData?.ArtistDetailsPage?.facets?.StageName?.map((artist, idx) => {
146142
return (
147-
<div>
143+
<div key={idx} className="facet-item">
148144
<a key={artist?.name} onClick={(event) => handleFacetClick(event)}>
149-
<span>{artist?.name}</span>
150-
&nbsp;
151-
<b>({artist?.count})</b>
145+
<span>{artist?.name}</span>
152146
</a>
147+
<b>{artist?.count}</b>
153148
</div>
154149
)
155150
})
156151
}
157152
</div>
158-
<div className="facets" style={filterBy == "OtherContent" ? {display: "inherit"}: {display: "none"}}>
153+
<div className="facets" style={filterBy == OTHERCONTENT ? {display: "inherit"}: {display: "none"}}>
159154
<b>Content: </b>
160155
{
161-
otherData?.Content?.facets?.Name?.map((content) => {
156+
otherData?.Content?.facets?.Name?.map((content, idx) => {
162157
return (
163-
<div>
158+
<div key={idx} className="facet-item">
164159
<a key={content?.name} onClick={(event) => handleFacetClick(event)}>
165160
<span>{content?.name}</span>
166-
&nbsp;
167-
<b>({content?.count})</b>
168161
</a>
162+
<b>{content?.count}</b>
169163
</div>
170164
)
171165
})
@@ -174,7 +168,7 @@ function SearchPage() {
174168
</div>
175169
<div className="right-panel">
176170
<div className="search-description">
177-
<h6>Your search for <span className="search-term">{queryString}</span> resulted in <span className="search-term">{filterBy == "Artist" ? resultNumber : otherResultNumber}</span> hits</h6>
171+
<h6>Your search for <span className="search-term">{queryString}</span> resulted in <span className="search-term">{filterBy == ARTIST ? resultNumber : otherResultNumber}</span> hits</h6>
178172
</div>
179173
<div className="search-sorting">
180174
<span>Sort: </span>
@@ -189,7 +183,7 @@ function SearchPage() {
189183
</select>
190184
</div>
191185
<div className="result-block">
192-
<div style={filterBy == "Artist" ? {display: "initial"}: {display: "none"}}>
186+
<div style={filterBy == ARTIST ? {display: "initial"}: {display: "none"}}>
193187
<div className="search-results">
194188
{
195189
currentItems?.map((content, idx) => {
@@ -273,7 +267,7 @@ function SearchPage() {
273267
</table>
274268
</div>
275269
</div>
276-
<div style={filterBy == "OtherContent" ? {display: "initial"}: {display: "none"}}>
270+
<div style={filterBy == OTHERCONTENT ? {display: "initial"}: {display: "none"}}>
277271
<div className="search-results">
278272
{
279273
currentOtherItems?.map((content, idx) => {

0 commit comments

Comments
 (0)