Skip to content

Commit c7abf40

Browse files
doanthanhnguyen95doanthanhnguyen95
authored
CG -4453 should keep search by value as selected when searching (#33)
- Add new query string in order to keep the search by value as selected whenever user do a new search
2 parents 28ce1a6 + b5ced5d commit c7abf40

File tree

3 files changed

+73
-77
lines changed

3 files changed

+73
-77
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: 14 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4,27 +4,26 @@ 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

11-
function SearchButton(): JSX.Element {
9+
function SearchButton({filterValue}: any): JSX.Element {
10+
const singleKeyUrl = process.env.REACT_APP_CONTENT_GRAPH_GATEWAY_URL as string
11+
const ARTIST = "Artist"
1212
const [searchParams] = useSearchParams()
1313
const [token, setToken] = useState("")
1414
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-
15+
const [searchValue, setSearchValue] = useState<CustomString>(searchParams.get("q")?.toString() ?? "")
16+
const [orderBy] = useState("ASC")
2117
let autocompleteData : ArtistAutocompleteQuery | undefined = undefined
18+
19+
let modeEdit = isEditOrPreviewMode()
20+
let variables = generateGQLSearchQueryVars(token, window.location.pathname, searchValue as string | null, orderBy);
2221
const { data : artistAutocompleteData } = useArtistAutocompleteQuery({ endpoint: singleKeyUrl }, variables, { staleTime: 2000, enabled: !modeEdit || !!token })
2322
autocompleteData = artistAutocompleteData
2423

2524
function search(event: any, action: string){
2625
if ((action == "keypress" && event.charCode === 13) || action == "buttonclick") {
27-
window.location.href = `${window.location.origin}/search?q=${searchValue}`
26+
window.location.href = `${window.location.origin}/search?q=${searchValue}&f=${filterValue ?? ARTIST}`
2827
}
2928
}
3029

@@ -35,7 +34,7 @@ function SearchButton(): JSX.Element {
3534

3635
function onAutoClick(event: any){
3736
setSearchValue(event.target.textContent);
38-
window.location.href = `${window.location.origin}/search?q=${event.target.textContent}`
37+
window.location.href = `${window.location.origin}/search?q=${event.target.textContent}&f=${filterValue ?? ARTIST}`
3938
}
4039

4140
return (
@@ -59,16 +58,16 @@ function SearchButton(): JSX.Element {
5958
</a>
6059
<div className="autocomplete-block" style={isShown ? {display: "inherit"}: {display: "none"}}>
6160
{
62-
autocompleteData?.ArtistDetailsPage?.autocomplete?.ArtistName?.map((name) => {
61+
autocompleteData?.ArtistDetailsPage?.autocomplete?.ArtistName?.map((name, idx) => {
6362
return(
64-
<div key={name} onClick={(event) => onAutoClick(event)}>{name}</div>
63+
<div key={idx} onClick={(event) => onAutoClick(event)}>{name}</div>
6564
)
6665
})
6766
}
6867
{
69-
autocompleteData?.ArtistDetailsPage?.autocomplete?.StageName?.map((name) => {
68+
autocompleteData?.ArtistDetailsPage?.autocomplete?.StageName?.map((name, idx) => {
7069
return(
71-
<div key={name} onClick={(event) => onAutoClick(event)}>{name}</div>
70+
<div key={idx} onClick={(event) => onAutoClick(event)}>{name}</div>
7271
)
7372
})
7473
}

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

Lines changed: 51 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -8,51 +8,43 @@ 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: string[] = ["ASC", "DESC"]
16+
const itemsPerPageOptions: number[] = [10, 15]
17+
const filterByOption: {value: string; key: string}[] = [
18+
{value: "Artists", key: ARTIST},
19+
{value: "Other Content", key: OTHERCONTENT}
20+
]
21+
1422
const [token, setToken] = useState("")
1523
const [itemOffset, setItemOffset] = useState(0)
1624
const [otherItemOffset, setOtherItemOffset] = useState(0)
1725
const [itemsPerPage, setItemsPerPage] = useState(10)
1826
const [otherItemsPerPage, setOtherItemsPerPage] = useState(10)
19-
const [filterBy, setFilterBy] = useState("Artist")
2027
const [orderBy, setOrderBy] = useState("ASC")
2128
const [searchParams] = useSearchParams()
22-
const endOffset = itemOffset + itemsPerPage;
23-
const endOffsetOther = otherItemOffset + otherItemsPerPage;
24-
const modeEdit = isEditOrPreviewMode()
25-
let data: ArtistSearchQuery | undefined = undefined
29+
let queryString = searchParams.get("q") ?? ""
30+
let filterQueryString = searchParams.get("f") ?? ""
31+
const [filterBy, setFilterBy] = useState(filterQueryString ?? ARTIST)
32+
33+
let artistData: ArtistSearchQuery | undefined = undefined
2634
let otherData: OtherContentSearchQuery | undefined = undefined
2735
let autocompleteData : ArtistAutocompleteQuery | undefined = undefined
28-
let queryString: string | null
2936
let resultNumber : number
3037
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);
38+
39+
let modeEdit = isEditOrPreviewMode()
40+
let variables = generateGQLSearchQueryVars(token, window.location.pathname, queryString, orderBy);
41+
let endOffset = itemOffset + itemsPerPage
42+
let endOffsetOther = otherItemOffset + otherItemsPerPage
5143

5244
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);
45+
artistData = searchQueryData
46+
resultNumber = artistData?.ArtistDetailsPage?.items?.length ?? 0
47+
const currentItems = artistData?.ArtistDetailsPage?.items?.slice(itemOffset, endOffset);
5648
const pageCount = Math.ceil(resultNumber / itemsPerPage);
5749

5850
const { data : otherContentSearchQueryData } = useOtherContentSearchQuery({ endpoint: singleKeyUrl }, variables, { staleTime: 2000, enabled: !modeEdit || !!token });
@@ -82,16 +74,16 @@ function SearchPage() {
8274
setOtherItemsPerPage(event.target.value);
8375
};
8476

85-
const handleFilterByChange = (event: any) => {
86-
setFilterBy(event.target.value);
77+
const handleFilterByChange = (event : any) => {
78+
setFilterBy(event.target.value)
8779
};
8880

8981
const handleChange = (event: any) => {
9082
setOrderBy(event.target.value);
9183
}
9284

9385
const handleFacetClick = (event: any) => {
94-
window.location.href = `${window.location.origin}/search?q=${event.target.innerText}`
86+
window.location.href = `${window.location.origin}/search?q=${event.target.innerText}&f=${filterBy}`
9587
}
9688

9789
return (
@@ -105,11 +97,11 @@ function SearchPage() {
10597
</div>
10698
<div className="search-zone">
10799
<div style={{float: "left"}}>
108-
<SearchButton />
100+
<SearchButton filterValue={filterBy}/>
109101
</div>
110102
<div style={{float: "right"}}>
111103
<span>Search by: </span>
112-
<select className="Button" onChange={handleFilterByChange}>
104+
<select value={filterBy} className="Button" onChange={handleFilterByChange}>
113105
{
114106
filterByOption.map((option) => {
115107
return (
@@ -123,49 +115,46 @@ function SearchPage() {
123115
<div className="search-panel">
124116
<div className="left-panel">
125117
<b>Filter by: </b>
126-
<div className="facets" style={filterBy == "Artist" ? {display: "inherit"}: {display: "none"}}>
118+
<div className="facets" style={filterBy == ARTIST ? {display: "inherit"}: {display: "none"}}>
127119
<b>Artist Name: </b>
128120
{
129-
data?.ArtistDetailsPage?.facets?.ArtistName?.map((artist) => {
121+
artistData?.ArtistDetailsPage?.facets?.ArtistName?.map((artist, idx) => {
130122
return (
131-
<div>
123+
<div key={idx} className="facet-item">
132124
<a key={artist?.name} onClick={(event) => handleFacetClick(event)}>
133-
<span>{artist?.name}</span>
134-
&nbsp;
135-
<b>({artist?.count})</b>
125+
<span>{artist?.name}</span>
136126
</a>
127+
<b>{artist?.count}</b>
137128
</div>
138129
)
139130
})
140131
}
141132
</div>
142-
<div className="facets" style={filterBy == "Artist" ? {display: "inherit"}: {display: "none"}}>
133+
<div className="facets" style={filterBy == ARTIST ? {display: "inherit"}: {display: "none"}}>
143134
<b>Stage Name: </b>
144135
{
145-
data?.ArtistDetailsPage?.facets?.StageName?.map((artist) => {
136+
artistData?.ArtistDetailsPage?.facets?.StageName?.map((artist, idx) => {
146137
return (
147-
<div>
138+
<div key={idx} className="facet-item">
148139
<a key={artist?.name} onClick={(event) => handleFacetClick(event)}>
149-
<span>{artist?.name}</span>
150-
&nbsp;
151-
<b>({artist?.count})</b>
140+
<span>{artist?.name}</span>
152141
</a>
142+
<b>{artist?.count}</b>
153143
</div>
154144
)
155145
})
156146
}
157147
</div>
158-
<div className="facets" style={filterBy == "OtherContent" ? {display: "inherit"}: {display: "none"}}>
148+
<div className="facets" style={filterBy == OTHERCONTENT ? {display: "inherit"}: {display: "none"}}>
159149
<b>Content: </b>
160150
{
161-
otherData?.Content?.facets?.Name?.map((content) => {
151+
otherData?.Content?.facets?.Name?.map((content, idx) => {
162152
return (
163-
<div>
153+
<div key={idx} className="facet-item">
164154
<a key={content?.name} onClick={(event) => handleFacetClick(event)}>
165155
<span>{content?.name}</span>
166-
&nbsp;
167-
<b>({content?.count})</b>
168156
</a>
157+
<b>{content?.count}</b>
169158
</div>
170159
)
171160
})
@@ -174,22 +163,22 @@ function SearchPage() {
174163
</div>
175164
<div className="right-panel">
176165
<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>
166+
<h6>Your search for <span className="search-term">{queryString}</span> resulted in <span className="search-term">{filterBy == ARTIST ? resultNumber : otherResultNumber}</span> hits</h6>
178167
</div>
179168
<div className="search-sorting">
180169
<span>Sort: </span>
181170
<select onChange={e => handleChange(e)} className="Button">
182171
{
183-
options.map((option) => {
172+
options.map((value, idx) => {
184173
return (
185-
<option key={option.key} value={option.key}>{option.value}</option>
174+
<option key={idx} value={value}>{value}</option>
186175
)
187176
})
188177
}
189178
</select>
190179
</div>
191180
<div className="result-block">
192-
<div style={filterBy == "Artist" ? {display: "initial"}: {display: "none"}}>
181+
<div style={filterBy == ARTIST ? {display: "initial"}: {display: "none"}}>
193182
<div className="search-results">
194183
{
195184
currentItems?.map((content, idx) => {
@@ -249,9 +238,9 @@ function SearchPage() {
249238
<span>Items per page: </span>
250239
<select className="Button" onChange={handleItemsChange}>
251240
{
252-
itemsPerPageOptions.map((option) => {
241+
itemsPerPageOptions.map((option, idx) => {
253242
return (
254-
<option key={option.key} value={option.key}>{option.value}</option>
243+
<option key={idx} value={option}>{option}</option>
255244
)
256245
})
257246
}
@@ -273,7 +262,7 @@ function SearchPage() {
273262
</table>
274263
</div>
275264
</div>
276-
<div style={filterBy == "OtherContent" ? {display: "initial"}: {display: "none"}}>
265+
<div style={filterBy == OTHERCONTENT ? {display: "initial"}: {display: "none"}}>
277266
<div className="search-results">
278267
{
279268
currentOtherItems?.map((content, idx) => {
@@ -304,9 +293,9 @@ function SearchPage() {
304293
<span>Items per page: </span>
305294
<select className="Button" onChange={handleOtherItemsChange}>
306295
{
307-
itemsPerPageOptions.map((option) => {
296+
itemsPerPageOptions.map((option, idx) => {
308297
return (
309-
<option key={option.key} value={option.key}>{option.value}</option>
298+
<option key={idx} value={option}>{option}</option>
310299
)
311300
})
312301
}

0 commit comments

Comments
 (0)