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

src/pages/HomePage.js

@@ -0,0 +1,64 @@
+import React, {useEffect, useState} from 'react';
+import {Accordion, Badge, Col, Container, Row} from "react-bootstrap";
+import CardCompact from "../components/CardCompact";
+import axios from "axios";
+import {useToast} from "../hooks/useToast";
+import {SceletonCompact} from "../components/SceletonCompact";
+
+const Home = () => {
+    const [loading, setLoading] = useState(false);
+    const [movies, setMovies] = useState([]);
+    // const [series, setSeries] = useState([]);
+    const {addToast} = useToast();
+
+    useEffect(() => {
+        setLoading(true);
+        axios.get(`${process.env.REACT_APP_RADARR_HOST}/api/v3/movie`,
+            {headers: {'X-Api-Key': process.env.REACT_APP_RADARR_API_KEY}})
+            .then((r) => setMovies(r.data))
+            .catch((err) => addToast(err, 'alert'))
+            .finally(() => setLoading(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 className='row-cols-auto'>
+                            {loading ?
+                                (
+                                    // Отображаем 10 скелетонов
+                                    Array.from({length: 10}, (_, index) => (
+                                        <Col key={`skeleton-${index}`}>
+                                            <SceletonCompact 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>
+                            <Badge bg="info">Функционал для сериалов пока не реализован</Badge>
+                        </Row>
+                    </Accordion.Body>
+                </Accordion.Item>
+            </Accordion>
+        </Container>
+    );
+};
+
+export default Home;
+