107 lines
3.9 KiB
TypeScript
107 lines
3.9 KiB
TypeScript
|
import { useMemo, useState } from 'react'
|
|||
|
|
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
|
|||
|
|
import { Link } from 'react-router-dom'
|
|||
|
|
import { getSyncStatus, listCategories, listChannels, logout, syncSubscriptions } from '../api/client'
|
|||
|
|
import ChannelCard from '../components/ChannelCard'
|
|||
|
|
import CategoryNav, { type CategoryFilter } from '../components/CategoryNav'
|
|||
|
|
|
|||
|
|
function Channels() {
|
|||
|
|
const [search, setSearch] = useState('')
|
|||
|
|
const [filter, setFilter] = useState<CategoryFilter>('all')
|
|||
|
|
const queryClient = useQueryClient()
|
|||
|
|
|
|||
|
|
const categoriesQuery = useQuery({ queryKey: ['categories'], queryFn: listCategories })
|
|||
|
|
|
|||
|
|
const channelsQuery = useQuery({
|
|||
|
|
queryKey: ['channels', filter],
|
|||
|
|
queryFn: () =>
|
|||
|
|
listChannels({
|
|||
|
|
categoryId: typeof filter === 'number' ? filter : undefined,
|
|||
|
|
uncategorized: filter === 'uncategorized',
|
|||
|
|
}),
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const filteredChannels = useMemo(() => {
|
|||
|
|
const data = channelsQuery.data ?? []
|
|||
|
|
if (!search.trim()) return data
|
|||
|
|
const needle = search.trim().toLowerCase()
|
|||
|
|
return data.filter((c) => c.title.toLowerCase().includes(needle))
|
|||
|
|
}, [channelsQuery.data, search])
|
|||
|
|
|
|||
|
|
const syncStatusQuery = useQuery({
|
|||
|
|
queryKey: ['sync-status'],
|
|||
|
|
queryFn: getSyncStatus,
|
|||
|
|
refetchInterval: (query) => (query.state.data?.subscriptions.running ? 1500 : false),
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const syncMutation = useMutation({
|
|||
|
|
mutationFn: syncSubscriptions,
|
|||
|
|
onSuccess: () => {
|
|||
|
|
queryClient.invalidateQueries({ queryKey: ['channels'] })
|
|||
|
|
queryClient.invalidateQueries({ queryKey: ['sync-status'] })
|
|||
|
|
},
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const logoutMutation = useMutation({
|
|||
|
|
mutationFn: logout,
|
|||
|
|
onSuccess: () => {
|
|||
|
|
queryClient.invalidateQueries({ queryKey: ['auth-status'] })
|
|||
|
|
},
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const running = syncStatusQuery.data?.subscriptions.running
|
|||
|
|
const categories = categoriesQuery.data ?? []
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="channels-screen">
|
|||
|
|
<header>
|
|||
|
|
<h1>Каналы</h1>
|
|||
|
|
<div className="actions">
|
|||
|
|
<Link to="/">Лента</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?.subscriptions.status === 'failed' && (
|
|||
|
|
<p className="error">Последняя синхронизация завершилась ошибкой: {syncStatusQuery.data.subscriptions.error}</p>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
<div className="layout">
|
|||
|
|
<CategoryNav categories={categories} value={filter} onChange={setFilter} />
|
|||
|
|
|
|||
|
|
<div className="content">
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
placeholder="Поиск по названию канала"
|
|||
|
|
value={search}
|
|||
|
|
onChange={(e) => setSearch(e.target.value)}
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
{channelsQuery.isLoading && <p>Загрузка...</p>}
|
|||
|
|
{channelsQuery.isError && <p className="error">Не удалось загрузить каналы</p>}
|
|||
|
|
|
|||
|
|
<ul className="channel-list">
|
|||
|
|
{filteredChannels.map((channel) => (
|
|||
|
|
<ChannelCard key={channel.id} channel={channel} categories={categories} />
|
|||
|
|
))}
|
|||
|
|
</ul>
|
|||
|
|
|
|||
|
|
{channelsQuery.data && channelsQuery.data.length === 0 && (
|
|||
|
|
<p>Каналы не найдены{filter === 'all' ? '. Нажми "Обновить сейчас".' : ' в этой категории.'}</p>
|
|||
|
|
)}
|
|||
|
|
{channelsQuery.data && channelsQuery.data.length > 0 && filteredChannels.length === 0 && (
|
|||
|
|
<p>Ничего не найдено по запросу "{search}".</p>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default Channels
|