89 lines
3.9 KiB
JavaScript
89 lines
3.9 KiB
JavaScript
import React, {useEffect, useState} from 'react';
|
||
import {Accordion, Badge, Col, Container, Row} from "react-bootstrap";
|
||
import CardCompact from "../components/CardCompact";
|
||
import {useToast} from "../hooks/useToast";
|
||
import {SkeletonCompact} from "../components/SkeletonCompact";
|
||
import {radarr, sonarr} from "../contexts/client";
|
||
|
||
const Home = () => {
|
||
const [loadingTv, setLoadingTv] = useState(false);
|
||
const [loadingMovies, setLoadingMovies] = useState(false);
|
||
const [movies, setMovies] = useState([]);
|
||
const [tv, setTv] = useState([]);
|
||
const {addToast} = useToast();
|
||
|
||
// На будущую реализацию удаления
|
||
// api/v3/movie/68?deleteFiles=true&addImportExclusion=false
|
||
useEffect(() => {
|
||
setLoadingMovies(true);
|
||
setLoadingTv(true);
|
||
radarr().get("api/v3/movie")
|
||
.then((r) => setMovies(r.data))
|
||
.catch((err) => addToast(err, 'alert'))
|
||
.finally(() => setLoadingMovies(false));
|
||
|
||
sonarr().get("api/v3/series")
|
||
.then((r) => setTv(r.data))
|
||
.catch((err) => addToast(err, 'alert'))
|
||
.finally(() => setLoadingTv(false));
|
||
// eslint-disable-next-line
|
||
}, []);
|
||
|
||
return (
|
||
<Container>
|
||
<Accordion defaultActiveKey={["0"]} alwaysOpen>
|
||
<Accordion.Item eventKey="0">
|
||
<Accordion.Header className="mt-3">
|
||
Фильмы
|
||
</Accordion.Header>
|
||
<Accordion.Body>
|
||
<Row>
|
||
{loadingMovies ?
|
||
(
|
||
// Отображаем 10 скелетонов
|
||
Array.from({length: 10}, (_, index) => (
|
||
<Col key={`skeleton-${index}`}>
|
||
<SkeletonCompact key={index} width={300} height={400}/>
|
||
</Col>
|
||
))
|
||
)
|
||
:
|
||
movies?.map(rec => (
|
||
<Col key={`col-${rec.title}-${rec.year}`}>
|
||
<CardCompact item={rec} key={`${rec.title}-${rec.year}`}/>
|
||
</Col>
|
||
))}
|
||
</Row>
|
||
</Accordion.Body>
|
||
</Accordion.Item>
|
||
<Accordion.Item eventKey={"1"}>
|
||
<Accordion.Header className="mt-5">Сериалы</Accordion.Header>
|
||
<Accordion.Body>
|
||
<Row>
|
||
{loadingTv ?
|
||
(
|
||
// Отображаем 10 скелетонов
|
||
Array.from({length: 10}, (_, index) => (
|
||
<Col key={`skeleton-tv-${index}`}>
|
||
<SkeletonCompact key={index} width={300} height={400}/>
|
||
</Col>
|
||
))
|
||
)
|
||
:
|
||
tv.length > 0 ? tv.map(rec => (
|
||
<Col key={`col-tv-${rec.title}-${rec.year}`}>
|
||
<CardCompact item={rec} key={`${rec.title}-${rec.year}`}/>
|
||
</Col>
|
||
)) :
|
||
<Badge bg="info">Функционал для сериалов пока не реализован</Badge>}
|
||
</Row>
|
||
</Accordion.Body>
|
||
</Accordion.Item>
|
||
</Accordion>
|
||
</Container>
|
||
);
|
||
};
|
||
|
||
export default Home;
|
||
|