Merge pull request #156 from Web-Dev-Path/feature/blog-search

Add Search feature in blog page

Author: mariana-caldas

CHANGELOG.md

@@ -84,6 +84,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 ### Added
 
 - Blog page which pulls content from dev.to
+- Search functionality for blog posts
 
 ### Fixed
 

components/blog/SearchBar.js

@@ -1,10 +1,22 @@
 import styles from '@/styles/SearchBar.module.scss';
+import { useRef } from 'react';
 
-const SearchBar = () => {
+const SearchBar = ({ setSearchTerm }) => {
+  const searchInput = useRef(null);
+  const search = () => {
+    setSearchTerm(searchInput.current.value);
+  };
   return (
     <div className={styles.searchBar}>
-      <input type='search' placeholder='keyword or topic' />
-      <button type='submit'>Search</button>
+      <input
+        ref={searchInput}
+        type='search'
+        placeholder='keyword or topic'
+        onChange={search}
+      />
+      <button type='submit' onClick={search}>
+        Search
+      </button>
     </div>
   );
 };

pages/blog/category/[tag].js

@@ -1,6 +1,7 @@
 import BlogPostsContainer from '@/components/blog/BlogPostsContainer';
 import { paths, tagToHeading } from '@/utils/blogCategories';
 import { useRouter } from 'next/router';
+import { blogRevalidate } from '@/utils/config';
 
 export default function BlogCategory({ posts }) {
   const router = useRouter();
@@ -33,6 +34,7 @@ export async function getStaticProps({ params }) {
           tagList: post.tag_list,
         })),
     },
+    revalidate: blogRevalidate,
   };
 }
 

pages/blog/category/all.js

@@ -1,4 +1,5 @@
 import BlogPostsContainer from '@/components/blog/BlogPostsContainer';
+import { blogRevalidate } from '@/utils/config';
 
 export default function BlogCategory({ posts }) {
   return (
@@ -26,5 +27,6 @@ export async function getStaticProps() {
         tagList: post.tag_list,
       })),
     },
+    revalidate: blogRevalidate,
   };
 }

pages/blog/first-post.js

@@ -1,25 +1,45 @@
+import { 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';
+import { blogSearch } from '@/utils/search';
 
 export default function Blog({ posts }) {
-  const latestPosts = posts.slice(0, 3);
-  const nextJsPosts = posts.filter(post => post.tagList.includes('nextjs'));
-  const typescriptPosts = posts.filter(post =>
-    post.tagList.includes('typescript')
-  );
+  const [searchTerm, setSearchTerm] = useState('');
+
+  const filteredData = {
+    posts: posts.slice(0, 3),
+  };
+
+  if (searchTerm) {
+    const filteredPosts = blogSearch(posts, searchTerm);
+    filteredData.posts = filteredPosts;
+    filteredData.heading = `${
+      filteredPosts.length === 0 ? 'no' : filteredPosts.length
+    } search ${
+      filteredPosts.length > 1 ? 'results' : 'result'
+    } for '${searchTerm}'`;
+    filteredData.viewall = false;
+  }
 
   return (
     <>
       <div className={styles.blogSearch}>
-        <Title customClass='blogTitle' title='Latest Posts' />
-        {/* <SearchBar /> */}
+        <Title customClass='blogTitle' title={!searchTerm && 'Latest Posts'} />
+        <SearchBar setSearchTerm={setSearchTerm} />
       </div>
-      <BlogPostsContainer posts={latestPosts} />
-      <BlogPostsContainer posts={nextJsPosts} tag='nextjs' />
-      <BlogPostsContainer posts={typescriptPosts} tag='typescript' />
+      <BlogPostsContainer {...filteredData} />
+      {!searchTerm &&
+        Object.keys(tagToHeading).map(tag => (
+          <BlogPostsContainer
+            key={tag}
+            posts={posts.filter(post => post.tagList.includes(tag))}
+            tag={tag}
+          />
+        ))}
     </>
   );
 }
@@ -40,5 +60,6 @@ export async function getStaticProps() {
         tagList: post.tag_list,
       })),
     },
+    revalidate: blogRevalidate,
   };
 }

pages/blog/index.js

@@ -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/Blog.module.scss

@@ -31,7 +31,7 @@
     background: url('/images/svg/search.svg');
     background-size: cover;
     background-repeat: no-repeat;
-    margin: 0.5rem 1rem 0.5rem 0;
+    margin: 0.5rem 1rem 0.5rem 1rem;
     cursor: pointer;
   }
 }

styles/SearchBar.module.scss

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

styles/Title.module.scss

@@ -0,0 +1 @@
+export const blogRevalidate = 60 * 60 * 24;