124 lines
3.6 KiB
TypeScript
124 lines
3.6 KiB
TypeScript
import React, { useEffect, useMemo, useState } from 'react'
|
|
import { Header } from '../components/Header'
|
|
import { Footer } from '../components/Footer'
|
|
import { PostCard } from '../components/PostCard'
|
|
import { PostCardSkeleton } from '../components/PostCardSkeleton'
|
|
import { Posts } from '../clientsdk/sdk.gen'
|
|
import { createClient } from '../clientsdk/client'
|
|
import { customQuerySerializer } from '../clientsdk/querySerializer'
|
|
import type { Post } from '../clientsdk/types.gen'
|
|
import { TENANT_API_KEY, TENANT_SLUG, API_URL } from '../config'
|
|
import { isCategory } from '../utils/payload'
|
|
import { useI18n } from '../i18n/useI18n'
|
|
|
|
type ListResponse<T> = { docs: T[] }
|
|
|
|
type ListPostsResult = { data?: ListResponse<Post> }
|
|
|
|
const client = createClient({
|
|
baseUrl: API_URL,
|
|
querySerializer: customQuerySerializer,
|
|
headers: {
|
|
'X-Tenant-Slug': TENANT_SLUG,
|
|
'X-API-Key': TENANT_API_KEY,
|
|
},
|
|
})
|
|
|
|
const stripHtml = (html: string): string => {
|
|
const tmp = document.createElement('div')
|
|
tmp.innerHTML = html
|
|
return tmp.textContent || tmp.innerText || ''
|
|
}
|
|
|
|
const formatDate = (dateString: string): string => {
|
|
const date = new Date(dateString)
|
|
return date.toLocaleDateString('th-TH', {
|
|
year: 'numeric',
|
|
month: 'long',
|
|
day: 'numeric',
|
|
})
|
|
}
|
|
|
|
const getCategoryTitle = (post: Post): string | undefined => {
|
|
const first = post.categories?.[0]
|
|
return isCategory(first) ? first.title : undefined
|
|
}
|
|
|
|
export const News: React.FC = () => {
|
|
const { t } = useI18n()
|
|
const [posts, setPosts] = useState<Post[]>([])
|
|
const [loading, setLoading] = useState(true)
|
|
const [error, setError] = useState<string | null>(null)
|
|
|
|
useEffect(() => {
|
|
const fetchPosts = async () => {
|
|
try {
|
|
setLoading(true)
|
|
setError(null)
|
|
|
|
const response = (await Posts.listPosts({
|
|
client,
|
|
query: {
|
|
limit: 12,
|
|
sort: '-createdAt',
|
|
},
|
|
})) as ListPostsResult
|
|
|
|
setPosts(response.data?.docs ?? [])
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : t('common.loadFailed'))
|
|
console.error('Fetch posts failed:', err)
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
fetchPosts()
|
|
}, [t])
|
|
|
|
const items = useMemo(() => posts, [posts])
|
|
|
|
return (
|
|
<div className="min-h-screen bg-zinc-50 text-zinc-900">
|
|
<Header />
|
|
|
|
<main className="mx-auto w-full max-w-6xl px-4 py-10">
|
|
<header className="mb-10" aria-label={t('news.title')}>
|
|
<h1 className="text-4xl font-semibold tracking-tight">{t('news.title')}</h1>
|
|
<p className="mt-3 max-w-2xl text-zinc-600">{t('news.subtitle')}</p>
|
|
</header>
|
|
|
|
{error ? (
|
|
<div
|
|
role="alert"
|
|
className="rounded-2xl border border-red-200 bg-red-50 px-4 py-3 text-red-800"
|
|
>
|
|
{error}
|
|
</div>
|
|
) : null}
|
|
|
|
<section className="mt-6 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
|
|
{loading
|
|
? Array.from({ length: 6 }).map((_, i) => <PostCardSkeleton key={i} />)
|
|
: items.map((post) => (
|
|
<PostCard
|
|
key={post.id}
|
|
title={post.title}
|
|
excerpt={stripHtml(post.content_html ?? '') || post.title}
|
|
category={getCategoryTitle(post)}
|
|
date={formatDate(post.createdAt)}
|
|
to={`/news/${post.slug}`}
|
|
/>
|
|
))}
|
|
</section>
|
|
|
|
{!loading && items.length === 0 && !error ? (
|
|
<div className="py-14 text-center text-zinc-600">{t('news.empty')}</div>
|
|
) : null}
|
|
</main>
|
|
|
|
<Footer />
|
|
</div>
|
|
)
|
|
}
|