refactor search function

Author: cherylli

Diff for: components/blog/SearchBar.js

@@ -1,21 +1,10 @@
 import styles from '@/styles/SearchBar.module.scss';
 import { useRef } from 'react';
 
-const SearchBar = ({ items, setSearchTerm, setSearchResults }) => {
+const SearchBar = ({ setSearchTerm }) => {
   const searchInput = useRef(null);
   const search = () => {
-    const searchTerm = searchInput.current.value;
-    if (!searchTerm) return setSearchResults(null);
-    const results = items.filter(
-      post =>
-        post.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
-        post.content.toLowerCase().includes(searchTerm.toLowerCase()) ||
-        post.tagList.some(tag =>
-          tag.toLowerCase().includes(searchTerm.toLowerCase())
-        )
-    );
-    setSearchResults(results);
-    setSearchTerm(searchTerm);
+    setSearchTerm(searchInput.current.value);
   };
   return (
     <div className={styles.searchBar}>

Diff for: pages/blog/index.js

@@ -5,17 +5,18 @@ 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 [searchResults, setSearchResults] = useState(null);
-  const [searchTerm, setSearchTerm] = useState('temp');
+  const [searchTerm, setSearchTerm] = useState('');
   const getPostsByTag = tag => {
     return posts.filter(post => post.tagList.includes(tag));
   };
 
   useEffect(() => {
-    console.log('search result', searchResults);
-  }, [searchResults]);
+    setSearchResults(blogSearch(posts, searchTerm));
+  }, [searchTerm]);
 
   return (
     <>

Diff for: utils/search.js

@@ -0,0 +1,11 @@
+export const blogSearch = (posts, searchTerm) => {
+  if (!searchTerm) return null;
+  return posts.filter(
+    post =>
+      post.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      post.content.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      post.tagList.some(tag =>
+        tag.toLowerCase().includes(searchTerm.toLowerCase())
+      )
+  );
+};