From 1c87cf54b074c0af6461058f2ffd49fe454e9186 Mon Sep 17 00:00:00 2001
From: JordanPlayz158 <JordanAdamsBusiness@outlook.com>
Date: Fri, 7 Apr 2023 18:42:32 -0400
Subject: [PATCH] Added functionality when selecting an auto-completed game
 from the list, it will go directly to the game's page and clear the filter
 for next use.

---
 .../components/UI/SearchBar/index.tsx         | 31 +++++++++++++++++--
 1 file changed, 29 insertions(+), 2 deletions(-)

diff --git a/src/frontend/components/UI/SearchBar/index.tsx b/src/frontend/components/UI/SearchBar/index.tsx
index e0730ce101..d3400a2eb7 100644
--- a/src/frontend/components/UI/SearchBar/index.tsx
+++ b/src/frontend/components/UI/SearchBar/index.tsx
@@ -7,10 +7,12 @@ import React, {
   useRef
 } from 'react'
 import { useTranslation } from 'react-i18next'
+import { useNavigate } from 'react-router-dom'
 import ContextProvider from 'frontend/state/ContextProvider'
 import './index.css'
 import { faXmark } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { GameInfo } from '../../../../common/types'
 
 function fixFilter(text: string) {
   const regex = new RegExp(/([?\\|*|+|(|)|[|]|])+/, 'g')
@@ -21,6 +23,8 @@ export default React.memo(function SearchBar() {
   const { handleSearch, filterText, epic, gog, sideloadedLibrary } =
     useContext(ContextProvider)
   const { t } = useTranslation()
+  const navigate = useNavigate()
+
   const input = useRef<HTMLInputElement>(null)
 
   const list = useMemo(() => {
@@ -61,12 +65,35 @@ export default React.memo(function SearchBar() {
   }, [input])
 
   const handleClick = (title: string) => {
+    handleSearch('')
     if (input.current) {
-      input.current.value = title
-      handleSearch(title)
+      input.current.value = ''
+
+      const game: GameInfo | undefined = getGameInfoByAppTitle(title)
+
+      if (game !== undefined) {
+        navigate(`/gamepage/${game.runner}/${game.app_name}`, {
+          state: { gameInfo: game }
+        })
+      }
     }
   }
 
+  const getGameInfoByAppTitle = (title: string) => {
+    return (
+      getGameInfoByAppTitleAndLibrary(epic.library, title) ||
+      getGameInfoByAppTitleAndLibrary(gog.library, title) ||
+      getGameInfoByAppTitleAndLibrary(sideloadedLibrary, title)
+    )
+  }
+
+  const getGameInfoByAppTitleAndLibrary = (
+    library: GameInfo[],
+    title: string
+  ) => {
+    return library.filter((g: GameInfo) => g.title === title).at(0)
+  }
+
   return (
     <div className="SearchBar" data-testid="searchBar">
       <span className="searchButton" tabIndex={-1}>