feat: Refactor BlogPage to use client-side data fetching and enhance user interaction

- Converted BlogPage to a client component, enabling dynamic data fetching for featured posts, all posts, and categories.
- Implemented state management for posts, categories, and search functionality, improving user experience.
- Added filtering and search capabilities for blog posts based on category and search term.
- Enhanced loading state and error handling during data fetching.
- Updated UI to reflect the number of articles available and improved the layout for better readability.

Author: pblvrt

packages/app/app/api/blog/route.ts

@@ -0,0 +1,34 @@
+import { NextRequest, NextResponse } from 'next/server';
+import {
+  getSortedPostsData,
+  getFeaturedPosts,
+  getAllCategories,
+} from '@/lib/utils/blog';
+
+export async function GET(request: NextRequest) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const type = searchParams.get('type');
+
+    switch (type) {
+      case 'featured':
+        const featuredPosts = await getFeaturedPosts();
+        return NextResponse.json({ data: featuredPosts });
+
+      case 'categories':
+        const categories = await getAllCategories();
+        return NextResponse.json({ data: categories });
+
+      case 'all':
+      default:
+        const allPosts = await getSortedPostsData();
+        return NextResponse.json({ data: allPosts });
+    }
+  } catch (error) {
+    console.error('Error fetching blog data:', error);
+    return NextResponse.json(
+      { error: 'Failed to fetch blog data' },
+      { status: 500 }
+    );
+  }
+}

packages/app/app/blog/page.tsx

@@ -1,4 +1,6 @@
-import { Suspense } from 'react';
+'use client';
+
+import { Suspense, useState, useEffect } from 'react';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
@@ -15,12 +17,7 @@ import {
 } from 'lucide-react';
 import Link from 'next/link';
 import Image from 'next/image';
-import {
-  getSortedPostsData,
-  getFeaturedPosts,
-  getAllCategories,
-  BlogPost,
-} from '@/lib/utils/blog';
+import { BlogPost } from '@/lib/utils/blog';
 
 // Static navbar component for blog page to avoid dynamic server usage
 const StaticBlogNavbar = () => {
@@ -61,11 +58,150 @@ const StaticBlogNavbar = () => {
   );
 };
 
-const BlogPage = async () => {
-  const featuredPosts = await getFeaturedPosts();
-  const allPosts = await getSortedPostsData();
-  const recentPosts = allPosts.filter((post) => !post.featured).slice(0, 6);
-  const categories = await getAllCategories();
+const BlogPage = () => {
+  const [featuredPosts, setFeaturedPosts] = useState<BlogPost[]>([]);
+  const [allPosts, setAllPosts] = useState<BlogPost[]>([]);
+  const [displayedPosts, setDisplayedPosts] = useState<BlogPost[]>([]);
+  const [categories, setCategories] = useState<string[]>([]);
+  const [selectedCategory, setSelectedCategory] = useState<string>('All');
+  const [searchTerm, setSearchTerm] = useState<string>('');
+  const [postsPerPage] = useState(6);
+  const [currentPostsShown, setCurrentPostsShown] = useState(6);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const loadBlogData = async () => {
+      try {
+        const [featuredResponse, postsResponse, categoriesResponse] =
+          await Promise.all([
+            fetch('/api/blog?type=featured'),
+            fetch('/api/blog?type=all'),
+            fetch('/api/blog?type=categories'),
+          ]);
+
+        const [featuredData, postsData, categoriesData] = await Promise.all([
+          featuredResponse.json(),
+          postsResponse.json(),
+          categoriesResponse.json(),
+        ]);
+
+        setFeaturedPosts(featuredData.data);
+        setAllPosts(postsData.data);
+        setCategories(categoriesData.data);
+
+        // Filter out featured posts for the main grid and show initial 6
+        const nonFeaturedPosts = postsData.data.filter(
+          (post: BlogPost) => !post.featured
+        );
+        setDisplayedPosts(nonFeaturedPosts.slice(0, postsPerPage));
+        setCurrentPostsShown(Math.min(postsPerPage, nonFeaturedPosts.length));
+      } catch (error) {
+        console.error('Error loading blog data:', error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loadBlogData();
+  }, [postsPerPage]);
+
+  // Filter posts based on category and search term
+  useEffect(() => {
+    let filteredPosts = allPosts.filter((post) => !post.featured); // Exclude featured posts from main grid
+
+    if (selectedCategory !== 'All') {
+      filteredPosts = filteredPosts.filter(
+        (post) => post.category === selectedCategory
+      );
+    }
+
+    if (searchTerm) {
+      filteredPosts = filteredPosts.filter(
+        (post) =>
+          post.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
+          post.excerpt.toLowerCase().includes(searchTerm.toLowerCase()) ||
+          post.tags.some((tag) =>
+            tag.toLowerCase().includes(searchTerm.toLowerCase())
+          )
+      );
+    }
+
+    setDisplayedPosts(filteredPosts.slice(0, currentPostsShown));
+  }, [selectedCategory, searchTerm, allPosts, currentPostsShown]);
+
+  const handleLoadMore = () => {
+    const nonFeaturedPosts = allPosts.filter((post) => !post.featured);
+    let filteredPosts = nonFeaturedPosts;
+
+    if (selectedCategory !== 'All') {
+      filteredPosts = nonFeaturedPosts.filter(
+        (post) => post.category === selectedCategory
+      );
+    }
+
+    if (searchTerm) {
+      filteredPosts = filteredPosts.filter(
+        (post) =>
+          post.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
+          post.excerpt.toLowerCase().includes(searchTerm.toLowerCase()) ||
+          post.tags.some((tag) =>
+            tag.toLowerCase().includes(searchTerm.toLowerCase())
+          )
+      );
+    }
+
+    const newPostsShown = Math.min(
+      currentPostsShown + postsPerPage,
+      filteredPosts.length
+    );
+    setCurrentPostsShown(newPostsShown);
+    setDisplayedPosts(filteredPosts.slice(0, newPostsShown));
+  };
+
+  const handleCategoryChange = (category: string) => {
+    setSelectedCategory(category);
+    setCurrentPostsShown(postsPerPage); // Reset to initial number
+  };
+
+  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchTerm(e.target.value);
+    setCurrentPostsShown(postsPerPage); // Reset to initial number
+  };
+
+  // Calculate if there are more posts to show
+  const hasMorePosts = () => {
+    let filteredPosts = allPosts.filter((post) => !post.featured);
+
+    if (selectedCategory !== 'All') {
+      filteredPosts = filteredPosts.filter(
+        (post) => post.category === selectedCategory
+      );
+    }
+
+    if (searchTerm) {
+      filteredPosts = filteredPosts.filter(
+        (post) =>
+          post.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
+          post.excerpt.toLowerCase().includes(searchTerm.toLowerCase()) ||
+          post.tags.some((tag) =>
+            tag.toLowerCase().includes(searchTerm.toLowerCase())
+          )
+      );
+    }
+
+    return currentPostsShown < filteredPosts.length;
+  };
+
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-white flex items-center justify-center">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-slate-600 mx-auto mb-4"></div>
+          <p className="text-slate-600">Loading blog posts...</p>
+        </div>
+      </div>
+    );
+  }
 
   return (
     <div className="min-h-screen bg-white">
@@ -103,6 +239,8 @@ const BlogPage = async () => {
                 <input
                   type="text"
                   placeholder="Search articles..."
+                  value={searchTerm}
+                  onChange={handleSearch}
                   className="w-full bg-white/10 backdrop-blur-sm border border-white/20 text-white placeholder-slate-400 rounded-xl px-12 py-4 focus:outline-none focus:ring-2 focus:ring-white/30 transition-all duration-300"
                 />
               </div>
@@ -113,34 +251,38 @@ const BlogPage = async () => {
 
       <div className="container mx-auto px-4 py-20">
         {/* Featured Posts Section */}
-        <section className="mb-24">
-          <div className="flex items-center justify-between mb-12">
-            <div>
-              <div className="inline-flex items-center gap-2 text-slate-600 font-semibold text-sm mb-3">
-                <TrendingUp className="w-4 h-4" />
-                Featured Articles
+        {featuredPosts.length > 0 && (
+          <section className="mb-24">
+            <div className="flex items-center justify-between mb-12">
+              <div>
+                <div className="inline-flex items-center gap-2 text-slate-600 font-semibold text-sm mb-3">
+                  <TrendingUp className="w-4 h-4" />
+                  Featured Articles
+                </div>
+                <h2 className="text-4xl font-bold text-gray-900 mb-3">
+                  Trending Stories
+                </h2>
+                <p className="text-lg text-gray-600 max-w-2xl">
+                  Our most popular and insightful articles about live streaming,
+                  Web3, and community building
+                </p>
               </div>
-              <h2 className="text-4xl font-bold text-gray-900 mb-3">
-                Trending Stories
-              </h2>
-              <p className="text-lg text-gray-600 max-w-2xl">
-                Our most popular and insightful articles about live streaming,
-                Web3, and community building
-              </p>
             </div>
-          </div>
 
-          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
-            {featuredPosts.map((post) => (
-              <FeaturedPostCard key={post.id} post={post} />
-            ))}
-          </div>
-        </section>
+            <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+              {featuredPosts.map((post) => (
+                <FeaturedPostCard key={post.id} post={post} />
+              ))}
+            </div>
+          </section>
+        )}
 
         {/* Category Filter */}
         <section className="mb-12">
           <div className="flex items-center justify-between mb-8">
-            <h3 className="text-2xl font-bold text-gray-900">All Articles</h3>
+            <h3 className="text-2xl font-bold text-gray-900">
+              All Articles ({allPosts.filter((post) => !post.featured).length})
+            </h3>
             <div className="flex items-center gap-2">
               <Filter className="w-4 h-4 text-gray-600" />
               <span className="text-sm text-gray-600 font-medium">
@@ -153,9 +295,10 @@ const BlogPage = async () => {
             {categories.map((category) => (
               <Button
                 key={category}
-                variant={category === 'All' ? 'default' : 'outline'}
+                variant={category === selectedCategory ? 'default' : 'outline'}
                 size="sm"
                 className="rounded-lg"
+                onClick={() => handleCategoryChange(category)}
               >
                 {category}
               </Button>
@@ -165,23 +308,44 @@ const BlogPage = async () => {
 
         {/* Blog Posts Grid */}
         <section>
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-            {recentPosts.map((post) => (
-              <BlogPostCard key={post.id} post={post} />
-            ))}
-          </div>
+          {displayedPosts.length > 0 ? (
+            <>
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+                {displayedPosts.map((post) => (
+                  <BlogPostCard key={post.id} post={post} />
+                ))}
+              </div>
 
-          {/* Load More Button */}
-          <div className="text-center mt-16">
-            <Button
-              variant="outline"
-              size="lg"
-              className="rounded-xl px-8 py-4 font-semibold border-slate-200 hover:bg-slate-50"
-            >
-              Load More Articles
-              <ArrowRight className="w-4 h-4 ml-2" />
-            </Button>
-          </div>
+              {/* Load More Button */}
+              {hasMorePosts() && (
+                <div className="text-center mt-16">
+                  <Button
+                    variant="outline"
+                    size="lg"
+                    className="rounded-xl px-8 py-4 font-semibold border-slate-200 hover:bg-slate-50"
+                    onClick={handleLoadMore}
+                  >
+                    Load More Articles
+                    <ArrowRight className="w-4 h-4 ml-2" />
+                  </Button>
+                </div>
+              )}
+            </>
+          ) : (
+            <div className="text-center py-16">
+              <BookOpen className="w-16 h-16 text-gray-300 mx-auto mb-4" />
+              <h3 className="text-xl font-semibold text-gray-600 mb-2">
+                No articles found
+              </h3>
+              <p className="text-gray-500">
+                {searchTerm
+                  ? `No articles match "${searchTerm}". Try a different search term.`
+                  : selectedCategory !== 'All'
+                    ? `No articles found in the "${selectedCategory}" category.`
+                    : 'No articles available at the moment.'}
+              </p>
+            </div>
+          )}
         </section>
       </div>
     </div>
@@ -305,7 +469,4 @@ const BlogPostCard = ({ post }: { post: BlogPost }) => {
   );
 };
 
-// Force static generation for the blog page
-export const dynamic = 'force-static';
-
 export default BlogPage;