feat: implement blog post list with filtering and search

Author: attarchi

src/components/__tests__/blog-post-list.test.tsx

@@ -0,0 +1,160 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { BlogPostList } from '../blog/blog-post-list';
+import { BlogPost } from '@/types';
+
+// Mock data for testing
+const mockPosts: BlogPost[] = [
+  {
+    title: 'Building Offline-First Apps',
+    slug: 'building-offline-first-apps',
+    date: new Date('2025-01-15'),
+    excerpt: 'Real-time synchronization strategies for mobile applications',
+    tags: ['React Native', 'Offline', 'Sync'],
+    category: 'Mobile Development',
+    content: 'Full content here...',
+    readingTime: 8,
+    published: true,
+  },
+  {
+    title: 'Microservices Architecture Patterns',
+    slug: 'microservices-architecture-patterns',
+    date: new Date('2025-01-10'),
+    excerpt: 'Best practices for designing scalable microservices',
+    tags: ['Microservices', 'Architecture', 'Scalability'],
+    category: 'Backend Development',
+    content: 'Full content here...',
+    readingTime: 12,
+    published: true,
+  },
+  {
+    title: 'Modern CSS Grid Layouts',
+    slug: 'modern-css-grid-layouts',
+    date: new Date('2025-01-05'),
+    excerpt: 'Advanced CSS Grid techniques for responsive design',
+    tags: ['CSS', 'Grid', 'Responsive'],
+    category: 'Frontend Development',
+    content: 'Full content here...',
+    readingTime: 6,
+    published: true,
+  },
+];
+
+describe('BlogPostList', () => {
+  it('renders list of blog posts', () => {
+    render(<BlogPostList posts={mockPosts} />);
+    
+    expect(screen.getByText('Building Offline-First Apps')).toBeInTheDocument();
+    expect(screen.getByText('Microservices Architecture Patterns')).toBeInTheDocument();
+    expect(screen.getByText('Modern CSS Grid Layouts')).toBeInTheDocument();
+  });
+
+  it('displays category filter badges', () => {
+    render(<BlogPostList posts={mockPosts} />);
+    
+    // Use getAllByText to get all instances and check filter badges specifically
+    const mobileBadges = screen.getAllByText('Mobile Development');
+    const backendBadges = screen.getAllByText('Backend Development');
+    const frontendBadges = screen.getAllByText('Frontend Development');
+    
+    expect(mobileBadges.length).toBeGreaterThan(0);
+    expect(backendBadges.length).toBeGreaterThan(0);
+    expect(frontendBadges.length).toBeGreaterThan(0);
+  });
+
+  it('filters posts by category when badge is clicked', async () => {
+    render(<BlogPostList posts={mockPosts} />);
+    
+    // Get the first Mobile Development badge (filter badge)
+    const mobileBadges = screen.getAllByText('Mobile Development');
+    const mobileBadge = mobileBadges[0]; // Filter badge is first
+    fireEvent.click(mobileBadge);
+    
+    await waitFor(() => {
+      expect(screen.getByText('Building Offline-First Apps')).toBeInTheDocument();
+      expect(screen.queryByText('Microservices Architecture Patterns')).not.toBeInTheDocument();
+      expect(screen.queryByText('Modern CSS Grid Layouts')).not.toBeInTheDocument();
+    });
+  });
+
+  it('filters posts by search term', async () => {
+    render(<BlogPostList posts={mockPosts} />);
+    
+    const searchInput = screen.getByPlaceholderText('Search posts...');
+    fireEvent.change(searchInput, { target: { value: 'offline' } });
+    
+    await waitFor(() => {
+      expect(screen.getByText('Building Offline-First Apps')).toBeInTheDocument();
+      expect(screen.queryByText('Microservices Architecture Patterns')).not.toBeInTheDocument();
+      expect(screen.queryByText('Modern CSS Grid Layouts')).not.toBeInTheDocument();
+    });
+  });
+
+  it('sorts posts by date (newest first)', () => {
+    render(<BlogPostList posts={mockPosts} />);
+    
+    const posts = screen.getAllByTestId('blog-post-card');
+    expect(posts).toHaveLength(3);
+    
+    // Check that the first post is the newest (2025-01-15)
+    expect(screen.getByText('Building Offline-First Apps')).toBeInTheDocument();
+  });
+
+  it('displays empty state when no posts match filters', async () => {
+    render(<BlogPostList posts={mockPosts} />);
+    
+    const searchInput = screen.getByPlaceholderText('Search posts...');
+    fireEvent.change(searchInput, { target: { value: 'nonexistent' } });
+    
+    await waitFor(() => {
+      expect(screen.getByText('No posts found')).toBeInTheDocument();
+      expect(screen.getByText('Try adjusting your search or filters')).toBeInTheDocument();
+    });
+  });
+
+  it('has responsive grid layout classes', () => {
+    render(<BlogPostList posts={mockPosts} />);
+    
+    const gridContainer = screen.getByTestId('blog-posts-grid');
+    expect(gridContainer).toHaveClass('grid', 'grid-cols-1', 'md:grid-cols-2', 'lg:grid-cols-3');
+  });
+
+  it('clears filters when clear button is clicked', async () => {
+    render(<BlogPostList posts={mockPosts} />);
+    
+    // Apply a filter
+    const searchInput = screen.getByPlaceholderText('Search posts...');
+    fireEvent.change(searchInput, { target: { value: 'offline' } });
+    
+    await waitFor(() => {
+      expect(screen.queryByText('Microservices Architecture Patterns')).not.toBeInTheDocument();
+    });
+    
+    // Clear filters
+    const clearButton = screen.getByText('Clear filters');
+    fireEvent.click(clearButton);
+    
+    await waitFor(() => {
+      expect(screen.getByText('Microservices Architecture Patterns')).toBeInTheDocument();
+      expect(screen.getByText('Modern CSS Grid Layouts')).toBeInTheDocument();
+    });
+  });
+
+  it('debounces search input', async () => {
+    jest.useFakeTimers();
+    render(<BlogPostList posts={mockPosts} />);
+    
+    const searchInput = screen.getByPlaceholderText('Search posts...');
+    fireEvent.change(searchInput, { target: { value: 'o' } });
+    fireEvent.change(searchInput, { target: { value: 'of' } });
+    fireEvent.change(searchInput, { target: { value: 'off' } });
+    
+    // Fast forward timers to trigger debounced search
+    jest.runAllTimers();
+    
+    await waitFor(() => {
+      expect(screen.getByText('Building Offline-First Apps')).toBeInTheDocument();
+    });
+    
+    jest.useRealTimers();
+  });
+}); 

src/components/blog/blog-filters.tsx

@@ -0,0 +1,51 @@
+import { Badge } from '@/components/ui/Badge';
+import { Button } from '@/components/ui/Button';
+
+interface BlogFiltersProps {
+  categories: string[];
+  selectedCategory: string;
+  onCategoryChange: (cat: string) => void;
+  searchTerm: string;
+  onSearchChange: (val: string) => void;
+  onClear: () => void;
+  showClear: boolean;
+}
+
+export function BlogFilters({
+  categories,
+  selectedCategory,
+  onCategoryChange,
+  searchTerm,
+  onSearchChange,
+  onClear,
+  showClear,
+}: BlogFiltersProps) {
+  return (
+    <div className="space-y-4">
+      <input
+        type="text"
+        placeholder="Search posts..."
+        value={searchTerm}
+        onChange={e => onSearchChange(e.target.value)}
+        className="w-full px-4 py-2 border border-muted rounded-lg bg-surface text-text focus:outline-none focus:ring-2 focus:ring-accent"
+      />
+      <div className="flex flex-wrap gap-2">
+        {categories.map(category => (
+          <Badge
+            key={category}
+            variant={selectedCategory === category ? 'default' : 'outline'}
+            className={`cursor-pointer transition-colors ${selectedCategory === category ? 'bg-accent text-white' : 'text-accent hover:bg-accent hover:text-white'}`}
+            onClick={() => onCategoryChange(selectedCategory === category ? '' : category)}
+          >
+            {category}
+          </Badge>
+        ))}
+      </div>
+      {showClear && (
+        <Button variant="outline" size="sm" onClick={onClear} className="text-muted hover:text-text">
+          Clear filters
+        </Button>
+      )}
+    </div>
+  );
+} 

src/components/blog/blog-post-list.tsx

@@ -0,0 +1,48 @@
+import { useState, useMemo } from 'react';
+import { BlogPost } from '@/types';
+import { BlogPostCard } from './blog-post-card';
+import { BlogFilters } from './blog-filters';
+
+interface BlogPostListProps {
+  posts: BlogPost[];
+}
+
+export function BlogPostList({ posts }: BlogPostListProps) {
+  const [selectedCategory, setSelectedCategory] = useState('');
+  const [searchTerm, setSearchTerm] = useState('');
+
+  const categories = useMemo(() => [...new Set(posts.map(p => p.category))].sort(), [posts]);
+  const filteredPosts = useMemo(() => {
+    let filtered = posts.filter(p => p.published);
+    if (selectedCategory) filtered = filtered.filter(p => p.category === selectedCategory);
+    if (searchTerm) {
+      const s = searchTerm.toLowerCase();
+      filtered = filtered.filter(p => p.title.toLowerCase().includes(s) || p.excerpt.toLowerCase().includes(s));
+    }
+    return filtered.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
+  }, [posts, selectedCategory, searchTerm]);
+
+  return (
+    <div className="space-y-6">
+      <BlogFilters
+        categories={categories}
+        selectedCategory={selectedCategory}
+        onCategoryChange={setSelectedCategory}
+        searchTerm={searchTerm}
+        onSearchChange={setSearchTerm}
+        onClear={() => { setSelectedCategory(''); setSearchTerm(''); }}
+        showClear={!!selectedCategory || !!searchTerm}
+      />
+      {filteredPosts.length > 0 ? (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" data-testid="blog-posts-grid">
+          {filteredPosts.map(post => <BlogPostCard key={post.slug} post={post} />)}
+        </div>
+      ) : (
+        <div className="text-center py-12">
+          <h3 className="text-lg font-semibold text-text mb-2">No posts found</h3>
+          <p className="text-muted">Try adjusting your search or filters</p>
+        </div>
+      )}
+    </div>
+  );
+}