Add function to view articles

Add a function to retrieve articles created today and yesterday.

src/components/CategoryFilter.tsx

@@ -9,7 +9,9 @@ import {
   Gamepad2, 
   Newspaper,
   Filter,
-  Pin
+  Pin,
+  Calendar,
+  Clock
 } from 'lucide-react';
 import { useAuth } from '@/hooks/useAuth';
 
@@ -20,6 +22,8 @@ interface CategoryFilterProps {
   newsCount: number;
   pinnedCount?: number;
   articles: any[]; // Add articles to calculate counts per category
+  dateFilter?: 'today' | 'yesterday' | null;
+  onDateFilterChange?: (filter: 'today' | 'yesterday' | null) => void;
 }
 
 const iconMap = {
@@ -35,7 +39,9 @@ const CategoryFilter = ({
   onCategoryChange,
   newsCount,
   pinnedCount = 0,
-  articles
+  articles,
+  dateFilter,
+  onDateFilterChange
 }: CategoryFilterProps) => {
   const { user } = useAuth();
 
@@ -85,6 +91,46 @@ const CategoryFilter = ({
         })}
       </div>
 
+      {onDateFilterChange && (
+        <div className="pt-4 border-t space-y-2">
+          <div className="flex items-center gap-2">
+            <Calendar className="h-4 w-4 text-muted-foreground" />
+            <span className="text-sm font-medium">Filtrer par date</span>
+          </div>
+          
+          <div className="space-y-1">
+            <Button
+              variant={dateFilter === null ? "default" : "outline"}
+              size="sm"
+              className="w-full justify-start gap-2"
+              onClick={() => onDateFilterChange(null)}
+            >
+              <span>Tous les articles</span>
+            </Button>
+            
+            <Button
+              variant={dateFilter === 'today' ? "default" : "outline"}
+              size="sm"
+              className="w-full justify-start gap-2"
+              onClick={() => onDateFilterChange('today')}
+            >
+              <Clock className="h-3 w-3" />
+              <span>Aujourd'hui</span>
+            </Button>
+            
+            <Button
+              variant={dateFilter === 'yesterday' ? "default" : "outline"}
+              size="sm"
+              className="w-full justify-start gap-2"
+              onClick={() => onDateFilterChange('yesterday')}
+            >
+              <Calendar className="h-3 w-3" />
+              <span>Hier</span>
+            </Button>
+          </div>
+        </div>
+      )}
+
       {user && (
         <div className="pt-4 border-t">
           <div className="flex items-center gap-2">

src/hooks/useRealArticles.tsx

@@ -5,7 +5,7 @@ import { useAuth } from './useAuth';
 import { NewsItem } from '@/types/news';
 import { toast } from 'sonner';
 
-export function useRealArticles() {
+export function useRealArticles(dateFilter?: 'today' | 'yesterday' | null) {
   const [articles, setArticles] = useState<NewsItem[]>([]);
   const [loading, setLoading] = useState(true);
   const { user } = useAuth();
@@ -13,7 +13,26 @@ export function useRealArticles() {
   const fetchArticles = async () => {
     try {
       setLoading(true);
-      console.log('🔄 Fetching articles...', { user: !!user });
+      console.log('🔄 Fetching articles...', { user: !!user, dateFilter });
+      
+      // Calculate date ranges for filtering
+      let dateStart = null;
+      let dateEnd = null;
+      
+      if (dateFilter === 'today') {
+        const today = new Date();
+        today.setHours(0, 0, 0, 0);
+        dateStart = today.toISOString();
+        today.setHours(23, 59, 59, 999);
+        dateEnd = today.toISOString();
+      } else if (dateFilter === 'yesterday') {
+        const yesterday = new Date();
+        yesterday.setDate(yesterday.getDate() - 1);
+        yesterday.setHours(0, 0, 0, 0);
+        dateStart = yesterday.toISOString();
+        yesterday.setHours(23, 59, 59, 999);
+        dateEnd = yesterday.toISOString();
+      }
       
       if (user) {
         // For authenticated users, fetch articles from their followed feeds
@@ -35,13 +54,20 @@ export function useRealArticles() {
         if (followedFeedIds.length === 0) {
           console.log('⚠️ No followed feeds found for user');
           // Si l'utilisateur ne suit aucun flux, on affiche les articles récents non lus
-          const { data: recentArticles, error: recentError } = await supabase
+          let query = supabase
             .from('articles')
             .select(`
               *,
               feeds!inner(name, category),
               user_articles(is_read, is_pinned)
-            `)
+            `);
+          
+          // Apply date filter if specified
+          if (dateStart && dateEnd) {
+            query = query.gte('published_at', dateStart).lte('published_at', dateEnd);
+          }
+          
+          const { data: recentArticles, error: recentError } = await query
             .order('published_at', { ascending: false })
             .limit(20);
 
@@ -76,14 +102,21 @@ export function useRealArticles() {
         }
 
         // Fetch articles from followed feeds with user interactions, excluding read articles
-        const { data: articlesData, error: articlesError } = await supabase
+        let query = supabase
           .from('articles')
           .select(`
             *,
             feeds!inner(name, category),
             user_articles(is_read, is_pinned)
           `)
-          .in('feed_id', followedFeedIds)
+          .in('feed_id', followedFeedIds);
+        
+        // Apply date filter if specified
+        if (dateStart && dateEnd) {
+          query = query.gte('published_at', dateStart).lte('published_at', dateEnd);
+        }
+        
+        const { data: articlesData, error: articlesError } = await query
           .order('published_at', { ascending: false })
           .limit(100);
 
@@ -117,12 +150,19 @@ export function useRealArticles() {
       } else {
         // For visitors, show recent articles from all feeds
         console.log('👤 Loading articles for visitor');
-        const { data: articlesData, error: articlesError } = await supabase
+        let query = supabase
           .from('articles')
           .select(`
             *,
             feeds!inner(name, category)
-          `)
+          `);
+        
+        // Apply date filter if specified
+        if (dateStart && dateEnd) {
+          query = query.gte('published_at', dateStart).lte('published_at', dateEnd);
+        }
+        
+        const { data: articlesData, error: articlesError } = await query
           .order('published_at', { ascending: false })
           .limit(20);
 
@@ -283,7 +323,7 @@ export function useRealArticles() {
 
   useEffect(() => {
     fetchArticles();
-  }, [user]);
+  }, [user, dateFilter]);
 
   return {
     articles,

src/pages/Index.tsx

@@ -20,6 +20,7 @@ const Index = () => {
   const {
     user
   } = useAuth();
+  const [dateFilter, setDateFilter] = useState<'today' | 'yesterday' | null>(null);
   const {
     articles,
     loading,
@@ -27,7 +28,7 @@ const Index = () => {
     markAsRead,
     deleteArticle,
     refetch
-  } = useRealArticles();
+  } = useRealArticles(dateFilter);
   const isMobile = useIsMobile();
   const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
   const [searchQuery, setSearchQuery] = useState('');
@@ -121,7 +122,16 @@ const Index = () => {
           {/* Sidebar - Desktop only */}
           {!isMobile && (
             <div className={`lg:col-span-1 space-y-6 ${!showFilters && 'hidden lg:block'}`}>
-              <CategoryFilter categories={categories} selectedCategory={selectedCategory} onCategoryChange={setSelectedCategory} newsCount={articles.length} pinnedCount={pinnedCount} articles={articles} />
+              <CategoryFilter 
+                categories={categories} 
+                selectedCategory={selectedCategory} 
+                onCategoryChange={setSelectedCategory} 
+                newsCount={articles.length} 
+                pinnedCount={pinnedCount} 
+                articles={articles}
+                dateFilter={dateFilter}
+                onDateFilterChange={setDateFilter}
+              />
               
               <div className="bg-card border rounded-lg p-4 space-y-3">
                 <h3 className="font-semibold text-sm">Statistiques</h3>
@@ -161,7 +171,16 @@ const Index = () => {
                     </DrawerTrigger>
                     <DrawerContent>
                       <div className="p-4 space-y-6">
-                        <CategoryFilter categories={categories} selectedCategory={selectedCategory} onCategoryChange={setSelectedCategory} newsCount={articles.length} pinnedCount={pinnedCount} articles={articles} />
+                        <CategoryFilter 
+                          categories={categories} 
+                          selectedCategory={selectedCategory} 
+                          onCategoryChange={setSelectedCategory} 
+                          newsCount={articles.length} 
+                          pinnedCount={pinnedCount} 
+                          articles={articles}
+                          dateFilter={dateFilter}
+                          onDateFilterChange={setDateFilter}
+                        />
                         
                         <div className="bg-card border rounded-lg p-4 space-y-3">
                           <h3 className="font-semibold text-sm">Statistiques</h3>