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

Use typeahead search

Browse Source
This commit is contained in:
Jackson Harper
2022-07-12 10:36:09 -07:00
parent 7c8fe4ba39
commit 91bb08ea5f
3 changed files with 33 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
packages/web/components/elements/KBar.tsx
View File

@ -14,13 +14,14 @@ export const searchStyle = {
}
export const animatorStyle = {
maxWidth: '600px',
width: '100%',
backgroundColor: theme.colors.grayBase.toString(),
color: theme.colors.grayTextContrast.toString(),
borderRadius: '8px',
overflow: 'hidden',
boxShadow: '0px 6px 20px rgba(0, 0, 0, 0.2)',
maxWidth: '600px',
borderRadius: '8px',
color: theme.colors.grayTextContrast.toString(),
backgroundColor: theme.colors.grayBase.toString(),
boxShadow: theme.shadows.cardBoxShadow.toString(),
border: `1px solid ${theme.colors.grayBorder.toString()}`,
}
const groupNameStyle = {

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

@ -47,6 +47,7 @@ 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'
export type LayoutType = 'LIST_LAYOUT' | 'GRID_LAYOUT'
@ -66,7 +67,7 @@ const SAVED_SEARCHES: Record<string, string> = {
const fetchSearchResults = async (query: string, cb: any) => {
if (!query.startsWith('#')) return
const res = await searchQuery({ limit: 10, searchQuery: query.substring(1)})
const res = await typeaheadSearchQuery({ limit: 10, searchQuery: query.substring(1)})
cb(res);
};
@ -80,7 +81,7 @@ export function HomeFeedContainer(): JSX.Element {
const { viewerData } = useGetViewerQuery()
const router = useRouter()
const { queryValue } = useKBar((state) => ({queryValue: state.searchQuery}));
const [searchResults, setSearchResults] = useState<LibraryItem[]>([]);
const [searchResults, setSearchResults] = useState<SearchItem[]>([]);
const defaultQuery = {
limit: 10,
@ -121,8 +122,8 @@ export function HomeFeedContainer(): JSX.Element {
useEffect(() => {
if (queryValue.startsWith('#')) {
debouncedFetchSearchResults(queryValue, (data: LibraryItemsData) => {
setSearchResults(data?.search.edges || [])
debouncedFetchSearchResults(queryValue, (data: TypeaheadSearchItemsData) => {
setSearchResults(data?.typeaheadSearch.items || [])
})
}
else setSearchResults([])
@ -506,11 +507,17 @@ export function HomeFeedContainer(): JSX.Element {
]
useRegisterActions(searchResults.map(link => ({
id: link.node.id,
id: link.id,
section: 'Search Results',
name: link.node.title,
keywords: '#' + link.node.title,
perform: () => handleCardAction('showDetail', link),
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(activeCardId ? [...ACTIVE_ACTIONS, ...UNACTIVE_ACTIONS] : UNACTIVE_ACTIONS, [activeCardId, activeItem]);

12
yarn.lock
View File

@ -7678,6 +7678,13 @@
dependencies:
"@types/node" "*"
"@types/graphql-fields@^1.3.4":
version "1.3.4"
resolved "https://registry.yarnpkg.com/@types/graphql-fields/-/graphql-fields-1.3.4.tgz#868ffe444ba8027ea1eccb0909f9c331d1bd620a"
integrity sha512-McLJaAaqY7lk9d9y7E61iQrj0AwcEjSb8uHlPh7KgYV+XX1MSLlSt/alhd5k2BPRE8gy/f4lnkLGb5ke3iG66Q==
dependencies:
graphql "^15.3.0"
"@types/hast@^2.0.0":
version "2.3.4"
resolved "https://registry.yarnpkg.com/@types/hast/-/hast-2.3.4.tgz#8aa5ef92c117d20d974a82bdfb6a648b08c0bafc"
@ -14649,6 +14656,11 @@ graphql-config@^4.1.0:
minimatch "3.0.4"
string-env-interpolation "1.0.1"
graphql-fields@^2.0.3:
version "2.0.3"
resolved "https://registry.yarnpkg.com/graphql-fields/-/graphql-fields-2.0.3.tgz#5e68dff7afbb202be4f4f40623e983b22c96ab8f"
integrity sha512-x3VE5lUcR4XCOxPIqaO4CE+bTK8u6gVouOdpQX9+EKHr+scqtK5Pp/l8nIGqIpN1TUlkKE6jDCCycm/WtLRAwA==
graphql-middleware@^6.0.10:
version "6.1.4"
resolved "https://registry.yarnpkg.com/graphql-middleware/-/graphql-middleware-6.1.4.tgz#1b4dd66195477046282acc8937cb5fca32b6bfd5"