правка отправки запроса

src/components/CardCompact.js

@@ -1,33 +1,23 @@
 import React from 'react';
 import {Card} from 'react-bootstrap';
-
-const descriptionDraw = (text) => {
-    return (
-        <>
-            {text} <br/>
-        </>
-    )
-}
+import {getCardContent} from "./contentCard";
 
 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;
+    const cc = getCardContent(item);
+
     return (
-        <Card className="mb-3" style={{width: '18rem'}}>
-            {/*<Card.Img variant="top" src={item.remotePoster}/>*/}
-            <Card.Img variant="top" src={image}/>
+        <Card className="mb-auto mx-auto" style={{width: '20rem'}}>
+            <Card.Img variant="top" src={cc.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>
+                    {cc.rating || cc.rating !== 0 ? <div>Рейтинг: {cc.rating} <br/></div> : null}
+                    {cc.status ? <div>{cc.status}<br/></div> : null}
+                    {cc.size ? <div>Размер: {cc.size} Gb</div> : null}
+                    {(item?.statistics?.seasonCount ? <div>Сезоны: {item.statistics.seasonCount}</div> : null)}
+                    {cc.series ? <div>Серии: {cc.series}</div> : null}
+                </Card.Body>
             </Card.Body>
         </Card>
     );

src/components/CardExtend.js

@@ -1,20 +1,21 @@
 import React from 'react';
 import {Button, Card, Col, Row} from 'react-bootstrap';
+import {getCardContent} from "./contentCard";
 
 const CardExtended = ({item, selectHandle}) => {
-    const rating = item.ratings?.imdb?.value ?? null;
+    const cc = getCardContent(item);
     return (
         <Card className="mb-3" style={{width: '100%'}} onClick={() => selectHandle(item)}>
             <Row>
                 <Col md={3}>
-                    <Card.Img variant="top" src={item.remotePoster} style={{marginTop: '1rem'}}/>
+                    <Card.Img variant="top" src={cc.image} style={{marginTop: '1rem'}}/>
                 </Col>
                 <Col md={9}>
                     <Card.Body>
                         <Card.Title>{item.title}</Card.Title>
                         <Card.Text>
                             <strong>Год:</strong> {item.year}<br/>
-                            <strong>Рейтинг:</strong> {rating}<br/>
+                            <strong>Рейтинг:</strong> {cc.rating}<br/>
                             {item.overview}
                         </Card.Text>
                     </Card.Body>
@@ -22,7 +23,7 @@ const CardExtended = ({item, selectHandle}) => {
             </Row>
             <Row>
                 <Col style={{justifyContent: 'end'}}>
-                    <Button variant={'outline-primary'} title={"Download"}>Загрузить</Button>
+                    <Button variant={'outline-primary'} disabled title={"Download"}>{item.serial ? "Сериал" : "Фильм"}</Button>
                 </Col>
             </Row>
         </Card>

src/components/RecommendationModal.js

@@ -1,18 +1,9 @@
 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";
-
-const movieMonitor = [
-    {
-        id: "movieAndCollection",
-        name: "Все части"
-    },
-    {
-        id: "movieOnly",
-        name: "Только этот фильм"
-    }
-]
+import {radarr, sonarr} from "../contexts/client";
+import {movieMonitor, tvMonitor} from "./monitors";
+import {createRequest} from "./saveRequest";
 
 const RecommendationModal = ({show, handleClose, item, serial, handleSave}) => {
     const [movieQuality, setMovieQuality] = useState([])
@@ -20,62 +11,31 @@ const RecommendationModal = ({show, handleClose, item, serial, handleSave}) => {
     const [monitor, setMonitor] = useState(null)
     const [film, setFilm] = useState(false)
     const {addToast} = useToast();
+    const rating = item?.ratings?.imdb?.value ?? null;
+    const client = serial ? sonarr() : radarr();
+    const monitorArray = serial ? tvMonitor : movieMonitor;
 
     useEffect(() => {
-        axios.get(`${process.env.REACT_APP_RADARR_HOST}/api/v3/qualityprofile`,
-            {
-                headers: {
-                    'X-Api-Key': `${process.env.REACT_APP_RADARR_API_KEY}`
-                }
-            })
+        client.get("api/v3/qualityprofile")
             .then((r) => {
                 setMovieQuality(r.data)
             })
-            .catch(console.error);
+            .catch((err) => addToast(err, 'danger'));
+        // eslint-disable-next-lint
     }, []);
 
     const handleSubmit = () => {
-        const request = !serial ? createMovieRequest : null;
-        request()
+        createRequest(monitor, quality, item, serial, film, client)
             .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}`}})
+                client.post(`api/v3/${serial ? "series" : "movie"}`, res)
                     .then(() => handleSave(item, serial))
-                    .catch((err) => addToast(err, 'danger'));
+                    .catch((err) => addToast(err.message, 'danger'));
+                // console.log(res)
             })
-            .catch((err) => addToast(err, 'danger'));
+            .catch((err) => addToast(err.message, 'danger'));
     }
 
-    const createMovieRequest = async () => {
-        if(!monitor) {
-            // eslint-disable-next-line no-throw-literal
-            throw 'Проверьте пункт отслеживания';
-        }
-        if(!quality) {
-            // eslint-disable-next-line no-throw-literal
-            throw 'Необходимо указать качество';
-        }
-        let request = item;
-        request.id = 0;
-        request.monitored = true;
-        request.qualityProfileId = quality;
-        request.minimumAvailability = "released"
-        request.addOptions = {
-            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}`}});
-        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}`}});
-        request.tags = tags.data.filter((t) => t.label === (film ? "film" : "mult")).map((t) => t.id)
-
-        return request;
-    }
-
-    if(!item) {
+    if (!item) {
         return null;
     }
 
@@ -84,25 +44,30 @@ const RecommendationModal = ({show, handleClose, item, serial, handleSave}) => {
             <Modal.Header closeButton>
                 <Modal.Title>{item.title}</Modal.Title>
             </Modal.Header>
-            <Modal.Body>
-                <Container fluid='xl'>
-                    <Row>
-                        <Col sm={{span: 3}}>
+            <Modal.Body className="d-flex flex-column flex-md-row">
+                <Container fluid>
+                    <Row className="align-items-start">
+                        <Col md={3} className="mb-3">
                             <img width="100%" className='mb-3' src={item.remotePoster} alt={item.title}/>
                         </Col>
-                        <div className="col-9 container text-center">
-                            <Row>
-                                <div className="col">
+                        <Col md={9} className="d-flex flex-column">
+                            <div>
                                 <p>{item.overview}</p>
                             </div>
-                            </Row>
-                            <Row style={{width: '60%'}}>
+                            <div>
+                                <p>Год выпуска: {item.year}</p>
+                            </div>
+                            <div className="mb-4">
+                                <p>Рейтинг: {rating}</p>
+                            </div>
+                            <div>
+                                <Row>
                                     <Col>
                                         <p style={{marginRight: '1rem'}}>Мультик</p>
                                         <FormCheck type='switch' disabled={serial} style={{marginBottom: '1rem'}}
                                                    onChange={() => setFilm(!film)}/>
                                         <p>Фильм</p>
-                                    <FormCheck type='checkbox' disabled={!serial}
+                                        <FormCheck type='checkbox' disabled checked={serial}
                                                    style={{marginBottom: '1rem', marginLeft: '1rem'}}
                                                    label="Сериал"/>
                                     </Col>
@@ -112,7 +77,7 @@ const RecommendationModal = ({show, handleClose, item, serial, handleSave}) => {
                                         <p style={{width: '50%', paddingTop: '1rem'}}>Что отслеживать</p>
                                         <FormSelect onChange={(e) => setMonitor(e.target.value)}>
                                             <option selected value={null}>Выберите пункт из меню</option>
-                                        {movieMonitor.map((m) => <option value={m.id} key={m.id}>{m.name}</option>)}
+                                            {monitorArray.map((m) => <option value={m.id} key={m.id}>{m.name}</option>)}
                                         </FormSelect>
                                     </Col>
                                 </Row>
@@ -127,15 +92,15 @@ const RecommendationModal = ({show, handleClose, item, serial, handleSave}) => {
                                     </Col>
                                 </Row>
                             </div>
+                        </Col>
                     </Row>
-
-                    <Button variant={'primary'} onClick={() => handleSubmit()}>Скачать</Button>
                 </Container>
             </Modal.Body>
             <Modal.Footer>
                 <Button variant="secondary" onClick={() => handleClose()}>
                     Закрыть
                 </Button>
+                <Button variant="primary" onClick={() => handleSubmit()}>Скачать</Button>
             </Modal.Footer>
         </Modal>
     );

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 className="mb-auto" aria-hidden="true" style={{width: '14rem', height: '30rem'}}>
+            <CardImg variant="top" style={{background: 'grey', width: '14rem', height: '30rem'}}/>
+            <CardBody>
+                <CardTitle className="placeholder-glow">
+                    <Placeholder className="col-3"></Placeholder>
+                </CardTitle>
+                <CardText className="placeholder-glow">
+                    <Placeholder className="col-6"></Placeholder>
+                    <Placeholder className="col-6"></Placeholder>
+                </CardText>
+            </CardBody>
+        </Card>
+    )
+}

src/components/contentCard.js

@@ -0,0 +1,33 @@
+export const getCardContent = (item) => {
+    let result = {
+        rating: item.ratings?.imdb?.value ?? item.ratings.value ?? null,
+        status: null,
+        size: null,
+        series: null,
+    };
+
+    if(item.images?.length > 0) {
+        result.image = item.images.find(image => image.coverType === "poster").remoteUrl;
+    }
+
+    if (item.sizeOnDisk) {
+        result.size = item.sizeOnDisk / 1000000000;
+    }
+
+    if (item.monitored || item.hasFile) {
+        result.status = item.hasFile ? "Статус: Загружен" : "Статус: Загружается"
+    }
+
+    if (item.statistics) {
+        const stat = item.statistics
+        result.status = stat.percentOfEpisodes === 100 ? "Статус: Загружен" : "Статус: Загружается"
+
+        result.series = `${stat.episodeFileCount}/${stat.totalEpisodeCount}`
+
+        if (stat.sizeOnDisk) {
+            result.size = (stat.sizeOnDisk / 1000000000).toFixed(2);
+        }
+    }
+
+    return result;
+}

src/components/monitors.js

@@ -0,0 +1,33 @@
+export const movieMonitor = [
+    {
+        id: "movieAndCollection",
+        name: "Все части"
+    },
+    {
+        id: "movieOnly",
+        name: "Только этот фильм"
+    }
+]
+
+export const tvMonitor = [
+    {
+        id: "all",
+        name: "Все серии"
+    },
+    {
+        id: "future",
+        name: "Новые серии"
+    },
+    {
+        id: "firstSeason",
+        name: "Первый сезон"
+    },
+    {
+        id: "lastSeason",
+        name: "Последний сезон"
+    },
+    {
+        id: "latestSeason",
+        name: "Последние сезоны"
+    },
+]

src/components/saveRequest.js

@@ -0,0 +1,49 @@
+export const createRequest = async (monitor, quality, item, serial, film, client) => {
+    if (!monitor) {
+        // eslint-disable-next-line no-throw-literal
+        throw 'Проверьте пункт отслеживания';
+    }
+    if (!quality) {
+        // eslint-disable-next-line no-throw-literal
+        throw 'Необходимо указать качество';
+    }
+    let request = item;
+    request.monitored = true;
+    request.qualityProfileId = quality;
+
+    var addOptions = {
+        monitor: monitor,
+    }
+
+    const folders = await client.get("api/v3/rootFolder");
+    request.rootFolderPath = !serial ?
+        folders.data.find((d) => d.path.includes(film ? "film" : "mult")).path :
+        folders.data[0].path;
+
+    if (!serial) {
+        request.id = 0;
+        request.minimumAvailability = "released"
+        addOptions = {
+            ...addOptions,
+            searchForMovie: true
+        }
+        const tags = await client.get("api/v3/tag");
+        request.tags = tags.data.filter((t) => t.label === (film ? "film" : "mult")).map((t) => t.id)
+    } else {
+        request.seasonFolder = true;
+        addOptions = {
+            ...addOptions,
+            searchForMissingEpisodes: true,
+            searchForCutoffUnmetEpisodes: false
+        }
+
+        delete request.minimumAvailability;
+        delete request.monitorNewItems;
+        delete request.id;
+    }
+
+    delete request.serial;
+    request.addOptions = addOptions;
+
+    return request;
+}

src/contexts/client.js

@@ -0,0 +1,23 @@
+import axios from "axios";
+
+const host = "tracker.kayashov.keenetic.pro";
+
+export const radarr = () => {
+    const res = axios;
+    // res.defaults.baseURL = `http://192.168.1.100:30011/`;
+    res.defaults.baseURL = `${window.location.protocol}//${host}/radarr/`;
+    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.baseURL = `http://192.168.1.100:30009/`;
+    res.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
+    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

@@ -1,23 +1,31 @@
 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, 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();
 
+    // На будущую реализацию удаления
+    // api/v3/movie/68?deleteFiles=true&addImportExclusion=false
     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}})
+        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,17 +37,18 @@ const Home = () => {
                         Фильмы
                     </Accordion.Header>
                     <Accordion.Body>
-                        <Row className='row-cols-auto'>
-                            {loading ?
+                        <Row>
+                            {loadingMovies ?
                                 (
                                     // Отображаем 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>
                                     ))
                                 )
-                                : movies.map(rec => (
+                                :
+                                movies?.map(rec => (
                                     <Col key={`col-${rec.title}-${rec.year}`}>
                                         <CardCompact item={rec} key={`${rec.title}-${rec.year}`}/>
                                     </Col>
@@ -51,7 +60,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>

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,14 +15,11 @@ 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));
+        // eslint-disable-next-lint
     }, []);
 
     function handleModal(item) {
@@ -45,13 +42,13 @@ export function Recommendation() {
     return (
         <Container className="text-center">
             <h2 className="mt-3">Рекомендации</h2>
-            <Row className='row-cols-auto'>
+            <Row>
                 {loading ?
                     (
                         // Отображаем 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 +58,8 @@ export function Recommendation() {
                         </Col>
                     ))}
             </Row>
-            <RecommendationModal show={modalView} handleClose={handleCloseModal} item={item} handleSave={handleDownload}/>
+            <RecommendationModal show={modalView} handleClose={handleCloseModal} item={item}
+                                 handleSave={handleDownload} serial={false}/>
         </Container>
     );
 }

src/pages/SearchPage.js

@@ -1,17 +1,16 @@
 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, sonarr} from "../contexts/client";
 
 export function Search() {
     const [query, setQuery] = useState('');
+    const [serial, setSerial] = useState(false);
     const [loadMovies, setLoadMovies] = useState(false);
-    // const [loadTv, setLoadTv] = useState(false);
-    const [errorMovies, setErrorMovies] = useState(false);
-    // const [errorTv, setErrorTv] = useState(false);
-    // const [resultTv, setResultTv] = useState([]);
+    const [loadTv, setLoadTv] = useState(false);
+    const [resultTv, setResultTv] = useState([]);
     const [resultMovies, setResultMovies] = useState([]);
     const [showModal, setShowModal] = useState(false);
     const [selectItem, setSelectItem] = useState({});
@@ -22,29 +21,44 @@ 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) => {
+                const movies = r.data.map((m) => {
+                    return {
+                        ...m,
+                        serial: false
                     }
                 })
-            .then((r) => setResultMovies(r.data))
-            .catch((err) => setErrorMovies(err))
+                setResultMovies(movies);
+            })
+            .catch((err) => addToast(err, 'alert'))
             .finally(() => setLoadMovies(false));
 
+        setLoadTv(true);
+        sonarr().get(`api/v3/series/lookup?term=${query}}`)
+            .then((r) => {
+                const series = r.data.map((s) => {
+                    return {
+                        ...s,
+                        serial: true
+                    }
+                })
+                setResultTv(series)
+            }).catch((err) => addToast(err, 'alert'))
+            .finally(() => setLoadTv(false));
+        // eslint-disable-next-lin
     }, [query]);
 
     const handleChange = (item) => {
         setSelectItem(item);
         setShowModal(true);
+        setSerial(item.serial);
     }
 
     const result = useMemo(() => {
-        let array = resultMovies;
-        // array.concat(resultTv);
+        let array = resultMovies.concat(resultTv);
         return array.sort((a, b) => a.title.localeCompare(b.title));
-    }, [resultMovies]);
+    }, [resultMovies, resultTv]);
 
     const handleCloseModal = () => {
         setShowModal(false);
@@ -55,15 +69,12 @@ export function Search() {
         let nState = resultMovies;
         nState = nState.filter(i => i.title !== item.title && i.year !== item.year);
 
-        const func = setResultMovies;
+        const func = serial ? setResultTv : setResultMovies;
         func(nState);
         addToast(`${item.title} добавлен в список загрузок`, 'success');
         handleCloseModal();
     }
 
-    // Используем хук useAxios для обработки запросов
-    // const {response, loading, errorTv} = useAxios('/api/search', 'get', {query});
-
     return (
         <Container style={{marginTop: 5}}>
             <h2>Поиск</h2>
@@ -79,27 +90,25 @@ export function Search() {
                 </InputGroup>
             </form>
 
-            {loadMovies && <div className="text-center">Загрузка...</div>}
-
-            {errorMovies && (
-                <Alert variant="danger">{errorMovies}</Alert>
-            )}
+            {(loadMovies || loadTv) && <div className="text-center">Загрузка...</div>}
 
             {result && result.length > 0 && (
                 <div>
                     <h3>Результаты поиска</h3>
                     <Row>
-                        {resultMovies.map(result => <CardExtend item={result} key={result.id} selectHandle={handleChange}/>)}
+                        {result.map(result => <CardExtend item={result} key={result.id}
+                                                                selectHandle={handleChange}/>)}
                     </Row>
                 </div>
             )}
 
-            {(!loadMovies && !errorMovies && (!resultMovies || !result.length)) && (
+            {((!loadMovies && (!resultMovies || !result.length) && (!loadTv && (!resultTv || !result.length))) &&
                 <Alert variant='info'>
                     Ничего не найдено
                 </Alert>
             )}
-            <RecommendationModal item={selectItem} handleClose={handleCloseModal} show={showModal} serial={false} handleSave={handleSave}/>
+            <RecommendationModal item={selectItem} handleClose={handleCloseModal} show={showModal} serial={serial}
+                                 handleSave={handleSave}/>
         </Container>
     );
 }