feat: implement latest news section with loading and error handling
This commit is contained in:
seaznCode
parent
0f4844abb8
commit
60a9d90cf8
@ -1,6 +1,7 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect, useState, useCallback, useRef } from 'react'
|
||||
import Link from 'next/link'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import useAuthStore from '../store/authStore'
|
||||
import PageLayout from '../components/PageLayout'
|
||||
@ -21,6 +22,9 @@ export default function DashboardPage() {
|
||||
const isAuthReady = useAuthStore(state => state.isAuthReady)
|
||||
const isShopEnabled = process.env.NEXT_PUBLIC_SHOW_SHOP !== 'false'
|
||||
const [isMobile, setIsMobile] = useState(false)
|
||||
const [latestNews, setLatestNews] = useState<Array<{ id: number; title: string; summary?: string; slug: string; published_at?: string | null }>>([])
|
||||
const [newsLoading, setNewsLoading] = useState(false)
|
||||
const [newsError, setNewsError] = useState<string | null>(null)
|
||||
|
||||
const { userStatus, loading: statusLoading } = useUserStatus()
|
||||
|
||||
@ -46,6 +50,27 @@ export default function DashboardPage() {
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
let active = true
|
||||
;(async () => {
|
||||
setNewsLoading(true)
|
||||
setNewsError(null)
|
||||
try {
|
||||
const BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:3001'
|
||||
const res = await fetch(`${BASE_URL}/api/news/active`)
|
||||
if (!res.ok) throw new Error('Failed to fetch news')
|
||||
const json = await res.json()
|
||||
const data = Array.isArray(json.data) ? json.data : []
|
||||
if (active) setLatestNews(data.slice(0, 3))
|
||||
} catch (e: any) {
|
||||
if (active) setNewsError(e?.message || 'Failed to load news')
|
||||
} finally {
|
||||
if (active) setNewsLoading(false)
|
||||
}
|
||||
})()
|
||||
return () => { active = false }
|
||||
}, [])
|
||||
|
||||
// Redirect if not logged in (only after auth is ready)
|
||||
useEffect(() => {
|
||||
if (isAuthReady && !user) {
|
||||
@ -231,6 +256,57 @@ export default function DashboardPage() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Latest News */}
|
||||
<div className="rounded-2xl bg-white border border-gray-200 shadow-sm p-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h2 className="text-lg font-semibold text-gray-900">Latest News</h2>
|
||||
<Link href="/news" className="text-sm font-medium text-blue-900 hover:text-blue-700">
|
||||
View all
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{newsLoading && (
|
||||
<div className="space-y-3">
|
||||
{Array.from({ length: 3 }).map((_, i) => (
|
||||
<div key={i} className="animate-pulse space-y-2">
|
||||
<div className="h-4 w-2/3 bg-gray-200 rounded" />
|
||||
<div className="h-3 w-1/2 bg-gray-100 rounded" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{newsError && !newsLoading && (
|
||||
<div className="text-sm text-red-600">{newsError}</div>
|
||||
)}
|
||||
|
||||
{!newsLoading && !newsError && latestNews.length === 0 && (
|
||||
<div className="text-sm text-gray-600">No news yet.</div>
|
||||
)}
|
||||
|
||||
{!newsLoading && !newsError && latestNews.length > 0 && (
|
||||
<ul className="space-y-4">
|
||||
{latestNews.map(item => (
|
||||
<li key={item.id} className="group">
|
||||
<Link href={`/news/${item.slug}`} className="block">
|
||||
<div className="text-xs text-gray-500">
|
||||
{item.published_at ? new Date(item.published_at).toLocaleDateString('de-DE') : 'Recent'}
|
||||
</div>
|
||||
<div className="text-sm font-semibold text-gray-900 group-hover:text-blue-700 line-clamp-2">
|
||||
{item.title}
|
||||
</div>
|
||||
{item.summary && (
|
||||
<div className="text-xs text-gray-600 line-clamp-2 mt-1">
|
||||
{item.summary}
|
||||
</div>
|
||||
)}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useCallback, useEffect, useRef } from 'react'
|
||||
import Link from 'next/link'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import PageLayout from '../components/PageLayout'
|
||||
import TutorialModal, { createTutorialSteps } from '../components/TutorialModal'
|
||||
@ -28,6 +29,16 @@ interface StatusItem {
|
||||
icon: React.ComponentType<React.SVGProps<SVGSVGElement>>
|
||||
}
|
||||
|
||||
type LatestNewsItem = {
|
||||
id: number
|
||||
title: string
|
||||
summary?: string
|
||||
slug: string
|
||||
category?: string
|
||||
imageUrl?: string
|
||||
published_at?: string | null
|
||||
}
|
||||
|
||||
export default function QuickActionDashboardPage() {
|
||||
const router = useRouter()
|
||||
const user = useAuthStore(s => s.user)
|
||||
@ -35,6 +46,9 @@ export default function QuickActionDashboardPage() {
|
||||
const accessToken = useAuthStore(s => s.accessToken) // NEW
|
||||
const { userStatus, loading, error, refreshStatus } = useUserStatus()
|
||||
const [isClient, setIsClient] = useState(false)
|
||||
const [latestNews, setLatestNews] = useState<LatestNewsItem[]>([])
|
||||
const [newsLoading, setNewsLoading] = useState(false)
|
||||
const [newsError, setNewsError] = useState<string | null>(null)
|
||||
|
||||
// Tutorial state
|
||||
const [isTutorialOpen, setIsTutorialOpen] = useState(false)
|
||||
@ -49,6 +63,27 @@ export default function QuickActionDashboardPage() {
|
||||
setHasSeenTutorial(!!tutorialSeen)
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
let active = true
|
||||
;(async () => {
|
||||
setNewsLoading(true)
|
||||
setNewsError(null)
|
||||
try {
|
||||
const BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:3001'
|
||||
const res = await fetch(`${BASE_URL}/api/news/active`)
|
||||
if (!res.ok) throw new Error('Failed to fetch news')
|
||||
const json = await res.json()
|
||||
const data = Array.isArray(json.data) ? json.data : []
|
||||
if (active) setLatestNews(data.slice(0, 3))
|
||||
} catch (e: any) {
|
||||
if (active) setNewsError(e?.message || 'Failed to load news')
|
||||
} finally {
|
||||
if (active) setNewsLoading(false)
|
||||
}
|
||||
})()
|
||||
return () => { active = false }
|
||||
}, [])
|
||||
|
||||
// Derive status from real backend data
|
||||
const emailVerified = userStatus?.email_verified || false
|
||||
const idUploaded = userStatus?.documents_uploaded || false
|
||||
@ -458,18 +493,55 @@ export default function QuickActionDashboardPage() {
|
||||
|
||||
{/* Latest News */}
|
||||
<div className="bg-white rounded-xl shadow-sm ring-1 ring-gray-200 p-5 sm:p-8">
|
||||
<h2 className="text-sm sm:text-base font-semibold text-gray-900 mb-4">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h2 className="text-sm sm:text-base font-semibold text-gray-900">
|
||||
Latest News
|
||||
</h2>
|
||||
<ul className="list-disc pl-5 space-y-2 text-sm text-gray-700">
|
||||
<li>
|
||||
<span className="font-medium text-[#8D6B1D]">New:</span> Referral system
|
||||
launch – invite friends and earn rewards.
|
||||
</li>
|
||||
<li>
|
||||
Profile completion unlocks more features. Keep progressing!
|
||||
<Link href="/news" className="text-xs sm:text-sm font-medium text-blue-900 hover:text-blue-700">
|
||||
View all
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{newsLoading && (
|
||||
<div className="space-y-3">
|
||||
{Array.from({ length: 3 }).map((_, i) => (
|
||||
<div key={i} className="animate-pulse space-y-2">
|
||||
<div className="h-3 w-2/3 bg-gray-200 rounded" />
|
||||
<div className="h-3 w-1/2 bg-gray-100 rounded" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{newsError && !newsLoading && (
|
||||
<div className="text-sm text-red-600">{newsError}</div>
|
||||
)}
|
||||
|
||||
{!newsLoading && !newsError && latestNews.length === 0 && (
|
||||
<div className="text-sm text-gray-600">No news yet.</div>
|
||||
)}
|
||||
|
||||
{!newsLoading && !newsError && latestNews.length > 0 && (
|
||||
<ul className="space-y-4">
|
||||
{latestNews.map(item => (
|
||||
<li key={item.id} className="group">
|
||||
<Link href={`/news/${item.slug}`} className="block">
|
||||
<div className="text-xs text-gray-500">
|
||||
{item.published_at ? new Date(item.published_at).toLocaleDateString('de-DE') : 'Recent'}
|
||||
</div>
|
||||
<div className="text-sm font-semibold text-blue-900 group-hover:text-blue-700 line-clamp-2">
|
||||
{item.title}
|
||||
</div>
|
||||
{item.summary && (
|
||||
<div className="text-xs text-gray-600 line-clamp-2 mt-1">
|
||||
{item.summary}
|
||||
</div>
|
||||
)}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user