alma/NeahFront7
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

widget news fetch 5

Browse Source
This commit is contained in:
Alma 2025-04-13 22:44:11 +02:00
parent f099cf0d6c
commit 61e5ccadd2
1 changed files with 38 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
components/news.tsx
View File

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