widget news fetch 5

components/news.tsx

@@ -25,6 +25,8 @@ interface NewsItem {
 }
 
 export function News() {
+  console.log('[News] Component mounting...');
+  
   const [news, setNews] = useState<NewsItem[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -32,21 +34,40 @@ export function News() {
   const [dbStatus, setDbStatus] = useState<'connecting' | 'connected' | 'error'>('connecting');
 
   // Debug info display component
-  const DebugInfo = () => (
+  const DebugInfo = () => {
+    console.log('[News] Current state:', {
+      newsCount: news.length,
+      loading,
+      error,
+      dbStatus,
+      newsItems: news
+    });
+    
+    return (
       <div className="text-xs text-gray-500 mt-2 p-2 bg-gray-100 rounded">
         <p>Status: {dbStatus}</p>
         <p>Loading: {loading ? 'true' : 'false'}</p>
         <p>Error: {error || 'none'}</p>
         <p>News items: {news.length}</p>
+        <details>
+          <summary>Debug Details</summary>
+          <pre className="mt-2 text-[10px] whitespace-pre-wrap">
+            {JSON.stringify(news, null, 2)}
+          </pre>
+        </details>
       </div>
     );
+  };
 
   const fetchNews = async (isRefresh = false) => {
+    console.log('[News] Fetching news, isRefresh:', isRefresh);
+    
     if (isRefresh) setRefreshing(true);
     setLoading(true);
     setDbStatus('connecting');
     
     try {
+      console.log('[News] Making API request to /api/news');
       const response = await fetch('/api/news', {
         method: 'GET',
         headers: {
@@ -54,20 +75,25 @@ export function News() {
         },
       });
       
+      console.log('[News] API response status:', response.status);
+      
       if (!response.ok) {
         throw new Error(`HTTP error! status: ${response.status}`);
       }
       
       const data = await response.json();
+      console.log('[News] API response data:', data);
       
       if (data.error) {
         throw new Error(data.error);
       }
       
+      console.log('[News] Setting news items:', data.news);
       setNews(data.news || []);
       setError(null);
       setDbStatus('connected');
     } catch (err) {
+      console.error('[News] Error fetching news:', err);
       const errorMessage = err instanceof Error ? err.message : 'Failed to load news';
       setError(errorMessage);
       setDbStatus('error');
@@ -79,7 +105,11 @@ export function News() {
   };
 
   useEffect(() => {
+    console.log('[News] Running useEffect...');
     fetchNews();
+    return () => {
+      console.log('[News] Component unmounting...');
+    };
   }, []);
 
   if (loading && !refreshing) {