From 138339151249ad85bea054f1e809db179ca75a1d Mon Sep 17 00:00:00 2001 From: Daniel O'Connell Date: Sun, 20 Aug 2023 18:03:02 +0200 Subject: [PATCH] Allow initial search in url --- .github/workflows/deploy.yml | 1 + .github/workflows/pr-check.yml | 1 + app/components/search.tsx | 73 ++++++++++++++++++-------------- app/hooks/search.tsx | 0 app/routes/index.tsx | 2 + public/tfWorker.js | 2 +- stampy-search/example/index.html | 4 +- stampy-search/src/search.ts | 54 +++++++++++------------ 8 files changed, 76 insertions(+), 61 deletions(-) delete mode 100644 app/hooks/search.tsx diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml index 850576ab..90a4ee99 100644 --- a/.github/workflows/deploy.yml +++ b/.github/workflows/deploy.yml @@ -26,6 +26,7 @@ jobs: | sed s/{ALLOW_ORIGINS}// \ > wrangler.toml npm ci + npm run build --prefix stampy-search npm run deploy - name: 'Debug: list files in build directory' run: ls -R build public/build diff --git a/.github/workflows/pr-check.yml b/.github/workflows/pr-check.yml index d9e678c8..0505b088 100644 --- a/.github/workflows/pr-check.yml +++ b/.github/workflows/pr-check.yml @@ -12,5 +12,6 @@ jobs: - name: lint run: | npm ci + npm run build --prefix stampy-search npm run lint npm run test diff --git a/app/components/search.tsx b/app/components/search.tsx index 7b4ce175..3e3dd10b 100644 --- a/app/components/search.tsx +++ b/app/components/search.tsx @@ -1,10 +1,6 @@ -import {useState, useEffect, useRef, MutableRefObject, FocusEvent} from 'react' +import {useState, useEffect, useCallback, useRef, MutableRefObject, FocusEvent} from 'react' import debounce from 'lodash/debounce' -import { - Searcher, - Question as QuestionType, - SearchResult, -} from 'stampy-search' +import {Searcher, Question as QuestionType, SearchResult} from 'stampy-search' import {AddQuestion} from '~/routes/questions/add' import {Action, ActionType} from '~/routes/questions/actions' import {MagnifyingGlass, Edit} from '~/components/icons-generated' @@ -32,33 +28,42 @@ export default function Search({ const [arePendingSearches, setPendingSearches] = useState(false) const [results, setResults] = useState([] as SearchResult[]) - const [searcher, setSearcher] = useState() + const [searcher, setSearcher] = useState() - useEffect(() => { - setSearcher(new Searcher({ - getAllQuestions: () => onSiteAnswersRef.current, - })) - }, [onSiteAnswersRef]) + useEffect(() => { + setSearcher( + new Searcher({ + getAllQuestions: () => onSiteAnswersRef.current, + onResolveCallback: (query?: string, res?: SearchResult[] | null) => { + if (res) { + setPendingSearches(false) + setResults(res) + } + }, + }) + ) + }, [onSiteAnswersRef]) - const searchFn = (rawValue: string) => { - const value = rawValue.trim() - if (value === searchInputRef.current) return + const searchFn = useCallback( + (rawValue: string) => { + const value = rawValue.trim() + if (value === searchInputRef.current) return - searchInputRef.current = value + searchInputRef.current = value - setPendingSearches(true) - searcher.searchLive(value).then((res) => { - if (res) { - setPendingSearches(false) - setResults(res as SearchResult[]) - } - }) - logSearch(value) - } + setPendingSearches(true) + searcher && searcher.searchLive(value) + logSearch(value) + }, + [searcher] + ) + // Show the url query if defined useEffect(() => { - initialQuery && searchFn(initialQuery) - }, [initialQuery, searchFn]) + if (initialQuery && searcher) { + initialQuery && searchFn(initialQuery) + } + }, [initialQuery, searcher, searchFn]) const handleChange = debounce(searchFn, 100) @@ -136,12 +141,13 @@ export default function Search({ - {showMore && ( + {showMore && searcher && ( { setShowMore(false) setHide(true) }} + searcher={searcher} question={searchInputRef.current} relatedQuestions={results.map(({title}) => title)} /> @@ -190,22 +196,25 @@ const ShowMoreSuggestions = ({ question, relatedQuestions, onClose, + searcher, }: { question: string relatedQuestions: string[] onClose: (e: unknown) => void + searcher: Searcher }) => { const [extraQuestions, setExtraQuestions] = useState(empty) const [error, setError] = useState() useEffect(() => { - searchUnpublished(question, 5) - .then(setExtraQuestions) - .catch((e) => { + searcher + .searchUnpublished(question, 5) + .then((res: SearchResult[] | null) => res && setExtraQuestions(res)) + .catch((e: any) => { console.error(e) setError(e) }) - }, [question]) + }, [question, searcher]) if (extraQuestions === empty) { return ( diff --git a/app/hooks/search.tsx b/app/hooks/search.tsx deleted file mode 100644 index e69de29b..00000000 diff --git a/app/routes/index.tsx b/app/routes/index.tsx index 0348b400..be52ab47 100644 --- a/app/routes/index.tsx +++ b/app/routes/index.tsx @@ -98,6 +98,7 @@ const Bottom = ({ export default function App() { const minLogo = useOutletContext() + const [remixSearchParams] = useSearchParams() const {initialQuestionsData} = useLoaderData>() const {data: initialQuestions = [], timestamp} = initialQuestionsData ?? {} @@ -183,6 +184,7 @@ export default function App() { onSiteAnswersRef={onSiteAnswersRef} openQuestionTitles={openQuestionTitles} onSelect={selectQuestion} + initialQuery={remixSearchParams.get('query') || ''} /> {/* Add an extra, draggable div here, so that questions can be moved to the top of the list */} diff --git a/public/tfWorker.js b/public/tfWorker.js index eabbb7d2..030ea29d 100644 --- a/public/tfWorker.js +++ b/public/tfWorker.js @@ -23,7 +23,7 @@ use.load().then(function (model) { // successfully loaded model & downloaded encodings isReady = true // warm up model for faster response later - runSemanticSearch('What is AGI Safety?', 1) + runSemanticSearch({query: 'What is AGI Safety?'}, 1) self.postMessage({status: 'ready', numQs: questions.length}) }) }) diff --git a/stampy-search/example/index.html b/stampy-search/example/index.html index da6cc9c1..92b5a370 100644 --- a/stampy-search/example/index.html +++ b/stampy-search/example/index.html @@ -17,7 +17,7 @@