добавлено апи сонарр для главной страницы

src/contexts/client.js

@@ -16,7 +16,7 @@ export const sonarr = () => {
     const res = axios;
     res.defaults.baseURL = `${window.location.protocol}//${host}/sonarr/`;
     res.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
-    res.defaults.headers.common['X-Api-Key'] = process.env.REACT_APP_RADARR_API_KEY;
+    res.defaults.headers.common['X-Api-Key'] = process.env.REACT_APP_SONARR_API_KEY;
     res.defaults.headers.common['Accept'] = 'application/json';
     return res;
 }

src/pages/HomePage.js

@@ -3,20 +3,27 @@ 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} from "../contexts/client";
+import {radarr, sonarr} from "../contexts/client";
 
 const Home = () => {
-    const [loading, setLoading] = useState(false);
+    const [loadingTv, setLoadingTv] = useState(false);
+    const [loadingMovies, setLoadingMovies] = useState(false);
     const [movies, setMovies] = useState([]);
-    // const [series, setSeries] = useState([]);
+    const [tv, setTv] = useState([]);
     const {addToast} = useToast();
 
     useEffect(() => {
-        setLoading(true);
+        setLoadingMovies(true);
+        setLoadingTv(true);
         radarr().get("api/v3/movie")
             .then((r) => setMovies(r.data))
             .catch((err) => addToast(err, 'alert'))
-            .finally(() => setLoading(false));
+            .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
     }, []);
 
@@ -29,7 +36,7 @@ const Home = () => {
                     </Accordion.Header>
                     <Accordion.Body>
                         <Row>
-                            {loading ?
+                            {loadingMovies ?
                                 (
                                     // Отображаем 10 скелетонов
                                     Array.from({length: 10}, (_, index) => (
@@ -39,7 +46,7 @@ const Home = () => {
                                     ))
                                 )
                                 :
-                                movies.map(rec => (
+                                movies?.map(rec => (
                                     <Col key={`col-${rec.title}-${rec.year}`}>
                                         <CardCompact item={rec} key={`${rec.title}-${rec.year}`}/>
                                     </Col>
@@ -51,7 +58,22 @@ const Home = () => {
                     <Accordion.Header className="mt-5">Сериалы</Accordion.Header>
                     <Accordion.Body>
                         <Row>
-                            <Badge bg="info">Функционал для сериалов пока не реализован</Badge>
+                            {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>