chore: removed unused code and moved search filter to custom hook

hooks/useFilterState.js

@@ -0,0 +1,17 @@
+import { useState, useEffect } from 'react'
+import { filterItems } from '../utils/filterItems'
+
+// Custom hook to manage filter state
+export const useFilterState = (data, searchQuery) => {
+  const [filteredData, setFilteredData] = useState([])
+
+  useEffect(() => {
+    const searchFields = ['title', 'description'] // Fields to search for courses
+    const filtered = filterItems(data, searchQuery, searchFields)
+    setFilteredData(filtered)
+  }, [data, searchQuery])
+
+  return {
+    filteredData,
+  }
+}

pages/courses/index.js

@@ -5,13 +5,12 @@ import { Container } from '@nextui-org/react'
 import { CourseCard } from '../../components/Card/Course'
 import { useTranslation } from 'react-i18next'
 import SearchBar from '../../components/SearchBar'
-import { useFilterState } from '../../components/Filter/utils'
+import { useFilterState } from '../../hooks/useFilterState'
 
 function Courses({ allCourses }) {
   const { t } = useTranslation()
-  const [showMore, setShowMore] = useState(false)
   const [searchQuery, setSearchQuery] = useState('')
-  const { filteredCourses } = useFilterState(allCourses, searchQuery, 'course')
+  const { filteredData } = useFilterState(allCourses, searchQuery)
 
   return (
     <>
@@ -39,7 +38,7 @@ function Courses({ allCourses }) {
             setSearchQuery={setSearchQuery}
             placeholder={t('searchBuild')}
           />
-          {filteredCourses.map((c) => {
+          {filteredData.map((c) => {
             return (
               <>
                 <CourseCard course={c} />

utils/filterItems.js

@@ -0,0 +1,20 @@
+// Utility function to filter items based on search query
+export const filterItems = (items, searchQuery, searchFields = []) => {
+  return items.filter((item) => {
+    return searchFields.some((field) => {
+      let content = ''
+      if (field === 'title' && item.metadata) {
+        // Get all titles from the metadata
+        const titles = Object.values(item.metadata)
+          .filter((meta) => meta?.title)
+          .map((titleObj) => titleObj.title)
+        // Check if any of the titles includes the search query
+        return titles.some((title) => title.toLowerCase().includes(searchQuery.toLowerCase()))
+      } else {
+        content = item[field]
+      }
+
+      return content && content.toLowerCase().includes(searchQuery.toLowerCase())
+    })
+  })
+}