mvp для просмотра и загрузки фильмов

src/pages/RecommendationPage.js

@@ -0,0 +1,67 @@
+import React, {useEffect, useState} from 'react';
+import axios from "axios";
+import CardCompact from "../components/CardCompact";
+import {SceletonCompact} from "../components/SceletonCompact";
+import RecommendationModal from "../components/RecommendationModal";
+import {Col, Container, Row} from "react-bootstrap";
+import {useToast} from "../hooks/useToast";
+
+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);
+        axios.get(`${process.env.REACT_APP_RADARR_HOST}/api/v3/importlist/movie?includeRecommendations=true&includeTrending=true&includePopular=true`,
+            {
+                headers: {
+                    'X-Api-Key': `${process.env.REACT_APP_RADARR_API_KEY}`
+                }
+            }).then((r) => setRecommendations(r.data))
+            .catch((err) => console.log(err))
+            .finally(() => setLoading(false));
+    }, []);
+
+    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 className='row-cols-auto'>
+                {loading ?
+                    (
+                        // Отображаем 10 скелетонов
+                        Array.from({length: 10}, (_, index) => (
+                            <Col key={`skeleton-${index}`}>
+                                <SceletonCompact 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}/>
+        </Container>
+    );
+}