Benature/omnivore
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix some typeahead search on siteName not working by adding siteName to the keywords list in kbar

Browse Source
This commit is contained in:
Hongbo Wu
2022-07-14 11:27:10 +08:00
parent 0b21990d14
commit 6f5e49ece7
1 changed files with 66 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
View File

@ -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}
/>