правки ошибок и внешнего вида

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 className="mb-auto" style={{width: '18rem'}}>
-            {/*<Card.Img variant="top" src={item.remotePoster}/>*/}
             <Card.Img variant="top" src={image}/>
             <Card.Body>
                 <Card.Title>{item.title}</Card.Title>
-                <Card.Text>
+                <Card.Body>
-                    {descriptionDraw(`Год: ${item.year}`)}
+                    <div>Год: {item.year} <br/></div>
-                    {descriptionDraw(`Рейтинг: ${rating}`)}
+                    <div>Рейтинг: {rating} <br/></div>
-                    {item.sizeOnDisk ? descriptionDraw(`Размер: ${(item.sizeOnDisk / 1000000000).toFixed(2)} Gb`) : null}
+                    {status ? <div>{status}<br/></div> : null}
-                    {status ? descriptionDraw(status) : null}
+                    {item.sizeOnDisk ? <div>Размер: {(item.sizeOnDisk / 1000000000).toFixed(2)} Gb</div> : null}
-                </Card.Text>
+                </Card.Body>
             </Card.Body>
         </Card>
     );

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`,
+        radarr().get("api/v3/qualityprofile")
-            {
-                headers: {
-                    'X-Api-Key': `${process.env.REACT_APP_RADARR_API_KEY}`
-                }
-            })
             .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,
+                radarr().post("api/v3/movie", res)
-                    {headers: {'X-Api-Key': `${process.env.REACT_APP_RADARR_API_KEY}`}})
                     .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`,
+        const folders = await radarr().get("api/v3/rootFolder");
-            {headers: {'X-Api-Key': `${process.env.REACT_APP_RADARR_API_KEY}`}});
         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`,
+        const tags = await radarr().get("api/v3/tag");
-            {headers: {'X-Api-Key': `${process.env.REACT_APP_RADARR_API_KEY}`}});
         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>

src/components/SceletonCompact.js

@@ -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>
-    )
-}

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>
+    )
+}

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;
+}

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`,
+        radarr().get("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));
@@ -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>
                                     ))
                                 )

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`,
+        radarr().get("api/v3/importlist/movie?includeRecommendations=true&includeTrending=true&includePopular=true")
-            {
+            .then((r) => setRecommendations(r.data))
-                headers: {
+            .catch((err) => addToast(err, 'danger'))
-                    'X-Api-Key': `${process.env.REACT_APP_RADARR_API_KEY}`
-                }
-            }).then((r) => setRecommendations(r.data))
-            .catch((err) => console.log(err))
             .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>
     );
 }

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}}`,
+        radarr().get(`api/v3/movie/lookup?term=${query}}`)
-            {
-                headers: {
-                    // "Content-Type": "application/json",
-                    'X-Api-Key': `${process.env.REACT_APP_RADARR_API_KEY}`
-                }
-            })
             .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>
     );
 }