1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
"use client";
import { useEffect, useState } from "react";
import BlogLists from "@components/top-level/blog-lists";
import Loading from "./loading";
import { useAppContext } from "@context/index";
import styles from "./container.module.css";
export default function BlogContainer({ blogs }) {
const { input } = useAppContext();
const [filteredBlogs, setFilteredBlogs] = useState([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
handleBlogs();
}, [input, blogs]); // Added 'blogs' as a dependency
const handleBlogs = () => {
setLoading(true); // Set loading state to true when starting to filter
const filtered = blogs.filter((blog) => {
const lowerCaseBlogTitle = blog.title.toLowerCase();
const lowerCaseInput = input.toLowerCase();
return lowerCaseBlogTitle.includes(lowerCaseInput);
});
setFilteredBlogs(filtered);
setLoading(false); // Set loading state to false when filtering is complete
};
return (
<>
{loading ? (
<Loading />
) : filteredBlogs.length ? (
<BlogLists
title="Lifestyle"
description="Lorem ipsum dolor sit amet elit. Id quaerat amet ipsum sunt et quos dolorum."
blogs={filteredBlogs}
/>
) : (
<h2 className={styles.center}>No data found</h2>
)}
</>
);
}