Extract search

.github/workflows/deploy.yml

@@ -23,8 +23,10 @@ jobs:
             | sed s/{CODA_TOKEN}/${{ secrets.CODA_TOKEN }}/ \
             | sed s/{CODA_INCOMING_TOKEN}/${{ secrets.CODA_INCOMING_TOKEN }}/ \
             | sed s/{CODA_WRITES_TOKEN}/${{ secrets.CODA_WRITES_TOKEN }}/ \
+            | 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

.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

.gitignore

@@ -9,3 +9,6 @@ node_modules
 
 .DS_store
 wrangler.toml
+
+stampy-search/dist
+stampy-search/example/stampySearch.min.js

app/components/search.tsx

@@ -1,36 +1,69 @@
-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 {AddQuestion} from '~/routes/questions/add'
 import {Action, ActionType} from '~/routes/questions/actions'
 import {MagnifyingGlass, Edit} from '~/components/icons-generated'
-import {useSearch, Question as QuestionType, SearchResult} from '~/hooks/search'
 import AutoHeight from 'react-auto-height'
 import Dialog from '~/components/dialog'
 
 type Props = {
   onSiteAnswersRef: MutableRefObject<QuestionType[]>
+  initialQuery?: string
   openQuestionTitles: string[]
   onSelect: (pageid: string, title: string) => void
 }
 
 const empty: [] = []
 
-export default function Search({onSiteAnswersRef, openQuestionTitles, onSelect}: Props) {
-  const [showResults, setShowResults] = useState(false)
+export default function Search({
+  onSiteAnswersRef,
+  initialQuery,
+  openQuestionTitles,
+  onSelect,
+}: Props) {
+  const [showResults, setShowResults] = useState(initialQuery !== undefined)
   const [showMore, setShowMore] = useState(false)
   const searchInputRef = useRef('')
 
-  const {search, arePendingSearches, results} = useSearch(onSiteAnswersRef)
+  const [arePendingSearches, setPendingSearches] = useState(false)
+  const [results, setResults] = useState([] as SearchResult[])
+  const [searcher, setSearcher] = useState<Searcher>()
+
+  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
 
-    search(value)
-    logSearch(value)
-  }
+      setPendingSearches(true)
+      searcher && searcher.searchLive(value)
+      logSearch(value)
+    },
+    [searcher]
+  )
+
+  // Show the url query if defined
+  useEffect(() => {
+    if (initialQuery && searcher) {
+      initialQuery && searchFn(initialQuery)
+    }
+  }, [initialQuery, searcher, searchFn])
 
   const handleChange = debounce(searchFn, 100)
 
@@ -63,6 +96,7 @@ export default function Search({onSiteAnswersRef, openQuestionTitles, onSelect}:
             name="searchbar"
             placeholder="Search for more questions here..."
             autoComplete="off"
+            defaultValue={searchInputRef.current}
             onChange={(e) => handleChange(e.currentTarget.value)}
             onKeyDown={(e) => e.key === 'Enter' && searchFn(e.currentTarget.value)}
           />
@@ -107,12 +141,13 @@ export default function Search({onSiteAnswersRef, openQuestionTitles, onSelect}:
           </div>
         </AutoHeight>
       </div>
-      {showMore && (
+      {showMore && searcher && (
         <ShowMoreSuggestions
           onClose={() => {
             setShowMore(false)
             setHide(true)
           }}
+          searcher={searcher}
           question={searchInputRef.current}
           relatedQuestions={results.map(({title}) => title)}
         />
@@ -161,33 +196,25 @@ const ShowMoreSuggestions = ({
   question,
   relatedQuestions,
   onClose,
+  searcher,
 }: {
   question: string
   relatedQuestions: string[]
   onClose: (e: unknown) => void
+  searcher: Searcher
 }) => {
   const [extraQuestions, setExtraQuestions] = useState<SearchResult[]>(empty)
   const [error, setError] = useState<string>()
 
   useEffect(() => {
-    const getResults = async (question: string) => {
-      try {
-        const result = await fetch(`/questions/search?question=${encodeURIComponent(question)}`)
-
-        if (result.status == 200) {
-          const questions = await result.json()
-          setExtraQuestions(questions) // don't set on API errors
-        } else {
-          console.error(await result.text())
-          setError('Error while searching for similar questions')
-        }
-      } catch (e) {
+    searcher
+      .searchUnpublished(question, 5)
+      .then((res: SearchResult[] | null) => res && setExtraQuestions(res))
+      .catch((e: any) => {
         console.error(e)
-        setError(e instanceof Error ? e.message : '')
-      }
-    }
-    getResults(question)
-  }, [question])
+        setError(e)
+      })
+  }, [question, searcher])
 
   if (extraQuestions === empty) {
     return (

app/routes/index.tsx

@@ -98,6 +98,7 @@ const Bottom = ({
 
 export default function App() {
   const minLogo = useOutletContext<boolean>()
+  const [remixSearchParams] = useSearchParams()
   const {initialQuestionsData} = useLoaderData<ReturnType<typeof loader>>()
   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 */}

app/routes/questions/search.tsx

@@ -5,15 +5,16 @@ export const loader = async ({request}: LoaderArgs) => {
   const url = new URL(request.url)
   const question = url.searchParams.get('question')
   const onlyLive = url.searchParams.get('onlyLive') == 'true'
+  const numResults = parseInt(url.searchParams.get('numResults') || '5', 10)
 
   if (!question) return []
 
-  const results = await search(question, onlyLive)
+  const results = await search(question, onlyLive, numResults)
   return jsonCORS(results)
 }
 
-export function search(question: string, onlyLive: boolean) {
-  const url = `${NLP_SEARCH_ENDPOINT}/api/search?query=${question}&top=5&showLive=${
+export function search(question: string, onlyLive: boolean, numResults = 5) {
+  const url = `${NLP_SEARCH_ENDPOINT}/api/search?query=${question}&top=${numResults}&showLive=${
     onlyLive ? 1 : 0
   }`
   return fetch(url).then(async (response) => {