103 lines
3.7 KiB
TypeScript
103 lines
3.7 KiB
TypeScript
|
import { useMutation, useInfiniteQuery, useQuery, useQueryClient } from '@tanstack/react-query'
|
|||
|
|
import { Link } from 'react-router-dom'
|
|||
|
|
import { getFeed, getSyncStatus, listCategories, logout, syncVideos } from '../api/client'
|
|||
|
|
import CategoryNav, { type CategoryFilter } from '../components/CategoryNav'
|
|||
|
|
import VideoCard from '../components/VideoCard'
|
|||
|
|
import { useState } from 'react'
|
|||
|
|
|
|||
|
|
function Feed() {
|
|||
|
|
const [filter, setFilter] = useState<CategoryFilter>('all')
|
|||
|
|
const queryClient = useQueryClient()
|
|||
|
|
|
|||
|
|
const categoriesQuery = useQuery({ queryKey: ['categories'], queryFn: listCategories })
|
|||
|
|
const categories = categoriesQuery.data ?? []
|
|||
|
|
|
|||
|
|
const feedQuery = useInfiniteQuery({
|
|||
|
|
queryKey: ['feed', filter],
|
|||
|
|
queryFn: ({ pageParam }) =>
|
|||
|
|
getFeed({
|
|||
|
|
categoryId: typeof filter === 'number' ? filter : undefined,
|
|||
|
|
uncategorized: filter === 'uncategorized',
|
|||
|
|
cursor: pageParam,
|
|||
|
|
}),
|
|||
|
|
initialPageParam: undefined as string | undefined,
|
|||
|
|
getNextPageParam: (lastPage) => lastPage.next_cursor ?? undefined,
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const syncStatusQuery = useQuery({
|
|||
|
|
queryKey: ['sync-status'],
|
|||
|
|
queryFn: getSyncStatus,
|
|||
|
|
refetchInterval: (query) => (query.state.data?.videos.running ? 1500 : false),
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const syncMutation = useMutation({
|
|||
|
|
mutationFn: syncVideos,
|
|||
|
|
onSuccess: () => {
|
|||
|
|
queryClient.invalidateQueries({ queryKey: ['feed'] })
|
|||
|
|
queryClient.invalidateQueries({ queryKey: ['sync-status'] })
|
|||
|
|
},
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const logoutMutation = useMutation({
|
|||
|
|
mutationFn: logout,
|
|||
|
|
onSuccess: () => {
|
|||
|
|
queryClient.invalidateQueries({ queryKey: ['auth-status'] })
|
|||
|
|
},
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const running = syncStatusQuery.data?.videos.running
|
|||
|
|
const items = feedQuery.data?.pages.flatMap((page) => page.items) ?? []
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="feed-screen">
|
|||
|
|
<header>
|
|||
|
|
<h1>Лента</h1>
|
|||
|
|
<div className="actions">
|
|||
|
|
<Link to="/channels">Каналы</Link>
|
|||
|
|
<Link to="/categories">Категории</Link>
|
|||
|
|
<button onClick={() => syncMutation.mutate()} disabled={running}>
|
|||
|
|
{running ? 'Синхронизация...' : 'Обновить сейчас'}
|
|||
|
|
</button>
|
|||
|
|
<button onClick={() => logoutMutation.mutate()}>Выйти</button>
|
|||
|
|
</div>
|
|||
|
|
</header>
|
|||
|
|
|
|||
|
|
{syncMutation.isError && <p className="error">{(syncMutation.error as Error).message}</p>}
|
|||
|
|
{syncStatusQuery.data?.videos.status === 'failed' && (
|
|||
|
|
<p className="error">Последняя синхронизация видео завершилась ошибкой: {syncStatusQuery.data.videos.error}</p>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
<div className="layout">
|
|||
|
|
<CategoryNav categories={categories} value={filter} onChange={setFilter} />
|
|||
|
|
|
|||
|
|
<div className="content">
|
|||
|
|
{feedQuery.isLoading && <p>Загрузка...</p>}
|
|||
|
|
{feedQuery.isError && <p className="error">Не удалось загрузить ленту</p>}
|
|||
|
|
|
|||
|
|
<ul className="video-grid">
|
|||
|
|
{items.map((video) => (
|
|||
|
|
<VideoCard key={video.youtube_video_id} video={video} />
|
|||
|
|
))}
|
|||
|
|
</ul>
|
|||
|
|
|
|||
|
|
{!feedQuery.isLoading && items.length === 0 && (
|
|||
|
|
<p>Видео пока нет. Нажми "Обновить сейчас" или проверь, есть ли каналы в этой категории.</p>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{feedQuery.hasNextPage && (
|
|||
|
|
<button
|
|||
|
|
className="load-more"
|
|||
|
|
onClick={() => feedQuery.fetchNextPage()}
|
|||
|
|
disabled={feedQuery.isFetchingNextPage}
|
|||
|
|
>
|
|||
|
|
{feedQuery.isFetchingNextPage ? 'Загрузка...' : 'Показать ещё'}
|
|||
|
|
</button>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default Feed
|