news widget design

app/api/news/route.ts

@@ -3,6 +3,36 @@ import { NextResponse } from 'next/server';
 // FastAPI server configuration
 const API_HOST = process.env.API_HOST || 'http://172.16.0.104:8000';
 
+// Helper function to clean HTML content
+function cleanHtmlContent(content: string): string {
+  if (!content) return '';
+  // Remove HTML tags
+  return content
+    .replace(/<[^>]*>/g, '')
+    .replace(/&nbsp;/g, ' ')
+    .replace(/&amp;/g, '&')
+    .replace(/&quot;/g, '"')
+    .replace(/&#39;/g, "'")
+    .trim();
+}
+
+// Helper function to format relative time
+function formatRelativeTime(dateStr: string): string {
+  const date = new Date(dateStr);
+  const now = new Date();
+  const diffInHours = Math.floor((now.getTime() - date.getTime()) / (1000 * 60 * 60));
+  
+  if (diffInHours < 1) return 'Just now';
+  if (diffInHours === 1) return '1 hour ago';
+  if (diffInHours < 24) return `${diffInHours} hours ago`;
+  if (diffInHours < 48) return 'Yesterday';
+  return date.toLocaleDateString('en-US', { 
+    month: 'short', 
+    day: 'numeric',
+    year: 'numeric'
+  });
+}
+
 export async function GET() {
   try {
     console.log(`Fetching news from FastAPI server at ${API_HOST}...`);
@@ -11,29 +41,48 @@ export async function GET() {
       method: 'GET',
       headers: {
         'Content-Type': 'application/json',
+        'Accept': 'application/json',
       },
+      // Add timeout and other fetch options
+      cache: 'no-store',
+      next: { revalidate: 0 },
     });
 
     if (!response.ok) {
-      throw new Error(`HTTP error! status: ${response.status}`);
+      const errorText = await response.text();
+      throw new Error(`HTTP error! status: ${response.status}, body: ${errorText}`);
     }
 
-    const news = await response.json();
-    console.log(`Successfully fetched ${news.length} news articles`);
+    const rawNews = await response.json();
     
-    return NextResponse.json(news);
+    // Format and clean the news data
+    const formattedNews = rawNews.map((article: any) => ({
+      ...article,
+      title: cleanHtmlContent(article.title),
+      description: cleanHtmlContent(article.description),
+      relativeTime: formatRelativeTime(article.date),
+      category: article.category?.toUpperCase() || 'GENERAL',
+    }));
+
+    console.log(`Successfully fetched and formatted ${formattedNews.length} news articles`);
+    
+    return NextResponse.json(formattedNews);
   } catch (error) {
+    // Enhanced error logging
     console.error('Error in news API:', {
       error: error instanceof Error ? error.message : 'Unknown error',
       apiHost: API_HOST,
-      stack: error instanceof Error ? error.stack : undefined
+      stack: error instanceof Error ? error.stack : undefined,
+      timestamp: new Date().toISOString(),
     });
     
+    // More detailed error response
     return NextResponse.json(
       { 
         error: 'Failed to fetch news', 
         details: error instanceof Error ? error.message : 'Unknown error',
-        server: API_HOST
+        server: API_HOST,
+        timestamp: new Date().toISOString(),
       },
       { status: 500 }
     );