docs/src/search/components/results/index.tsx at 80920350b3ee9b76b30e3ebbc65be028332db849 · github/docs · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
import Head from 'next/head'
import { Heading } from '@primer/react'

import { useTranslation } from '@/languages/components/useTranslation'
import { DEFAULT_VERSION, useVersion } from '@/versions/components/useVersion'
import { useNumberFormatter } from '@/search/components/hooks/useNumberFormatter'
import { SearchResults } from '@/search/components/results/SearchResults'
import { NoQuery } from '@/search/components/results/NoQuery'
import { useMainContext } from '@/frame/components/context/MainContext'
import { ValidationErrors } from '@/search/components/results/ValidationErrors'
import { useSearchContext } from '@/search/components/context/SearchContext'
import type { estypes } from '@elastic/elasticsearch'

export function Search() {
  const { search } = useSearchContext()

  const { formatInteger } = useNumberFormatter()
  const { t } = useTranslation('search_results')
  const { currentVersion } = useVersion()

  const { query } = search.searchParams

  // A reference to the `content/search/index.md` Page object.
  // Not to be confused with the "page" that is for paginating
  // results.
  const { allVersions, page: documentPage } = useMainContext()
  const searchVersion = allVersions[currentVersion].versionTitle

  const { results, validationErrors } = search
  const hasQuery = Boolean((query && query.trim()) || '')

  // Mostly to satisfy TypeScript because the useMainContext hook
  // is run on every request and every request doesn't have a page.
  let pageTitle = documentPage?.fullTitle || 'Search'
  if (hasQuery) {
    pageTitle = `${t('search_results_for')} "${query.trim()}"`
    if (currentVersion !== DEFAULT_VERSION) {
      pageTitle += ` (${searchVersion})`
    }
    if (results) {
      pageTitle = `${formatInteger((results.meta.found as estypes.SearchTotalHits).value)} ${pageTitle}`
    }
  }

  return (
    <div className="container-xl px-3 px-md-6 my-4" data-testid="search-results">
      <Head>
        <title>{pageTitle}</title>
      </Head>
      {hasQuery && (
        <Heading as="h1" className="mb-2">
          {pageTitle}
        </Heading>
      )}

      {/* Not having a query is actually a validation error.
        But it's a bit harsh to call it an "error".
        Simply going to "/en/search" shouldn't show an error message.
        It should be a "no query" message, which is a bit more "gentle".
         */}
      {!hasQuery ? (
        <NoQuery />
      ) : validationErrors.length > 0 ? (
        <ValidationErrors errors={validationErrors} />
      ) : null}

      {results ? <SearchResults results={results} searchParams={search.searchParams} /> : null}
    </div>
  )
}