Function SearchBox

next/components/SearchBox/index.tsx:45–105

()

const optionsFilter: OptionsFilter = ({ options }) => options

export default function SearchBox() {
  const router = useRouter()
  const params = useParams()
  const searchString = searchStringFromParams(params)

  const [currentTerm, setCurrentTerm] = useState('')
  const [debouncedSearchValue] = useDebounce(currentTerm, 300)
  const { data } = useSuspenseQuery(query, {
    variables: {
      repoIds: [],
      searchString,
      topicSynonymSearchString: debouncedSearchValue,
      viewerId: '',
    },
  })
  const { view: { queryInfo } } = data
  const [searchTerms, setSearchTerms] = useState<string[]>(termsFromQueryInfo(queryInfo))

  const synonyms = data.view?.topicLiveSearch?.synonyms || []
  const options: ComboboxItem[] = []
  const seen = new Set()
  const newQueryInfo: Map<string, string> = new Map()

  synonyms.forEach(({ displayName, id }) => {
    if (!seen.has(id)) {
      seen.add(id)
      options.push({ value: id, label: displayName })
      newQueryInfo.set(displayName, id)
    }
  })

  const searchTermsUpdated = useCallback(async (newSearchTerms: string[]) => {
    setSearchTerms(newSearchTerms)

    // Allow the search box to be cleared without having side effects
    if (newSearchTerms.length > 0) {
      const path = buildPath(newSearchTerms, queryInfo, newQueryInfo)
      router.push(path)
    }
  }, [setSearchTerms, queryInfo, params, searchStringFromParams])

  return (
    <FocusTrap>
      <TagsInput
        allowDuplicates
        clearable
        data={options}
        disabled={false}
        filter={optionsFilter}
        leftSection={icon}
        onChange={searchTermsUpdated}
        onSearchChange={setCurrentTerm}
        placeholder="Search"
        radius="xl"
        searchValue={currentTerm}
        size="lg"
        value={searchTerms}
      />