100 lines
2.4 KiB
TypeScript
100 lines
2.4 KiB
TypeScript
import { Link, graphql, useStaticQuery, PageProps } from 'gatsby'
|
||
import * as React from 'react'
|
||
import { useFlexSearch } from 'react-use-flexsearch'
|
||
|
||
import Layout from '../components/layout'
|
||
import Seo from '../components/seo'
|
||
|
||
import { Section } from '../components/shared'
|
||
import {
|
||
SectionHeading,
|
||
SectionDesc,
|
||
SolidButton
|
||
} from '../components/shared/styledComponents'
|
||
|
||
import Post from './postpreview'
|
||
import { SideBar } from './sidebar'
|
||
|
||
import type { PageContext, PostNode, SearchPost } from '../types'
|
||
|
||
interface SearchData {
|
||
localSearchBlog: {
|
||
index: string
|
||
store: Record<string, unknown>
|
||
}
|
||
}
|
||
|
||
const BlogSearchTemplate: React.FC<PageProps<SearchData, PageContext>> = ({
|
||
location,
|
||
pageContext
|
||
}) => {
|
||
const queryData = useStaticQuery(graphql`
|
||
query {
|
||
localSearchBlog {
|
||
index
|
||
store
|
||
}
|
||
}
|
||
`)
|
||
|
||
const params = new URLSearchParams(location.search.substring(1))
|
||
const query = params.get('s')
|
||
|
||
const posts = useFlexSearch(
|
||
query,
|
||
queryData.localSearchBlog.index,
|
||
queryData.localSearchBlog.store
|
||
) as SearchPost[]
|
||
const postsJSX: React.ReactElement[] = []
|
||
|
||
if (query) {
|
||
posts.forEach((post, i) => {
|
||
const _post: PostNode = {
|
||
id: post.id,
|
||
html: post.html,
|
||
fields: {
|
||
slug: post.slug
|
||
},
|
||
frontmatter: {
|
||
title: post.title,
|
||
date: post.date,
|
||
previewImg: post.previewImg as PostNode['frontmatter']['previewImg']
|
||
}
|
||
}
|
||
|
||
postsJSX.push(<Post key={i} post={_post} />)
|
||
})
|
||
}
|
||
return (
|
||
<Layout
|
||
location={location}
|
||
heading="Data Controller’s Knowledge Base"
|
||
desc="A section dedicated to news, updates and educational pieces."
|
||
>
|
||
<Section color="black" bgColor="white" bottomArrow={false}>
|
||
<div className="row">
|
||
<div className="col-md-7">
|
||
<div className="row">
|
||
{query ? (
|
||
<h1>
|
||
{postsJSX.length} results found related to "{query}"
|
||
</h1>
|
||
) : (
|
||
<h1>No Query Entered</h1>
|
||
)}
|
||
{postsJSX}
|
||
</div>
|
||
</div>
|
||
<div className="col-md-5">
|
||
<SideBar pageContext={pageContext} location={location} />
|
||
</div>
|
||
</div>
|
||
</Section>
|
||
</Layout>
|
||
)
|
||
}
|
||
|
||
export default BlogSearchTemplate
|
||
|
||
export const Head = () => <Seo title="Blog" />
|