feat: implemented Fuse.js to search by quest name and game title.

Author: biliesilva

src/frontend/screens/Quests/index.tsx

@@ -12,6 +12,7 @@ import { Quest } from '@hyperplay/utils'
 import { QuestRewardClaimedToast } from 'frontend/components/UI/QuestRewardClaimedToast'
 import useGetHyperPlayListings from 'frontend/hooks/useGetHyperPlayListings'
 import useGetQuests from 'frontend/hooks/useGetQuests'
+import Fuse from 'fuse.js'
 import {
   Alert,
   Background,
@@ -41,6 +42,15 @@ export function QuestsPage() {
   const [searchText, setSearchText] = useState(searchParam ?? '')
   const [activeFilter, setActiveFilter] = useState<QuestFilter>('all')
 
+  interface FuseResult<T> {
+    id: number
+    project_id: string
+    name: string
+    title: string
+    item: T
+    refIndex: number
+  }
+
   useEffect(() => {
     window.api.trackScreen('Quests Page')
   }, [])
@@ -117,63 +127,100 @@ export function QuestsPage() {
       )
     }
   })
+  //Search Quest
+  const fuseOptions = {
+    keys: ['name', 'title'],
+    threshold: 0.2
+  }
+
+  const questsWithGameNames =
+    quests?.map((quest) => {
+      const gameName = listings?.[quest.project_id]?.project_meta?.name ?? ''
+      return {
+        ...quest,
+        title: gameName,
+        name: quest.name
+      }
+    }) ?? []
 
-  const gameTitleMatches = (quest: Quest) => {
-    const title = listings ? listings[quest.project_id]?.project_meta?.name : ''
-    return title?.toLowerCase().startsWith(searchText.toLowerCase())
+  const fuse = new Fuse(questsWithGameNames ?? [], fuseOptions)
+  const searchFilteredQuests = searchText
+    ? (fuse.search(searchText) as FuseResult<Quest>[])
+    : quests?.map((quest) => ({
+        id: quest.id,
+        project_id: quest.project_id,
+        name: quest.name,
+        title: listings?.[quest.project_id]?.project_meta?.name ?? '',
+        item: quest,
+        refIndex: 0
+      })) ?? []
+
+  const searchQuests = (quests: Quest[], query: string) => {
+    if (!query) return quests
+    const results = fuse.search(query)
+    return results.map((result) => result.item)
   }
 
-  const searchFilteredQuests = quests?.filter((quest) => {
-    const questTitleMatch = quest.name
-      .toLowerCase()
-      .startsWith(searchText.toLowerCase())
-    const gameTitleMatch = gameTitleMatches(quest)
-    const searchByKeywords = searchText
-      .toLowerCase()
-      .split(' ')
-      .some(
-        (term) =>
-          quest.name?.toLowerCase().includes(term) ||
-          quest.description?.toLowerCase().includes(term)
+  const filteredQuests = searchQuests(quests ?? [], searchText)
+
+  useEffect(() => {
+    if (filteredQuests.length > 0) {
+      const currentQuestExists = filteredQuests.find(
+        (quest) => quest.id === selectedQuestId
       )
-    return questTitleMatch || gameTitleMatch || searchByKeywords
-  })
+      if (!currentQuestExists) {
+        const firstQuest = filteredQuests[0]
+        if (firstQuest) {
+          const searchParams = new URLSearchParams(window.location.search)
+          const newUrl = `/quests/${firstQuest.id}${
+            searchParams.toString() ? `?${searchParams.toString()}` : ''
+          }#card-${firstQuest.id}`
+          navigate(newUrl)
+        }
+      }
+    }
+  }, [filteredQuests, navigate, selectedQuestId])
 
-  const initialQuestId = searchFilteredQuests?.[0]?.id ?? null
+  const initialQuestId = searchFilteredQuests?.[0]?.item?.id ?? null
   const visibleQuestId = selectedQuestId ?? initialQuestId
 
   const imagesToPreload: string[] = []
   const gameElements =
-    searchFilteredQuests?.map(({ id, project_id, name, ...rest }) => {
+    searchFilteredQuests?.map((result: FuseResult<Quest>) => {
       const imageUrl = listings
-        ? listings[project_id]?.project_meta?.main_capsule
+        ? listings[result.item.project_id]?.project_meta?.main_capsule
         : ''
       if (imageUrl) {
         imagesToPreload.push(imageUrl)
       }
-      const title = listings ? listings[project_id]?.project_meta?.name : ''
+      const title = listings
+        ? listings[result.item.project_id]?.project_meta?.name
+        : ''
       return (
         <QuestCard
-          key={id}
+          key={result.item.id}
           image={imageUrl ?? ''}
           title={title}
-          {...rest}
           onClick={() => {
-            if (selectedQuestId !== id) {
-              navigate(`/quests/${id}`)
+            if (selectedQuestId !== result.item.id) {
+              navigate(`/quests/${result.item.id}`)
             }
           }}
-          selected={id === visibleQuestId}
-          description={name}
-          className={id === visibleQuestId ? 'gradientBorder' : undefined}
+          selected={result.item.id === visibleQuestId}
+          description={result.item.name}
+          className={
+            result.item.id === visibleQuestId ? 'gradientBorder' : undefined
+          }
         />
       )
     }) ?? []
 
   let suggestedSearchTitles = undefined
-
   if (searchText) {
-    suggestedSearchTitles = searchFilteredQuests?.map((val) => val.name)
+    suggestedSearchTitles = searchFilteredQuests?.map((val) => {
+      const gameName = listings?.[val.item.project_id]?.project_meta?.name ?? ''
+      return `${val.item.name} (${gameName})`
+    })
   }
 
   return (