2020-05-22 14:38:19 +02:00
|
|
|
import React, { ReactElement } from 'react'
|
2019-10-02 13:35:50 +02:00
|
|
|
import ReactDOM from 'react-dom'
|
2019-10-02 20:48:59 +02:00
|
|
|
import { graphql, useStaticQuery } from 'gatsby'
|
2019-11-24 14:29:25 +01:00
|
|
|
import PostTeaser from '../PostTeaser'
|
2019-10-02 13:35:50 +02:00
|
|
|
import SearchResultsEmpty from './SearchResultsEmpty'
|
2022-11-11 03:31:54 +01:00
|
|
|
import * as styles from './SearchResults.module.css'
|
2019-10-16 01:45:30 +02:00
|
|
|
|
|
|
|
export interface Results {
|
|
|
|
slug: string
|
|
|
|
}
|
2019-10-02 13:35:50 +02:00
|
|
|
|
|
|
|
const query = graphql`
|
2022-11-11 03:31:54 +01:00
|
|
|
query SearchResults {
|
2019-10-02 13:35:50 +02:00
|
|
|
allMarkdownRemark {
|
|
|
|
edges {
|
|
|
|
node {
|
2019-11-24 14:29:25 +01:00
|
|
|
...PostTeaser
|
2019-10-02 13:35:50 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
`
|
|
|
|
|
2019-10-16 01:45:30 +02:00
|
|
|
function SearchResultsPure({
|
2019-10-02 13:35:50 +02:00
|
|
|
searchQuery,
|
|
|
|
results,
|
2019-10-16 01:45:30 +02:00
|
|
|
toggleSearch,
|
|
|
|
posts
|
2019-10-02 13:35:50 +02:00
|
|
|
}: {
|
2022-11-11 03:31:54 +01:00
|
|
|
posts: Queries.SearchResultsQuery['allMarkdownRemark']['edges']
|
2019-10-02 13:35:50 +02:00
|
|
|
searchQuery: string
|
2019-10-16 01:45:30 +02:00
|
|
|
results: Results[]
|
2019-10-02 13:35:50 +02:00
|
|
|
toggleSearch(): void
|
|
|
|
}) {
|
2019-10-16 01:45:30 +02:00
|
|
|
return (
|
2022-11-11 03:31:54 +01:00
|
|
|
<div className={styles.searchResults}>
|
2021-03-07 02:48:05 +01:00
|
|
|
{results.length > 0 ? (
|
2022-11-11 03:31:54 +01:00
|
|
|
<ul className={styles.results}>
|
2021-03-07 02:48:05 +01:00
|
|
|
{results.map((page: { slug: string }) =>
|
|
|
|
posts
|
2022-11-11 03:31:54 +01:00
|
|
|
.filter(({ node }) => node.fields.slug === page.slug)
|
|
|
|
.map(({ node }) => (
|
2021-03-07 02:48:05 +01:00
|
|
|
<li key={page.slug}>
|
|
|
|
<PostTeaser post={node} toggleSearch={toggleSearch} />
|
|
|
|
</li>
|
|
|
|
))
|
|
|
|
)}
|
|
|
|
</ul>
|
|
|
|
) : (
|
|
|
|
<SearchResultsEmpty searchQuery={searchQuery} results={results} />
|
|
|
|
)}
|
2019-10-16 01:45:30 +02:00
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
export default function SearchResults({
|
|
|
|
searchQuery,
|
|
|
|
results,
|
|
|
|
toggleSearch
|
|
|
|
}: {
|
|
|
|
searchQuery: string
|
|
|
|
results: Results[]
|
|
|
|
toggleSearch(): void
|
2020-05-22 14:38:19 +02:00
|
|
|
}): ReactElement {
|
2022-11-11 03:31:54 +01:00
|
|
|
const data = useStaticQuery<Queries.SearchResultsQuery>(query)
|
2019-10-16 01:45:30 +02:00
|
|
|
const posts = data.allMarkdownRemark.edges
|
|
|
|
|
|
|
|
// creating portal to break out of DOM node we're in
|
|
|
|
// and render the results in content container
|
|
|
|
return ReactDOM.createPortal(
|
|
|
|
<SearchResultsPure
|
|
|
|
posts={posts}
|
|
|
|
results={results}
|
|
|
|
searchQuery={searchQuery}
|
|
|
|
toggleSearch={toggleSearch}
|
|
|
|
/>,
|
2019-10-02 20:48:59 +02:00
|
|
|
document.getElementById('document')
|
2019-10-02 13:35:50 +02:00
|
|
|
)
|
|
|
|
}
|