Merge branch 'main' into bugfix/CG-4432-Sorting-doesnt-work-when-logged-in

# Conflicts:
#	samples/musicfestival-frontend-react/src/pages/SearchPage.tsx

Author: doanthanhnguyen95

samples/musicfestival-frontend-react/package.json

@@ -9,7 +9,6 @@
     "@graphql-codegen/typescript": "^2.7.3",
     "@graphql-codegen/typescript-operations": "^2.5.3",
     "@graphql-codegen/typescript-react-query": "^4.0.1",
-    "@mui/material": "^5.13.3",
     "@tanstack/react-query": "^4.6.0",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^13.0.0",

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

@@ -4,87 +4,74 @@ 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 {
+function SearchButton({filterValue}: any): JSX.Element {
+    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<CustomString>(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<CustomString>(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
 
     function search(event: any, action: string){
         if ((action == "keypress" && event.charCode === 13) || action == "buttonclick") {
-            window.location.href = `${window.location.origin}/search?q=${searchValue}`
+            window.location.href = `${window.location.origin}/search?q=${searchValue}&f=${filterValue ?? ARTIST}`
         }
     }
 
     function onValueChange(event: any){
         setSearchValue(event.target.value);
-        event.target.value != "" && event.target.value !== undefined ? setIsShown(true) : setIsShown(false);
+        event.target.value !== undefined ? setIsShown(true) : setIsShown(false);
     }
 
     function onAutoClick(event: any){
         setSearchValue(event.target.textContent);
-        window.location.href = `${window.location.origin}/search?q=${event.target.textContent}`
+        window.location.href = `${window.location.origin}/search?q=${event.target.textContent}&f=${filterValue ?? ARTIST}`
     }
 
     return (
         <div>
-            <div className="nav-table-cell">
-                <input className="search-input" type="text" id="search-input" placeholder="Search" 
-                    onKeyPress={(event) => {search(event, 'keypress')}} value={searchValue} onChange={onValueChange} />
-                    <a className="search-icon" onClick={(event) => {search(event, 'buttonclick')}}>
-                        <i className="fa fa-search"></i>
-                    </a>
-
-                    {/* <Autocomplete
-                        sx={{
-                        display: 'inline-block',
-                        '& input': {
-                            width: 200,
-                            bgcolor: 'background.paper',
-                            color: (theme) =>
-                            theme.palette.getContrastText(theme.palette.background.paper),
-                        },
-                        }}
-                        id="custom-input-demo"
-                        options={stringArr}
-                        renderInput={(params) => (
-                        <div ref={params.InputProps.ref}>
-                            <input className="search-input" type="text" id="search-input" placeholder="Search" 
-                    onKeyPress={(event) => {search(event, 'keypress')}} value={searchValue} onChange={onValueChange} {...params.inputProps} />
+            <div className="nav-table-cell autocomplete">
+                <input className="search-input" 
+                    type="text" 
+                    id="search-input" 
+                    placeholder="Search" 
+                    onKeyPress={(event) => {search(event, 'keypress')}} 
+                    value={searchValue} 
+                    onChange={onValueChange}
+                    onFocus={() => setIsShown(true)}
+                    onBlur={() =>
+                        setTimeout(() => {
+                            setIsShown(false);
+                        }, 150)
+                    } />
                     <a className="search-icon" onClick={(event) => {search(event, 'buttonclick')}}>
                         <i className="fa fa-search"></i>
                     </a>
-                        </div>
-                        )}
-                    /> */}
-            <div className="autocomplete-block" style={isShown ? {display: "inherit"}: {display: "none"}}>
-                {
-                    autocompleteData?.ArtistDetailsPage?.autocomplete?.ArtistName?.map((name) => {
-                        return(
-                            <div key={name} onClick={(event) => onAutoClick(event)}>{name}</div>
-                        )
-                    })                    
-                }
-                {
-                    autocompleteData?.ArtistDetailsPage?.autocomplete?.StageName?.map((name) => {
-                        return(
-                            <div key={name} onClick={(event) => onAutoClick(event)}>{name}</div>
-                        )
-                    })
-                }
-            </div>
+                <div className="autocomplete-block" style={isShown ? {display: "inherit"}: {display: "none"}}>
+                    {
+                        autocompleteData?.ArtistDetailsPage?.autocomplete?.ArtistName?.map((name, idx) => {
+                            return(
+                                <div key={idx} onClick={(event) => onAutoClick(event)}>{name}</div>
+                            )
+                        })                    
+                    }
+                    {
+                        autocompleteData?.ArtistDetailsPage?.autocomplete?.StageName?.map((name, idx) => {
+                            return(
+                                <div key={idx} onClick={(event) => onAutoClick(event)}>{name}</div>
+                            )
+                        })
+                    }
+                </div>
             </div>
         </div>
     );