Skip to content

Commit 3f14bd7

Browse files
doanthanhnguyen95doanthanhnguyen95
committed
- Commit some small changes
1 parent 8302785 commit 3f14bd7

File tree

1 file changed

+34
-36
lines changed

1 file changed

+34
-36
lines changed

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

Lines changed: 34 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,8 @@ function SearchPage() {
2929
const [otherItemsPerPage, setOtherItemsPerPage] = useState(10)
3030
const [orderBy, setOrderBy] = useState("ASC")
3131
const [searchParams] = useSearchParams()
32-
const endOffset = itemOffset + itemsPerPage;
33-
const endOffsetOther = otherItemOffset + otherItemsPerPage;
32+
const endOffset = itemOffset + itemsPerPage
33+
const endOffsetOther = otherItemOffset + otherItemsPerPage
3434
const modeEdit = isEditOrPreviewMode()
3535
let queryString = searchParams.get("q") ?? ""
3636
let filterQueryString = searchParams.get("f") ?? ""
@@ -49,9 +49,9 @@ function SearchPage() {
4949
{value: "Other Content", key: "OtherContent"}
5050
]
5151

52-
if(queryString === undefined || queryString == 'undefined'){
53-
queryString = ""
54-
}
52+
53+
let headers = {}
54+
let url = singleKeyUrl
5555

5656
const { mutate } = useMutation((obj: any) => obj, {
5757
onSuccess: (message: ContentSavedMessage) => {
@@ -62,69 +62,67 @@ function SearchPage() {
6262
}
6363
});
6464

65-
let headers = {}
66-
let url = singleKeyUrl
67-
6865
authService.getAccessToken().then((_token) => {
6966
_token && setToken(_token)
7067
modeEdit && !_token && !artistData && authService.login()
7168
})
7269

73-
variables = generateGQLSearchQueryVars(token, window.location.pathname, queryString, orderBy);
7470
if (modeEdit) {
7571
if (token) {
76-
headers = { 'Authorization': 'Bearer ' + token };
72+
headers = { 'Authorization': 'Bearer ' + token }
7773
}
7874
url = hmacKeyUrl
7975
subcribeContentSavedEvent((message: any) => mutate(message))
8076
}
8177

82-
const { data : searchQueryData } = useArtistSearchQuery({ endpoint: url, fetchParams: { headers: headers } }, variables, { staleTime: 2000, enabled: !modeEdit || !!token });
78+
variables = generateGQLSearchQueryVars(token, window.location.pathname, queryString, orderBy)
79+
80+
const { data : searchQueryData } = useArtistSearchQuery({ endpoint: url, fetchParams: { headers: headers } }, variables, { staleTime: 2000, enabled: !modeEdit || !!token })
8381
artistData = searchQueryData
8482
resultNumber = artistData?.ArtistDetailsPage?.items?.length ?? 0
85-
const currentItems = artistData?.ArtistDetailsPage?.items?.slice(itemOffset, endOffset);
86-
const pageCount = Math.ceil(resultNumber / itemsPerPage);
83+
const currentItems = artistData?.ArtistDetailsPage?.items?.slice(itemOffset, endOffset)
84+
const pageCount = Math.ceil(resultNumber / itemsPerPage)
8785

88-
const { data : otherContentSearchQueryData } = useOtherContentSearchQuery({ endpoint: singleKeyUrl }, variables, { staleTime: 2000, enabled: !modeEdit || !!token });
86+
const { data : otherContentSearchQueryData } = useOtherContentSearchQuery({ endpoint: singleKeyUrl }, variables, { staleTime: 2000, enabled: !modeEdit || !!token })
8987
otherData = otherContentSearchQueryData
9088
otherResultNumber = otherData?.Content?.items?.length ?? 0
91-
const currentOtherItems = otherData?.Content?.items?.slice(otherItemOffset, endOffsetOther);
92-
const pageOtherCount = Math.ceil(otherResultNumber / itemsPerPage);
89+
const currentOtherItems = otherData?.Content?.items?.slice(otherItemOffset, endOffsetOther)
90+
const pageOtherCount = Math.ceil(otherResultNumber / itemsPerPage)
9391

9492
const { data : artistAutocompleteData } = useArtistAutocompleteQuery({ endpoint: singleKeyUrl }, variables, { staleTime: 2000, enabled: !modeEdit || !!token })
9593
autocompleteData = artistAutocompleteData
9694

9795
const handlePageClick = (event: any) => {
98-
const newOffset = (event.selected * itemsPerPage) % resultNumber;
99-
setItemOffset(newOffset);
96+
const newOffset = (event.selected * itemsPerPage) % resultNumber
97+
setItemOffset(newOffset)
10098
};
10199

102100
const handleItemsChange = (event: any) => {
103-
setItemsPerPage(event.target.value);
101+
setItemsPerPage(event.target.value)
104102
};
105103

106104
const handleOtherPageClick = (event: any) => {
107-
const newOffset = (event.selected * itemsPerPage) % otherResultNumber;
108-
setOtherItemOffset(newOffset);
105+
const newOffset = (event.selected * itemsPerPage) % otherResultNumber
106+
setOtherItemOffset(newOffset)
109107
};
110108

111109
const handleOtherItemsChange = (event: any) => {
112-
setOtherItemsPerPage(event.target.value);
113-
};
114-
115-
const handleFilterByChange = (event : any) => {
116-
setFilterBy(event.target.value)
110+
setOtherItemsPerPage(event.target.value)
117111
};
118112

119113
const handleChange = (event: any) => {
120-
setOrderBy(event.target.value);
114+
setOrderBy(event.target.value)
121115
}
122116

123117
const handleFacetClick = (event: any) => {
124118
window.location.href = `${window.location.origin}/search?q=${event.target.innerText}&f=${filterBy}`
125119
}
126120

127-
console.log("End")
121+
const handleFilterByChange = (event : any) => {
122+
setFilterBy(event.target.value)
123+
setOtherItemsPerPage(event.target.value)
124+
};
125+
128126

129127
return (
130128
<div>
@@ -176,7 +174,7 @@ function SearchPage() {
176174
artistData?.ArtistDetailsPage?.facets?.StageName?.map((artist, idx) => {
177175
return (
178176
<div key={idx} className="facet-item">
179-
<a key={artist?.name} onClick={(event) => handleFacetClick(event)}>
177+
<a onClick={(event) => handleFacetClick(event)}>
180178
<span>{artist?.name}</span>
181179
</a>
182180
<b>{artist?.count}</b>
@@ -191,7 +189,7 @@ function SearchPage() {
191189
otherData?.Content?.facets?.Name?.map((content, idx) => {
192190
return (
193191
<div key={idx} className="facet-item">
194-
<a key={content?.name} onClick={(event) => handleFacetClick(event)}>
192+
<a onClick={(event) => handleFacetClick(event)}>
195193
<span>{content?.name}</span>
196194
</a>
197195
<b>{content?.count}</b>
@@ -248,21 +246,21 @@ function SearchPage() {
248246
<h6>People also search for: </h6>
249247
<br></br>
250248
{
251-
autocompleteData?.ArtistDetailsPage?.autocomplete?.ArtistName?.map((name) => {
249+
autocompleteData?.ArtistDetailsPage?.autocomplete?.ArtistName?.map((name, idx) => {
252250
return (
253-
<div>
254-
<a key={name} onClick={(event) => handleFacetClick(event)}>
251+
<div key={idx}>
252+
<a onClick={(event) => handleFacetClick(event)}>
255253
<i>{name}</i>
256254
</a>
257255
</div>
258256
)
259257
})
260258
}
261259
{
262-
autocompleteData?.ArtistDetailsPage?.autocomplete?.StageName?.map((name) => {
260+
autocompleteData?.ArtistDetailsPage?.autocomplete?.StageName?.map((name, idx) => {
263261
return (
264-
<div>
265-
<a key={name} onClick={(event) => handleFacetClick(event)}>
262+
<div key={idx}>
263+
<a onClick={(event) => handleFacetClick(event)}>
266264
<i>{name}</i>
267265
</a>
268266
</div>

0 commit comments

Comments
 (0)