From 0d030220c5f03d8c3f0695402d3cd63021d70c49 Mon Sep 17 00:00:00 2001
From: "Kayashov.SM" <kayshovcm@answer-42.ru>
Date: Mon, 29 Sep 2025 17:57:05 +0400
Subject: [PATCH] =?UTF-8?q?=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BD=D0=BE=20=D0=B0=D0=BF=D0=B8=20=D1=81=D0=BE=D0=BD=D0=B0?=
 =?UTF-8?q?=D1=80=D1=80=20=D0=B4=D0=BB=D1=8F=20=D0=B3=D0=BB=D0=B0=D0=B2?=
 =?UTF-8?q?=D0=BD=D0=BE=D0=B9=20=D1=81=D1=82=D1=80=D0=B0=D0=BD=D0=B8=D1=86?=
 =?UTF-8?q?=D1=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/contexts/client.js |  2 +-
 src/pages/HomePage.js  | 38 ++++++++++++++++++++++++++++++--------
 2 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/src/contexts/client.js b/src/contexts/client.js
index da06c75..16ae78f 100644
--- a/src/contexts/client.js
+++ b/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;
 }
\ No newline at end of file
diff --git a/src/pages/HomePage.js b/src/pages/HomePage.js
index fd470f8..0d87aa8 100644
--- a/src/pages/HomePage.js
+++ b/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>