diff --git a/src/App.tsx b/src/App.tsx index 8347939..fb29705 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -5,6 +5,7 @@ import * as R from 'ramda'; import {useQuery} from "@tanstack/react-query"; import {LinkCollection, Option} from "./aliases"; +import AsyncSelect from "react-select/async"; // TODO: Fix this for wrapping items, esp on phones const height = 35; @@ -62,26 +63,85 @@ function NaiveSelect({setSelected}: { navigator.clipboard.writeText(`[[${value.label}]]`) }, []); - return ( - 'select-input-wrapper'}} + onChange={onChange as any} + components={{MenuList}} + isDisabled={isLoading} + isLoading={isLoading} + isClearable={true} + options={options} + filterOption={createFilter({ignoreAccents: false})} + />) } -export function LargeSelect() { +type ResultNoteApi = { + score: number + vault: string + path: string + basename: string + foundWords: string[] + matches: SearchMatchApi[] +} + +type SearchMatchApi = { + match: string + offset: number +} + +export function OmnisearchSelect({ setSelected }: { setSelected: (value: Option) => void }) { + const { + data: metadata, + isLoading, + } = useQuery({ + queryKey: ['obsidian-metadata'], + initialData: [], + queryFn: async () => { + const response = await fetch("/metadata") + const fullData: any[] = await response.json(); + + return R.sortBy(v => -(v.data.backlinks?.length ?? 0), fullData.map(md => ({ + value: md.relativePath, + label: md.fileName, + data: md, + }) as Option)); + }, + }); + + const onChange = useCallback((value: Option) => { + setSelected(value); + navigator.clipboard.writeText(`[[${value.label}]]`) + }, []); + + return { + const response = await fetch(`/search?q=${encodeURIComponent(inputValue)}`) + const fullData: ResultNoteApi[] = await response.json(); + + return fullData.map(item => ({ + value: item.path, + label: item.basename, + data: metadata!.find(md => md.value == item.path)!.data + } satisfies Option)) + }} + onChange={onChange as any} + components={{MenuList}} + isClearable={true} + filterOption={(option, inputValue) => { + console.log(option, inputValue); + return true; + }} + /> +} + +export function App() { const [selected, setSelected] = useState