feat: connect listing and search pages to app API

This commit is contained in:
Zhou Weidong committed 2026-11-10 16:07:43 +08:00
1 parent 1b6ca4c339
commit 360a3c35a3
2 files changed
+8 -2

No files matched your search

+4 -1
View File
@@ -3,5 +3,8 @@ import { MediaCard } from '../components/MediaCard';
import { SectionHeading } from '../components/SectionHeading';
import { videos } from '../data/catalog';
import { useAppStore } from '../app/store';
import { appApi } from '../services/appApi';
import { normalizeDrama, normalizePage } from '../services/normalizers';
import { useApi } from '../hooks/useApi';
export function ListingPage({ type }) { const { locale } = useAppStore(); const title = type === 'shorts' ? locale.shortTitle : type === 'subscriptions' ? locale.channels : type === 'history' ? locale.history : locale.library; return <><SectionHeading title={title} /><div className="video-grid">{videos.map((video) => <MediaCard key={video.id} video={video} />)}</div></>; }
export function ListingPage({ type }) { const { locale } = useAppStore(); const title = type === 'shorts' ? locale.shortTitle : type === 'subscriptions' ? locale.channels : type === 'history' ? locale.history : locale.library; const api = useApi(() => appApi.dramas().then((payload) => normalizePage(payload).list.map((item) => normalizeDrama(item, locale.code))), [locale.code]); const items = api.data?.length ? api.data : videos; return <><SectionHeading title={title} /><div className="api-note">{api.loading ? locale.loading : api.error ? locale.apiFallback : ''}</div><div className="video-grid">{items.map((video) => <MediaCard key={video.id} video={video} />)}</div></>; }
+4 -1
View File
@@ -4,5 +4,8 @@ import { MediaCard } from '../components/MediaCard';
import { SectionHeading } from '../components/SectionHeading';
import { useAppStore } from '../app/store';
import { searchCatalog } from '../services/catalogService';
import { appApi } from '../services/appApi';
import { normalizeDrama, normalizePage } from '../services/normalizers';
import { useApi } from '../hooks/useApi';
export function SearchPage() { const { locale } = useAppStore(); const [params] = useSearchParams(); const query = params.get('q') || ''; const results = searchCatalog(query, '', 0); return <><SectionHeading title={query ? `Search results for “${query}”` : locale.picks} /><div className="video-grid">{results.map((video) => <MediaCard key={video.id} video={video} />)}</div></>; }
export function SearchPage() { const { locale } = useAppStore(); const [params] = useSearchParams(); const query = params.get('q') || ''; const api = useApi(() => appApi.dramas().then((payload) => normalizePage(payload).list.map((item) => normalizeDrama(item, locale.code))), [locale.code]); const source = api.data?.length ? api.data : searchCatalog('', '', 0); const normalizedQuery = query.toLowerCase(); const results = source.filter((video) => `${video.title} ${video.channel} ${video.genre}`.toLowerCase().includes(normalizedQuery)); return <><SectionHeading title={query ? `Search results for “${query}”` : locale.picks} /><div className="api-note">{api.loading ? locale.loading : api.error ? locale.apiFallback : ''}</div><div className="video-grid">{results.map((video) => <MediaCard key={video.id} video={video} />)}</div></>; }