I am developing a feature in a React application that allows users to filter posts by categories using Firestore as the database. When a user selects a category from the menu bar, the application should only display posts belonging to that selected category. However, I encounter a “Posts not found” error even though I have confirmed the posts with the corresponding categories exist in Firestore.
Here is the menu bar component where categories are selected:
import React, { useState } from 'react';
import { Box, useDisclosure } from '@chakra-ui/react';
import useSearchUsersPosts from '../../hooks/useSearchUserPosts';
import FeedPost from '../FeedPosts/FeedPost';
import PostPageContent from '../PostPage/PostPageContent';
const categories = [
{ name: "Dorm & Living", value: "dormLiving" },
{ name: "Electronics", value: "electronics" },
{ name: "Clothing, Shoes, & Accessories", value: "clothingShoesAccessories" },
{ name: "Bags & Luggage", value: "bagsLuggage" },
{ name: "Books & Study Materials", value: "booksStudyMaterials" },
{ name: "Outdoor & Sports", value: "outdoorSports" },
];
const Menubar = () => {
const { isOpen, onOpen, onClose } = useDisclosure();
const { posts, isLoading, getPostDetails } = useSearchUsersPosts();
const [selectedCategory, setSelectedCategory] = useState("");
const handleCategoryClick = (categoryValue) => {
setSelectedCategory(categoryValue);
getPostDetails(categoryValue, );
};
return (
<>
<Box display="flex" alignItems="start">
{categories.map((category) => (
<Box
key={category.value}
p="2"
_hover={{ bg: 'gray.100', cursor: 'pointer' }}
onClick={() => handleCategoryClick(category.value)}
>
{category.name}
</Box>
))}
</Box>
{posts &&
posts.map((post, index) => (
index % 25 === 0 ? (
<FeedPost
postData={post}
key={post.id}
id={post.id}
/>
) : null
))
}
</>
);
};
export default Menubar;
And here is the custom hook (useSearchUsersPosts) where I fetch posts based on the selected category:
import React, { useState } from 'react';
import { Box, useDisclosure } from '@chakra-ui/react';
import useSearchUsersPosts from '../../hooks/useSearchUserPosts';
import FeedPost from '../FeedPosts/FeedPost';
import PostPageContent from '../PostPage/PostPageContent';
const categories = [
{ name: "Dorm & Living", value: "dormLiving" },
{ name: "Electronics", value: "electronics" },
{ name: "Clothing, Shoes, & Accessories", value: "clothingShoesAccessories" },
{ name: "Bags & Luggage", value: "bagsLuggage" },
{ name: "Books & Study Materials", value: "booksStudyMaterials" },
{ name: "Outdoor & Sports", value: "outdoorSports" },
];
const Menubar = () => {
const { isOpen, onOpen, onClose } = useDisclosure();
const { posts, isLoading, getPostDetails } = useSearchUsersPosts();
const [selectedCategory, setSelectedCategory] = useState("");
const handleCategoryClick = (categoryValue) => {
setSelectedCategory(categoryValue);
getPostDetails(categoryValue, );
};
return (
<>
<Box display="flex" alignItems="start">
{categories.map((category) => (
<Box
key={category.value}
p="2"
_hover={{ bg: 'gray.100', cursor: 'pointer' }}
onClick={() => handleCategoryClick(category.value)}
>
{category.name}
</Box>
))}
</Box>
{posts &&
posts.map((post, index) => (
index % 25 === 0 ? (
<FeedPost
postData={post}
key={post.id}
id={post.id}
/>
) : null
))
}
</>
);
};
export default Menubar;
I considered the possibility that the FeedPost component might be missing category or condition fields, but my intent is not to display all post details in the feed – only when viewing the post’s content directly.
feddpost
<Text>{"$" + postData.price}</Text>
{postData.title}
post content:
<Heading as="h1" size="md">
{posts?.title}
</Heading>
{/* description */}
<Text as="p" my={2}>
{posts?.description}
</Text>
{/* price */}
<Text as="h4" fontWeight="bold">
{"$ " + posts.price}
</Text>
</Box>
<Flex my={4}>
<Text fontSize={{ base: 12, md: 12, lg: 16 }}>Size L </Text>
<Text px={{ base: 1, md: 1, lg: 1.5 }}> •</Text>
{/* Condition */}
<Text fontSize={{ base: 12, md: 14, lg: 16 }}>
{posts?.condition}{" "}
</Text>{" "}
<Text px={{ base: 1, md: 1, lg: 1.5 }}> •</Text>
{/* category */}
<Text fontSize={{ base: 12, md: 14, lg: 16 }}>
{" "}
{posts?.category}
</Text>
<Text px={{ base: 1, md: 1, lg: 1.5 }}> •</Text>
{/* title */}
<Text fontSize={{ base: 12, md: 14, lg: 16 }}>{posts?.username}</Text>
</Flex>
How can I ensure the posts are correctly filtered by category and displayed without the “Posts not found” error?
Is there a more efficient way to handle the fetching and filtering of posts based on the selected category in React, considering best practices with Firestore?
Any insights or suggestions on what might be causing this issue and how to resolve it would be greatly appreciated.
