65 lines
2.5 KiB
JavaScript
65 lines
2.5 KiB
JavaScript
import React, {useEffect, useState} from 'react';
|
|
import CardCompact from "../components/CardCompact";
|
|
import {SkeletonCompact} from "../components/SkeletonCompact";
|
|
import RecommendationModal from "../components/RecommendationModal";
|
|
import {Col, Container, Row} from "react-bootstrap";
|
|
import {useToast} from "../hooks/useToast";
|
|
import {radarr} from "../contexts/client";
|
|
|
|
export function Recommendation() {
|
|
const [recommendations, setRecommendations] = useState([]);
|
|
const [loading, setLoading] = useState(false);
|
|
const [modalView, setModalView] = useState(false);
|
|
const [item, setItem] = useState({});
|
|
const {addToast} = useToast();
|
|
|
|
useEffect(() => {
|
|
setLoading(true);
|
|
radarr().get("api/v3/importlist/movie?includeRecommendations=true&includeTrending=true&includePopular=true")
|
|
.then((r) => setRecommendations(r.data))
|
|
.catch((err) => addToast(err, 'danger'))
|
|
.finally(() => setLoading(false));
|
|
// eslint-disable-next-lint
|
|
}, []);
|
|
|
|
function handleModal(item) {
|
|
setModalView(true);
|
|
setItem(item)
|
|
}
|
|
|
|
const handleCloseModal = () => {
|
|
setModalView(false);
|
|
setItem({})
|
|
}
|
|
|
|
const handleDownload = (item) => {
|
|
const nState = recommendations.filter(r => r.title !== item.title && r.year !== item.year);
|
|
setRecommendations(nState);
|
|
addToast(`${item.title} добавлен в список загрузок`, 'success');
|
|
handleCloseModal();
|
|
}
|
|
|
|
return (
|
|
<Container className="text-center">
|
|
<h2 className="mt-3">Рекомендации</h2>
|
|
<Row>
|
|
{loading ?
|
|
(
|
|
// Отображаем 10 скелетонов
|
|
Array.from({length: 10}, (_, index) => (
|
|
<Col key={`skeleton-${index}`}>
|
|
<SkeletonCompact key={index} width={300} height={400}/>
|
|
</Col>
|
|
))
|
|
)
|
|
: recommendations.map(rec => (
|
|
<Col key={`col-${rec.title}-${rec.year}`} onClick={() => handleModal(rec)}>
|
|
<CardCompact item={rec} key={`${rec.title}-${rec.year}`}/>
|
|
</Col>
|
|
))}
|
|
</Row>
|
|
<RecommendationModal show={modalView} handleClose={handleCloseModal} item={item}
|
|
handleSave={handleDownload} serial={false}/>
|
|
</Container>
|
|
);
|
|
} |