The useEffect does not run at all in the production env. Its works fine in the dev env
*the code:
*
"use client"
import axios from 'axios';
import React, { useState, useEffect } from 'react';
import PostList from '@/components/ui/list/PostList';
import { Post, PostsResponse } from '@/utils/types';
const Categories = () => {
const [selectedCategory, setSelectedCategory] = useState<string>('nextjs');
const [posts, setPosts] = useState<Post[]>([]);
console.log("first", selectedCategory)
console.log("posts", posts)
const fetchPosts = async () => {
try {
const response = await axios.get<PostsResponse>(
selectedCategory
? `http://localhost:3000/api/posts?cat=${selectedCategory}`
: 'http://localhost:3000/api/posts'
);
console.log("res", response)
setPosts(response.data.posts);
} catch (error) {
console.error('Error fetching posts:', error);
}
};
useEffect(() => {
fetchPosts();
}, [selectedCategory])
const categories: string[] = [
"nextjs",
"react",
"redux",
"typescript",
"javascript"
];
const handleCategoryClick = (category: string) => {
setSelectedCategory(category);
};
return (
<div className='flex flex-col justify-center gap-10 mt-10 mx-auto '>
<h2 className='text-3xl font-bold tracking-wider'>Categories</h2>
<div className='flex flex-col md:flex-row gap-4 w-full'>
{categories.map((text, index) => (
<button
key={index}
className={`flex overflow-hidden justify-center items-center gap-4 border-2 text-xl font-medium shadow-xl bg-card py-3 px-6 rounded-lg cursor-pointer hover:shadow-sm hover:scale-105 transition-shadow duration-300 capitalize
${selectedCategory === text ? 'text-purple-500 boder-2 border-purple-500' : ''}`}
onClick={() => handleCategoryClick(text)}
>
{text}
</button>
))}
</div>
<div className='grid grid-cols-12 gap-4'>
{posts.map((post: Post) => (
<PostList key={post.id} post={post} />
))}
</div>
</div>
);
};
export default Categories;