39 lines
1.2 KiB
JavaScript
39 lines
1.2 KiB
JavaScript
import { usePlaylists } from "../api/audio";
|
|
import { Link } from "react-router-dom";
|
|
import { useEffect } from 'react'
|
|
import { useNavigate } from 'react-router-dom'
|
|
|
|
|
|
export default function AudioPlaylists() {
|
|
|
|
const { data, isLoading, isError, error, isFetching } = usePlaylists({})
|
|
|
|
const navigate = useNavigate()
|
|
useEffect(() => {
|
|
if (isError && error?.response?.status === 401) {
|
|
navigate("/login", { replace: true })
|
|
}
|
|
}, [isError, error, navigate])
|
|
|
|
|
|
if (isLoading) return <p className="text-slate-400">Загрузка…</p>
|
|
if (isError) return <p className="text-red-400">Ошибка: {error.message}</p>
|
|
|
|
|
|
const playlists = data?.playlists ?? []
|
|
|
|
if (playlists.length === 0) return <p className="text-slate-400">empty</p>
|
|
|
|
return (
|
|
playlists.map((pl) => (
|
|
<Link key={pl.id} to={`/audio/${pl.id}`} >
|
|
<div className="channel mt-4 bg-zinc-950 border-2 border-zinc-800 rounded-xl p-3">
|
|
<h3 className="text-white text-3xl">{pl.title}</h3>
|
|
<p>videos: {pl.audios_count}</p>
|
|
</div>
|
|
</Link>
|
|
|
|
)
|
|
)
|
|
)
|
|
} |