feat: implement post search; refs #137

src/components/Article/Article.Blocks.tsx

@@ -1,6 +1,7 @@
 import { useArticleContainerContext } from '@/containers/ArticleContainer.Context'
 import { useIntersectionObserver } from '@/utils/ui.utils'
 import { useMemo } from 'react'
+import { usePostSearch } from '../../containers/PostSearchContainer/PostSearch.context'
 import { LPE } from '../../types/lpe.types'
 import { RenderArticleBlock } from './Article.Block'
 
@@ -12,7 +13,9 @@ const ArticleBlocks = ({ data }: Props) => {
   const { setTocId, tocId } = useArticleContainerContext()
   const headingElementsRef = useIntersectionObserver(setTocId)
 
-  const blocks = useMemo(
+  const search = usePostSearch()
+
+  const filteredBlocks = useMemo(
     () =>
       data.content.filter(
         (b) =>
@@ -24,6 +27,11 @@ const ArticleBlocks = ({ data }: Props) => {
     [data.content],
   )
 
+  const blocks =
+    search.active && !search.isInitialLoading
+      ? search.results.map((i) => i.data)
+      : filteredBlocks
+
   return blocks.length ? (
     <>
       {blocks.map((block, idx) => (

src/components/Article/Article.Body.tsx

@@ -1,20 +1,25 @@
 import styled from '@emotion/styled'
-
 import { LPE } from '../../types/lpe.types'
 import ArticleBlocks from './Article.Blocks'
 import ArticleFooter from './Footer/Article.Footer'
 import ArticleHeader from './Header/Article.Header'
 
 interface Props {
   data: LPE.Article.Document
+  header?: boolean
+  footer?: boolean
 }
 
-export default function ArticleBody({ data }: Props) {
+export default function ArticleBody({
+  data,
+  header = true,
+  footer = true,
+}: Props) {
   return (
     <ArticleContainer>
-      <ArticleHeader {...data.data} />
+      {header && <ArticleHeader {...data.data} />}
       <ArticleBlocks data={data.data} />
-      <ArticleFooter data={data} />
+      {footer && <ArticleFooter data={data} />}
     </ArticleContainer>
   )
 }

src/components/NavBar/NavBar.tsx

@@ -46,25 +46,31 @@ export default function NavBar({ defaultState }: NavBarProps) {
     defaultState && state.state.set((value) => ({ ...value, ...defaultState }))
   }, [defaultState])
 
+  const searchButton =
+    state.showSearchButton.get() &&
+    (!!state.onSearch ? (
+      <IconButton size={'small'} onClick={() => state.onSearch!()}>
+        <SearchIcon color={'primary'} />
+      </IconButton>
+    ) : (
+      <Link href={'/search'}>
+        <IconButton size={'small'}>
+          <SearchIcon color={'primary'} />
+        </IconButton>
+      </Link>
+    ))
+
   const buttons = (
     <>
       <Buttons>
         <ThemeSwitch
           toggle={themeState.toggleMode}
           mode={themeState.get().mode}
         />
-        <Link href={'/search'}>
-          <IconButton size={'small'}>
-            <SearchIcon color={'primary'} />
-          </IconButton>
-        </Link>
+        {searchButton}
       </Buttons>
       <Buttons mobile>
-        <Link href={'/search'}>
-          <IconButton size={'small'}>
-            <SearchIcon color={'primary'} />
-          </IconButton>
-        </Link>
+        {searchButton}
 
         <IconButton size={'small'} onClick={toggleMobileMenu}>
           {showMobileMenu ? (