From de8264d0e636128d0d9d03a125ef426d68a07f8c Mon Sep 17 00:00:00 2001
From: "Kayashov.SM" <kayshovcm@answer-42.ru>
Date: Wed, 10 Sep 2025 23:14:49 +0400
Subject: [PATCH] =?UTF-8?q?=D0=BF=D1=80=D0=B0=D0=B2=D0=BA=D0=B8=20=D0=BE?=
 =?UTF-8?q?=D1=88=D0=B8=D0=B1=D0=BE=D0=BA=20=D0=B8=20=D0=B2=D0=BD=D0=B5?=
 =?UTF-8?q?=D1=88=D0=BD=D0=B5=D0=B3=D0=BE=20=D0=B2=D0=B8=D0=B4=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CardCompact.js         | 24 +++++++---------------
 src/components/RecommendationModal.js | 29 ++++++++++-----------------
 src/components/SceletonCompact.js     | 16 ---------------
 src/components/SkeletonCompact.js     | 18 +++++++++++++++++
 src/contexts/client.js                | 23 +++++++++++++++++++++
 src/pages/HomePage.js                 |  9 ++++-----
 src/pages/RecommendationPage.js       | 19 ++++++++----------
 src/pages/SearchPage.js               | 16 ++++++---------
 8 files changed, 77 insertions(+), 77 deletions(-)
 delete mode 100644 src/components/SceletonCompact.js
 create mode 100644 src/components/SkeletonCompact.js
 create mode 100644 src/contexts/client.js

diff --git a/src/components/CardCompact.js b/src/components/CardCompact.js
index 1043050..7ed593c 100644
--- a/src/components/CardCompact.js
+++ b/src/components/CardCompact.js
@@ -1,33 +1,23 @@
 import React from 'react';
 import {Card} from 'react-bootstrap';
 
-const descriptionDraw = (text) => {
-    return (
-        <>
-            {text} <br/>
-        </>
-    )
-}
-
 const CardCompact = ({item}) => {
-    console.log(item);
     const image = item?.images?.length > 0 ? item.images[0]?.remoteUrl : null;
     const rating = item.ratings?.imdb?.value ?? null;
     const status = (item.monitored || item.hasFile) ? (
         item.hasFile ? "Статус: Загружен" : "Статус: Загружается"
     ) : null;
     return (
-        <Card className="mb-3" style={{width: '18rem'}}>
-            {/*<Card.Img variant="top" src={item.remotePoster}/>*/}
+        <Card className="mb-auto" style={{width: '18rem'}}>
             <Card.Img variant="top" src={image}/>
             <Card.Body>
                 <Card.Title>{item.title}</Card.Title>
-                <Card.Text>
-                    {descriptionDraw(`Год: ${item.year}`)}
-                    {descriptionDraw(`Рейтинг: ${rating}`)}
-                    {item.sizeOnDisk ? descriptionDraw(`Размер: ${(item.sizeOnDisk / 1000000000).toFixed(2)} Gb`) : null}
-                    {status ? descriptionDraw(status) : null}
-                </Card.Text>
+                <Card.Body>
+                    <div>Год: {item.year} <br/></div>
+                    <div>Рейтинг: {rating} <br/></div>
+                    {status ? <div>{status}<br/></div> : null}
+                    {item.sizeOnDisk ? <div>Размер: {(item.sizeOnDisk / 1000000000).toFixed(2)} Gb</div> : null}
+                </Card.Body>
             </Card.Body>
         </Card>
     );
diff --git a/src/components/RecommendationModal.js b/src/components/RecommendationModal.js
index 9681c10..5f6ad97 100644
--- a/src/components/RecommendationModal.js
+++ b/src/components/RecommendationModal.js
@@ -2,6 +2,7 @@ import React, {useEffect, useState} from 'react';
 import {Button, Col, Container, FormCheck, FormSelect, Modal, Row} from 'react-bootstrap';
 import axios from "axios";
 import {useToast} from "../hooks/useToast";
+import {radarr} from "../contexts/client";
 
 const movieMonitor = [
     {
@@ -22,24 +23,18 @@ const RecommendationModal = ({show, handleClose, item, serial, handleSave}) => {
     const {addToast} = useToast();
 
     useEffect(() => {
-        axios.get(`${process.env.REACT_APP_RADARR_HOST}/api/v3/qualityprofile`,
-            {
-                headers: {
-                    'X-Api-Key': `${process.env.REACT_APP_RADARR_API_KEY}`
-                }
-            })
+        radarr().get("api/v3/qualityprofile")
             .then((r) => {
                 setMovieQuality(r.data)
             })
-            .catch(console.error);
+            .catch((err) => addToast(err, 'danger'));
     }, []);
 
     const handleSubmit = () => {
         const request = !serial ? createMovieRequest : null;
         request()
             .then(res => {
-                axios.post(`${process.env.REACT_APP_RADARR_HOST}/api/v3/movie`, res,
-                    {headers: {'X-Api-Key': `${process.env.REACT_APP_RADARR_API_KEY}`}})
+                radarr().post("api/v3/movie", res)
                     .then(() => handleSave(item, serial))
                     .catch((err) => addToast(err, 'danger'));
             })
@@ -47,11 +42,11 @@ const RecommendationModal = ({show, handleClose, item, serial, handleSave}) => {
     }
 
     const createMovieRequest = async () => {
-        if(!monitor) {
+        if (!monitor) {
             // eslint-disable-next-line no-throw-literal
             throw 'Проверьте пункт отслеживания';
         }
-        if(!quality) {
+        if (!quality) {
             // eslint-disable-next-line no-throw-literal
             throw 'Необходимо указать качество';
         }
@@ -64,18 +59,16 @@ const RecommendationModal = ({show, handleClose, item, serial, handleSave}) => {
             monitor: monitor,
             searchForMovie: true
         }
-        const folders = await axios.get(`${process.env.REACT_APP_RADARR_HOST}/api/v3/rootFolder`,
-            {headers: {'X-Api-Key': `${process.env.REACT_APP_RADARR_API_KEY}`}});
+        const folders = await radarr().get("api/v3/rootFolder");
         request.rootFolderPath = folders.data.find((d) => d.path.includes(film ? "film" : "mult")).path;
 
-        const tags = await axios.get(`${process.env.REACT_APP_RADARR_HOST}/api/v3/tag`,
-            {headers: {'X-Api-Key': `${process.env.REACT_APP_RADARR_API_KEY}`}});
+        const tags = await radarr().get("api/v3/tag");
         request.tags = tags.data.filter((t) => t.label === (film ? "film" : "mult")).map((t) => t.id)
 
         return request;
     }
 
-    if(!item) {
+    if (!item) {
         return null;
     }
 
@@ -90,7 +83,7 @@ const RecommendationModal = ({show, handleClose, item, serial, handleSave}) => {
                         <Col sm={{span: 3}}>
                             <img width="100%" className='mb-3' src={item.remotePoster} alt={item.title}/>
                         </Col>
-                        <div className="col-9 container text-center">
+                        <Col className="col-9 container text-center">
                             <Row>
                                 <div className="col">
                                     <p>{item.overview}</p>
@@ -126,7 +119,7 @@ const RecommendationModal = ({show, handleClose, item, serial, handleSave}) => {
                                     </FormSelect>
                                 </Col>
                             </Row>
-                        </div>
+                        </Col>
                     </Row>
 
                     <Button variant={'primary'} onClick={() => handleSubmit()}>Скачать</Button>
diff --git a/src/components/SceletonCompact.js b/src/components/SceletonCompact.js
deleted file mode 100644
index 0d0dd2c..0000000
--- a/src/components/SceletonCompact.js
+++ /dev/null
@@ -1,16 +0,0 @@
-export function SceletonCompact() {
-    return (
-        <div className="card" aria-hidden="true" style={{width:'18rem', height: '30rem'}}>
-            <div className="card-img-top" style={{background: 'grey', width: '18rem', height: '30rem'}} />
-            <div className="card-body">
-                <h5 className="card-title placeholder-glow">
-                    <span className="placeholder col-6"></span>
-                </h5>
-                <p className="card-text placeholder-glow">
-                    <span className="placeholder col-8"></span>
-                    <span className="placeholder col-8"></span>
-                </p>
-            </div>
-        </div>
-    )
-}
\ No newline at end of file
diff --git a/src/components/SkeletonCompact.js b/src/components/SkeletonCompact.js
new file mode 100644
index 0000000..c6e26ae
--- /dev/null
+++ b/src/components/SkeletonCompact.js
@@ -0,0 +1,18 @@
+import {Card, CardBody, CardImg, CardText, CardTitle, Placeholder} from "react-bootstrap";
+
+export function SkeletonCompact() {
+    return (
+        <Card aria-hidden="true" style={{width: '18rem', height: '30rem'}}>
+            <CardImg className="card-img-top" style={{background: 'grey', width: '18rem', height: '30rem'}}/>
+            <CardBody>
+                <CardTitle className="placeholder-glow">
+                    <Placeholder className="col-6"></Placeholder>
+                </CardTitle>
+                <CardText className="placeholder-glow">
+                    <Placeholder className="col-8"></Placeholder>
+                    <Placeholder className="col-8"></Placeholder>
+                </CardText>
+            </CardBody>
+        </Card>
+    )
+}
\ No newline at end of file
diff --git a/src/contexts/client.js b/src/contexts/client.js
new file mode 100644
index 0000000..2e1590c
--- /dev/null
+++ b/src/contexts/client.js
@@ -0,0 +1,23 @@
+import axios from "axios";
+
+const host = "192.168.1.100:30011";
+// const host = "tracker.kayashov.keenetic.pro";
+
+export const radarr = () => {
+    const res = axios;
+    // res.defaults.baseURL = `${window.location.protocol}//${host}/radarr/`;
+    res.defaults.baseURL = `${window.location.protocol}//${host}/`;
+    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['Accept'] = 'application/json';
+    return res;
+}
+
+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['Accept'] = 'application/json';
+    return res;
+}
\ No newline at end of file
diff --git a/src/pages/HomePage.js b/src/pages/HomePage.js
index 4611a0b..3ed98e6 100644
--- a/src/pages/HomePage.js
+++ b/src/pages/HomePage.js
@@ -1,9 +1,9 @@
 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";
+import {SkeletonCompact} from "../components/SkeletonCompact";
+import {radarr} from "../contexts/client";
 
 const Home = () => {
     const [loading, setLoading] = useState(false);
@@ -13,8 +13,7 @@ const Home = () => {
 
     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}})
+        radarr().get("api/v3/movie")
             .then((r) => setMovies(r.data))
             .catch((err) => addToast(err, 'alert'))
             .finally(() => setLoading(false));
@@ -35,7 +34,7 @@ const Home = () => {
                                     // Отображаем 10 скелетонов
                                     Array.from({length: 10}, (_, index) => (
                                         <Col key={`skeleton-${index}`}>
-                                            <SceletonCompact key={index} width={300} height={400}/>
+                                            <SkeletonCompact key={index} width={300} height={400}/>
                                         </Col>
                                     ))
                                 )
diff --git a/src/pages/RecommendationPage.js b/src/pages/RecommendationPage.js
index 7548f62..302156e 100644
--- a/src/pages/RecommendationPage.js
+++ b/src/pages/RecommendationPage.js
@@ -1,10 +1,10 @@
 import React, {useEffect, useState} from 'react';
-import axios from "axios";
 import CardCompact from "../components/CardCompact";
-import {SceletonCompact} from "../components/SceletonCompact";
+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([]);
@@ -15,13 +15,9 @@ export function Recommendation() {
 
     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))
+        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));
     }, []);
 
@@ -51,7 +47,7 @@ export function Recommendation() {
                         // Отображаем 10 скелетонов
                         Array.from({length: 10}, (_, index) => (
                             <Col key={`skeleton-${index}`}>
-                                <SceletonCompact key={index} width={300} height={400}/>
+                                <SkeletonCompact key={index} width={300} height={400}/>
                             </Col>
                         ))
                     )
@@ -61,7 +57,8 @@ export function Recommendation() {
                         </Col>
                     ))}
             </Row>
-            <RecommendationModal show={modalView} handleClose={handleCloseModal} item={item} handleSave={handleDownload}/>
+            <RecommendationModal show={modalView} handleClose={handleCloseModal} item={item}
+                                 handleSave={handleDownload}/>
         </Container>
     );
 }
\ No newline at end of file
diff --git a/src/pages/SearchPage.js b/src/pages/SearchPage.js
index 30eb164..d707d1c 100644
--- a/src/pages/SearchPage.js
+++ b/src/pages/SearchPage.js
@@ -1,9 +1,9 @@
 import React, {useEffect, useMemo, useState} from 'react';
-import axios from "axios";
 import CardExtend from "../components/CardExtend";
 import {Alert, Container, InputGroup, Row} from "react-bootstrap";
 import RecommendationModal from "../components/RecommendationModal";
 import {useToast} from "../hooks/useToast";
+import {radarr} from "../contexts/client";
 
 export function Search() {
     const [query, setQuery] = useState('');
@@ -22,13 +22,7 @@ export function Search() {
             return;
         }
         setLoadMovies(true);
-        axios.get(`${process.env.REACT_APP_RADARR_HOST}/api/v3/movie/lookup?term=${query}}`,
-            {
-                headers: {
-                    // "Content-Type": "application/json",
-                    'X-Api-Key': `${process.env.REACT_APP_RADARR_API_KEY}`
-                }
-            })
+        radarr().get(`api/v3/movie/lookup?term=${query}}`)
             .then((r) => setResultMovies(r.data))
             .catch((err) => setErrorMovies(err))
             .finally(() => setLoadMovies(false));
@@ -89,7 +83,8 @@ export function Search() {
                 <div>
                     <h3>Результаты поиска</h3>
                     <Row>
-                        {resultMovies.map(result => <CardExtend item={result} key={result.id} selectHandle={handleChange}/>)}
+                        {resultMovies.map(result => <CardExtend item={result} key={result.id}
+                                                                selectHandle={handleChange}/>)}
                     </Row>
                 </div>
             )}
@@ -99,7 +94,8 @@ export function Search() {
                     Ничего не найдено
                 </Alert>
             )}
-            <RecommendationModal item={selectItem} handleClose={handleCloseModal} show={showModal} serial={false} handleSave={handleSave}/>
+            <RecommendationModal item={selectItem} handleClose={handleCloseModal} show={showModal} serial={false}
+                                 handleSave={handleSave}/>
         </Container>
     );
 }
\ No newline at end of file