complete search function in blog page

Author: cherylli

components/blog/SearchBar.js

@@ -1,9 +1,21 @@
 import styles from '@/styles/SearchBar.module.scss';
 
-const SearchBar = () => {
+const SearchBar = ({ posts, setSearchTerm, setSearchResults }) => {
+  const handleChange = e => {
+    if (!e.target.value) return setSearchResults(null);
+    const results = posts.filter(post =>
+      post.title.toLowerCase().includes(e.target.value.toLowerCase())
+    );
+    setSearchResults(results);
+    setSearchTerm(e.target.value);
+  };
   return (
     <div className={styles.searchBar}>
-      <input type='search' placeholder='keyword or topic' />
+      <input
+        type='search'
+        placeholder='keyword or topic'
+        onChange={handleChange}
+      />
       <button type='submit'>Search</button>
     </div>
   );

pages/blog/index.js

@@ -1,27 +1,52 @@
+import { useEffect, useState } from 'react';
 import BlogPostsContainer from '@/components/blog/BlogPostsContainer';
-import Container from '@/components/containers/Container';
 import SearchBar from '@/components/blog/SearchBar';
-import styles from '@/styles/Blog.module.scss';
 import Title from '@/components/snippets/Title';
+import styles from '@/styles/Blog.module.scss';
 import { blogRevalidate } from '@/utils/config';
 import { tagToHeading } from '@/utils/blogCategories';
 
 export default function Blog({ posts }) {
-  const latestPosts = posts.slice(0, 3);
+  const [searchResults, setSearchResults] = useState(null);
+  const [searchTerm, setSearchTerm] = useState('temp');
   const getPostsByTag = tag => {
     return posts.filter(post => post.tagList.includes(tag));
   };
 
+  useEffect(() => {
+    console.log('search result', searchResults);
+  }, [searchResults]);
+
   return (
     <>
       <div className={styles.blogSearch}>
-        <Title customClass='blogTitle' title='Latest Posts' />
-        <SearchBar />
+        <Title
+          customClass='blogTitle'
+          title={searchResults ? '' : 'Latest Posts'}
+        />
+        <SearchBar
+          posts={posts}
+          setSearchTerm={setSearchTerm}
+          setSearchResults={setSearchResults}
+        />
       </div>
-      <BlogPostsContainer posts={latestPosts} />
-      {Object.keys(tagToHeading).map(tag => (
-        <BlogPostsContainer key={tag} posts={getPostsByTag(tag)} tag={tag} />
-      ))}
+      {searchResults ? (
+        <BlogPostsContainer
+          posts={searchResults}
+          heading={`${searchResults.length} search Results for '${searchTerm}'`}
+        />
+      ) : (
+        <>
+          <BlogPostsContainer posts={posts.slice(0, 3)} />
+          {Object.keys(tagToHeading).map(tag => (
+            <BlogPostsContainer
+              key={tag}
+              posts={getPostsByTag(tag)}
+              tag={tag}
+            />
+          ))}
+        </>
+      )}
     </>
   );
 }

styles/Blog.module.scss

@@ -25,11 +25,9 @@
   display: flex;
   align-items: center;
   padding-top: 2.5rem;
-  margin-bottom: -2.5rem;
-  //TO-DO: Add the style below back when implementing search functionality
-  // margin: 0 auto;
-  // width: 90%;
-  // max-width: $large-desktop-breakpoint;
+  margin: 0 auto;
+  width: 90%;
+  max-width: $large-desktop-breakpoint;
 
   @include mobile {
     flex-direction: column-reverse;

styles/Title.module.scss

@@ -7,5 +7,6 @@
     margin: 0 auto 1rem;
     width: 90%;
     max-width: $large-desktop-breakpoint;
+    min-height: 5rem;
   }
 }