From 6f5e49ece7c4b0ca8aea5df9c1931c676d983726 Mon Sep 17 00:00:00 2001
From: Hongbo Wu <hongbo@omnivore.app>
Date: Thu, 14 Jul 2022 11:27:10 +0800
Subject: [PATCH] fix some typeahead search on siteName not working by adding
 siteName to the keywords list in kbar

---
 .../templates/homeFeed/HomeFeedContainer.tsx  | 117 ++++++++++--------
 1 file changed, 66 insertions(+), 51 deletions(-)

diff --git a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
index ec73a6477..5d9610987 100644
--- a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
+++ b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
@@ -1,7 +1,6 @@
 import { Box, HStack, VStack } from './../../elements/LayoutPrimitives'
 import type {
   LibraryItem,
-  LibraryItemsData,
   LibraryItemsQueryInput,
 } from '../../../lib/networking/queries/useGetLibraryItemsQuery'
 import { useGetLibraryItemsQuery } from '../../../lib/networking/queries/useGetLibraryItemsQuery'
@@ -39,15 +38,18 @@ import { Label } from '../../../lib/networking/fragments/labelFragment'
 import { EmptyLibrary } from './EmptyLibrary'
 import TopBarProgress from 'react-topbar-progress-indicator'
 import {
-  State,
   PageType,
+  State,
 } from '../../../lib/networking/fragments/articleFragment'
-import { useRegisterActions, createAction, useKBar, Action } from 'kbar'
+import { Action, createAction, useKBar, useRegisterActions } from 'kbar'
 import { EditTitleModal } from './EditTitleModal'
 import { useGetUserPreferences } from '../../../lib/networking/queries/useGetUserPreferences'
-import { searchQuery } from '../../../lib/networking/queries/search'
 import debounce from 'lodash/debounce'
-import { SearchItem, TypeaheadSearchItemsData, typeaheadSearchQuery } from '../../../lib/networking/queries/typeaheadSearch'
+import {
+  SearchItem,
+  TypeaheadSearchItemsData,
+  typeaheadSearchQuery,
+} from '../../../lib/networking/queries/typeaheadSearch'
 
 export type LayoutType = 'LIST_LAYOUT' | 'GRID_LAYOUT'
 
@@ -67,21 +69,24 @@ const SAVED_SEARCHES: Record<string, string> = {
 
 const fetchSearchResults = async (query: string, cb: any) => {
   if (!query.startsWith('#')) return
-  const res = await typeaheadSearchQuery({ limit: 10, searchQuery: query.substring(1)})
-  cb(res);
-};
+  const res = await typeaheadSearchQuery({
+    limit: 10,
+    searchQuery: query.substring(1),
+  })
+  cb(res)
+}
 
 const debouncedFetchSearchResults = debounce((query, cb) => {
-  fetchSearchResults(query, cb);
-}, 300);
+  fetchSearchResults(query, cb)
+}, 300)
 
 export function HomeFeedContainer(): JSX.Element {
   useGetUserPreferences()
 
   const { viewerData } = useGetViewerQuery()
   const router = useRouter()
-  const { queryValue } = useKBar((state) => ({queryValue: state.searchQuery}));
-  const [searchResults, setSearchResults] = useState<SearchItem[]>([]);
+  const { queryValue } = useKBar((state) => ({ queryValue: state.searchQuery }))
+  const [searchResults, setSearchResults] = useState<SearchItem[]>([])
 
   const defaultQuery = {
     limit: 10,
@@ -118,16 +123,17 @@ export function HomeFeedContainer(): JSX.Element {
   )
 
   const { itemsPages, size, setSize, isValidating, performActionOnItem } =
-  useGetLibraryItemsQuery(queryInputs)
+    useGetLibraryItemsQuery(queryInputs)
 
   useEffect(() => {
     if (queryValue.startsWith('#')) {
-      debouncedFetchSearchResults(queryValue, (data: TypeaheadSearchItemsData) => {
-        setSearchResults(data?.typeaheadSearch.items || [])
-      })
-    }
-    else setSearchResults([])
-
+      debouncedFetchSearchResults(
+        queryValue,
+        (data: TypeaheadSearchItemsData) => {
+          setSearchResults(data?.typeaheadSearch.items || [])
+        }
+      )
+    } else setSearchResults([])
   }, [queryValue])
 
   useEffect(() => {
@@ -217,9 +223,7 @@ export function HomeFeedContainer(): JSX.Element {
         const target = document.getElementById(id)
         if (target) {
           try {
-            if (
-              !isVisible(target)
-            ) {
+            if (!isVisible(target)) {
               target.scrollIntoView({
                 block: 'center',
                 behavior: isSmouth ? 'smooth' : 'auto',
@@ -449,19 +453,19 @@ export function HomeFeedContainer(): JSX.Element {
     })
   )
 
-  const ARCHIVE_ACTION = !activeItem?.node.isArchived ?
-    createAction({
-      section: 'Library',
-      name: 'Archive selected item',
-      shortcut: ['e'],
-      perform: () => handleCardAction('archive', activeItem),
-    }) :
-    createAction({
-      section: 'Library',
-      name: 'UnArchive selected item',
-      shortcut: ['e'],
-      perform: () => handleCardAction('unarchive', activeItem),
-    })
+  const ARCHIVE_ACTION = !activeItem?.node.isArchived
+    ? createAction({
+        section: 'Library',
+        name: 'Archive selected item',
+        shortcut: ['e'],
+        perform: () => handleCardAction('archive', activeItem),
+      })
+    : createAction({
+        section: 'Library',
+        name: 'UnArchive selected item',
+        shortcut: ['e'],
+        perform: () => handleCardAction('unarchive', activeItem),
+      })
 
   const ACTIVE_ACTIONS = [
     ARCHIVE_ACTION,
@@ -506,21 +510,27 @@ export function HomeFeedContainer(): JSX.Element {
     // }),
   ]
 
-  useRegisterActions(searchResults.map(link => ({
-    id: link.id,
-    section: 'Search Results',
-    name: link.title,
-    keywords: '#' + link.title,
-    perform: () => {
-      const username = viewerData?.me?.profile.username
-      if (username) {
-        setActiveCardId(link.id)
-        router.push(`/${username}/${link.slug}`)
-      }
-    },
-  })), [searchResults])
+  useRegisterActions(
+    searchResults.map((link) => ({
+      id: link.id,
+      section: 'Search Results',
+      name: link.title,
+      keywords: '#' + link.title + ' #' + link.siteName,
+      perform: () => {
+        const username = viewerData?.me?.profile.username
+        if (username) {
+          setActiveCardId(link.id)
+          router.push(`/${username}/${link.slug}`)
+        }
+      },
+    })),
+    [searchResults]
+  )
 
-  useRegisterActions(activeCardId ? [...ACTIVE_ACTIONS, ...UNACTIVE_ACTIONS] : UNACTIVE_ACTIONS, [activeCardId, activeItem]);
+  useRegisterActions(
+    activeCardId ? [...ACTIVE_ACTIONS, ...UNACTIVE_ACTIONS] : UNACTIVE_ACTIONS,
+    [activeCardId, activeItem]
+  )
   useFetchMore(handleFetchMore)
 
   return (
@@ -600,7 +610,10 @@ type HomeFeedContentProps = {
 
 function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
   const { viewerData } = useGetViewerQuery()
-  const [layout, setLayout] = usePersistedState<LayoutType>({ key: 'libraryLayout', initialValue: 'GRID_LAYOUT' })
+  const [layout, setLayout] = usePersistedState<LayoutType>({
+    key: 'libraryLayout',
+    initialValue: 'GRID_LAYOUT',
+  })
   const [showRemoveLinkConfirmation, setShowRemoveLinkConfirmation] =
     useState(false)
   const [linkToRemove, setLinkToRemove] = useState<LibraryItem>()
@@ -861,7 +874,9 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
       )}
       {props.showEditTitleModal && (
         <EditTitleModal
-          updateItem={(item: LibraryItem) => props.actionHandler('update-item', item)}
+          updateItem={(item: LibraryItem) =>
+            props.actionHandler('update-item', item)
+          }
           onOpenChange={() => props.setShowEditTitleModal(false)}
           item={linkToEdit as LibraryItem}
         />