2020-05-22 14:38:19 +02:00
|
|
|
import React, { useState, useEffect, ReactElement } from 'react'
|
2019-10-11 23:50:03 +02:00
|
|
|
import { Helmet } from 'react-helmet'
|
2019-10-02 20:48:59 +02:00
|
|
|
import { CSSTransition } from 'react-transition-group'
|
|
|
|
|
import SearchInput from './SearchInput'
|
|
|
|
|
import SearchButton from './SearchButton'
|
|
|
|
|
import SearchResults from './SearchResults'
|
2021-03-04 01:20:39 +01:00
|
|
|
import styles from './index.module.css'
|
2019-10-02 20:48:59 +02:00
|
|
|
|
2020-05-22 14:38:19 +02:00
|
|
|
export default function Search(): ReactElement {
|
2019-10-02 20:48:59 +02:00
|
|
|
const [searchOpen, setSearchOpen] = useState(false)
|
|
|
|
|
const [query, setQuery] = useState('')
|
|
|
|
|
const [results, setResults] = useState([])
|
|
|
|
|
|
2019-11-23 13:16:39 +01:00
|
|
|
useEffect(() => {
|
|
|
|
|
if (!query || !window.__LUNR__) {
|
|
|
|
|
setResults([])
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const lunrIndex = window.__LUNR__['en']
|
|
|
|
|
const searchResults = lunrIndex.index.search(query)
|
|
|
|
|
setResults(
|
|
|
|
|
searchResults.map(({ ref }) => {
|
|
|
|
|
return lunrIndex.store[ref]
|
|
|
|
|
})
|
|
|
|
|
)
|
|
|
|
|
}, [query])
|
|
|
|
|
|
2019-10-02 20:48:59 +02:00
|
|
|
const toggleSearch = () => {
|
|
|
|
|
setSearchOpen(!searchOpen)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<>
|
|
|
|
|
<SearchButton onClick={toggleSearch} />
|
|
|
|
|
|
|
|
|
|
{searchOpen && (
|
|
|
|
|
<>
|
|
|
|
|
<Helmet>
|
2019-10-03 19:18:01 +02:00
|
|
|
<html className="hasSearchOpen" lang="en" />
|
2019-10-02 20:48:59 +02:00
|
|
|
</Helmet>
|
|
|
|
|
|
|
|
|
|
<CSSTransition
|
|
|
|
|
appear={searchOpen}
|
|
|
|
|
in={searchOpen}
|
|
|
|
|
timeout={200}
|
|
|
|
|
classNames={styles}
|
|
|
|
|
>
|
|
|
|
|
<section className={styles.search}>
|
|
|
|
|
<SearchInput
|
|
|
|
|
value={query}
|
2019-11-23 13:16:39 +01:00
|
|
|
onChange={(e: any) => setQuery(e.target.value)}
|
2019-10-02 20:48:59 +02:00
|
|
|
onToggle={toggleSearch}
|
|
|
|
|
/>
|
|
|
|
|
</section>
|
|
|
|
|
</CSSTransition>
|
|
|
|
|
|
|
|
|
|
<SearchResults
|
|
|
|
|
searchQuery={query}
|
|
|
|
|
results={results}
|
|
|
|
|
toggleSearch={toggleSearch}
|
|
|
|
|
/>
|
|
|
|
|
</>
|
|
|
|
|
)}
|
|
|
|
|
</>
|
|
|
|
|
)
|
|
|
|
|
}
|
