From b5d87bb37bd732bf942e8ba5eabdfd8ec73f63d1 Mon Sep 17 00:00:00 2001
From: ekallin <elina_kallin@mail.ru>
Date: Sun, 7 Jan 2024 21:25:30 +0400
Subject: [PATCH] =?UTF-8?q?=D1=81=D1=82=D1=80=D0=B0=D0=BD=D0=B8=D1=86?=
 =?UTF-8?q?=D0=B0=20=D1=84=D0=B8=D0=BB=D1=8C=D0=BC=D0=B0=20=D0=BE=D0=B1?=
 =?UTF-8?q?=D0=BD=D0=BE=D0=B2=D0=BB=D0=B5=D0=BD=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../categories/hooks/CategoriesHook.js        | 21 ++++++++++--
 src/components/movies/hooks/MoviesHook.js     |  2 +-
 src/pages/Catalog.jsx                         | 32 ++++++++++++-------
 src/pagescss/Catalog.css                      |  4 +++
 4 files changed, 45 insertions(+), 14 deletions(-)

diff --git a/src/components/categories/hooks/CategoriesHook.js b/src/components/categories/hooks/CategoriesHook.js
index e323192..163c394 100644
--- a/src/components/categories/hooks/CategoriesHook.js
+++ b/src/components/categories/hooks/CategoriesHook.js
@@ -1,5 +1,5 @@
-import { useEffect, useState } from 'react';
-import CategoriesApiService from '../service/CategoriesApiService';
+import { useEffect, useState } from "react";
+import CategoriesApiService from "../service/CategoriesApiService";
 
 const useCategories = () => {
     const [categories, setCategories] = useState([]);
@@ -18,4 +18,21 @@ const useCategories = () => {
     };
 };
 
+export const useCategorie = (categoryId) => {
+    const [moviesRefresh] = useState(false);
+    const [category, setCategory] = useState([]);
+
+    const getCategorie = async () => {
+        const data = await CategoriesApiService.get(categoryId);
+        setCategory(data ?? []);
+    };
+
+    useEffect(() => {
+        getCategorie();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [moviesRefresh, categoryId]);
+
+    return category;
+};
+
 export default useCategories;
diff --git a/src/components/movies/hooks/MoviesHook.js b/src/components/movies/hooks/MoviesHook.js
index a6ba4dc..0b2061b 100644
--- a/src/components/movies/hooks/MoviesHook.js
+++ b/src/components/movies/hooks/MoviesHook.js
@@ -31,7 +31,7 @@ export const useMovie = (movieId) => {
     const [movie, setMovie] = useState([]);
 
     const getMovie = async () => {
-        let expand = "?_expand=categorie";
+        let expand = `?_expand=categorie`;
         const data = await MoviesApiService.get(movieId, expand);
         setMovie(data ?? []);
     };
diff --git a/src/pages/Catalog.jsx b/src/pages/Catalog.jsx
index dfb4107..6f2bc63 100644
--- a/src/pages/Catalog.jsx
+++ b/src/pages/Catalog.jsx
@@ -2,7 +2,7 @@ import '../pagescss/Catalog.css';
 import useCategorieFilter from '../components/movies/hooks/MoviesFilterHook';
 import useMovies from '../components/movies/hooks/MoviesHook';
 import RowCategories from '../components/RowCategories/RowCategories';
-import useCategories from '../components/categories/hooks/CategoriesHook';
+import useCategories, { useCategorie } from '../components/categories/hooks/CategoriesHook';
 import RowFilms from '../components/RowFilms/RowFilms';
 import { splitByRows } from '../components/utils/funcs';
 import { useMovie } from '../components/movies/hooks/MoviesHook';
@@ -20,19 +20,27 @@ const Catalog = () => {
 
 	const movie = useMovie(movieIdFilter);
 
+	const movieCat = useCategorie(movie.categorieId);
+
+	const category = useCategorie(currentFilter);
+
+
 	if (movieIdFilter) {
 		return (
 			<>
-				<main className="main-frame-viewing d-flex flex-row flex-fill justify-content-around">
+				<main className="main-frame-viewing d-flex flex-row flex-fill justify-content-around align-items-center">
 					<div className="frame-card-film d-flex flex-column justify-content-center align-items-center m-4">
-						<video controls className='card-viewing-film rounded-3 m-2' poster='https://placehold.co/600x400'>
+						<video controls className='card-viewing-film rounded-3 m-2' poster={movie.image}>
 						</video>
 					</div>
-					<div className="frame-info-about-film d-flex flex-column justify-content-around m-3">
-						<p className='name-viewed-film text-center'>
+					<div className="frame-info-about-film d-flex flex-column justify-content-around m-3	text-light px-5 h-50 rounded-4">
+						<p className='genre-viewed-film text-center fs-2'>
+							{movieCat.name}
+						</p>
+						<p className='name-viewed-film text-center fs-1'>
 							{movie.name}
 						</p>
-						<p className='description-viewed-film text-center'>
+						<p className='description-viewed-film text-center fs-6'>
 							{movie.description}
 						</p>
 					</div>
@@ -46,10 +54,11 @@ const Catalog = () => {
 
 		return (
 			<>
-				<main className="main-page flex-fill d-flex justify-content-center" id='catalog-page'>
-					<div className="content-film d-flex flex-column justify-content-around" id="content">
+				<main className="main-page flex-fill d-flex flex-column justify-content-center" id='catalog-page'>
+					<p className='text-center text-light w-100 pt-5 fs-3'>Фильмы жанра &quot;{category.name}&quot;</p>
+					<div className="content-film d-flex flex-column justify-content-around w-100" id="content">
 						{
-							moviesByRow.map((moviesRow, index) => <RowFilms movies={moviesRow} key={index} />)
+							moviesByRow.length == 0 ? <p className="text-light w-100 text-center">Фильмов нет😭</p> : moviesByRow.map((moviesRow, index) => <RowFilms movies={moviesRow} key={index} />)
 						}
 					</div>
 				</main >
@@ -62,8 +71,9 @@ const Catalog = () => {
 
 		return (
 			<>
-				<main className="main-page flex-fill d-flex justify-content-center" id='catalog-page'>
-					<div className="content-film d-flex flex-column justify-content-around" id="content">
+				<main className="main-page flex-fill d-flex flex-column justify-content-center" id='catalog-page'>
+					<p className='text-center text-light w-100 pt-5 fs-3'>Жанры</p>
+					<div className="content-film d-flex flex-column flex-fill w-100 justify-content-around" id="content">
 						{
 							categoriesByRow.map((categoriesRow, index) => <RowCategories categories={categoriesRow} key={index} />)
 						}
diff --git a/src/pagescss/Catalog.css b/src/pagescss/Catalog.css
index 00b08d0..8957f88 100644
--- a/src/pagescss/Catalog.css
+++ b/src/pagescss/Catalog.css
@@ -14,4 +14,8 @@
 	.content-film {
 		width: 100%;
 	}
+}
+
+.frame-info-about-film {
+	background-color: #3C2C72;
 }
\ No newline at end of file