улучшено наполнение карточек фильмов

src/components/CardCompact.js

@@ -1,22 +1,22 @@
 import React from 'react';
 import {Card} from 'react-bootstrap';
+import {getCardContent} from "./contentCard";
 
 const CardCompact = ({item}) => {
-    const image = item?.images?.length > 0 ? item.images[0]?.remoteUrl : null;
+    const cc = getCardContent(item);
-    const rating = item.ratings?.imdb?.value ?? null;
+
-    const status = (item.monitored || item.hasFile) ? (
-        item.hasFile ? "Статус: Загружен" : "Статус: Загружается"
-    ) : null;
     return (
         <Card className="mb-auto mx-auto" style={{width: '20rem'}}>
-            <Card.Img variant="top" src={image}/>
+            <Card.Img variant="top" src={cc.image}/>
             <Card.Body>
                 <Card.Title>{item.title}</Card.Title>
                 <Card.Body>
                     <div>Год: {item.year} <br/></div>
-                    <div>Рейтинг: {rating} <br/></div>
+                    <div>Рейтинг: {cc.rating} <br/></div>
-                    {status ? <div>{status}<br/></div> : null}
+                    {cc.status ? <div>{cc.status}<br/></div> : null}
-                    {item.sizeOnDisk ? <div>Размер: {(item.sizeOnDisk / 1000000000).toFixed(2)} Gb</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>

src/components/contentCard.js

@@ -0,0 +1,30 @@
+export const getCardContent = (item) => {
+    let result = {
+        image: item?.images?.length > 0 ? item.images[0]?.remoteUrl : null,
+        rating: item.ratings?.imdb?.value ?? null,
+        status: null,
+        size: null,
+        series: null,
+    };
+
+    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;
+}