ekallin/PIbd-21_Bakalskaya_E.D._INTERNET_PROGRAMMING_FRONTEND
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

страница фильма обновлена

Browse Source
This commit is contained in:
ekallin 2024-01-07 21:25:30 +04:00 committed by ns.potapov
parent d0b2fe0cda
commit b5d87bb37b
4 changed files with 45 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/categories/hooks/CategoriesHook.js
View File

@ -1,5 +1,5 @@
import { useEffect, useState } from 'react'; import { useEffect, useState } from "react";
import CategoriesApiService from '../service/CategoriesApiService'; import CategoriesApiService from "../service/CategoriesApiService";
const useCategories = () => { const useCategories = () => {
const [categories, setCategories] = useState([]); 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; export default useCategories;

2
src/components/movies/hooks/MoviesHook.js
View File

@ -31,7 +31,7 @@ export const useMovie = (movieId) => {
const [movie, setMovie] = useState([]); const [movie, setMovie] = useState([]);
const getMovie = async () => { const getMovie = async () => {
let expand = "?_expand=categorie"; let expand = `?_expand=categorie`;
const data = await MoviesApiService.get(movieId, expand); const data = await MoviesApiService.get(movieId, expand);
setMovie(data ?? []); setMovie(data ?? []);
}; };

32
src/pages/Catalog.jsx
View File

@ -2,7 +2,7 @@ import '../pagescss/Catalog.css';
import useCategorieFilter from '../components/movies/hooks/MoviesFilterHook'; import useCategorieFilter from '../components/movies/hooks/MoviesFilterHook';
import useMovies from '../components/movies/hooks/MoviesHook'; import useMovies from '../components/movies/hooks/MoviesHook';
import RowCategories from '../components/RowCategories/RowCategories'; 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 RowFilms from '../components/RowFilms/RowFilms';
import { splitByRows } from '../components/utils/funcs'; import { splitByRows } from '../components/utils/funcs';
import { useMovie } from '../components/movies/hooks/MoviesHook'; import { useMovie } from '../components/movies/hooks/MoviesHook';
@ -20,19 +20,27 @@ const Catalog = () => {
const movie = useMovie(movieIdFilter); const movie = useMovie(movieIdFilter);
const movieCat = useCategorie(movie.categorieId);
const category = useCategorie(currentFilter);
if (movieIdFilter) { if (movieIdFilter) {
return ( 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"> <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> </video>
</div> </div>
<div className="frame-info-about-film d-flex flex-column justify-content-around m-3"> <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='name-viewed-film text-center'> <p className='genre-viewed-film text-center fs-2'>
{movieCat.name}
</p>
<p className='name-viewed-film text-center fs-1'>
{movie.name} {movie.name}
</p> </p>
<p className='description-viewed-film text-center'> <p className='description-viewed-film text-center fs-6'>
{movie.description} {movie.description}
</p> </p>
</div> </div>
@ -46,10 +54,11 @@ const Catalog = () => {
return ( return (
<> <>
<main className="main-page flex-fill d-flex justify-content-center" id='catalog-page'> <main className="main-page flex-fill d-flex flex-column justify-content-center" id='catalog-page'>
<div className="content-film d-flex flex-column justify-content-around" id="content"> <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> </div>
</main > </main >
@ -62,8 +71,9 @@ const Catalog = () => {
return ( return (
<> <>
<main className="main-page flex-fill d-flex justify-content-center" id='catalog-page'> <main className="main-page flex-fill d-flex flex-column justify-content-center" id='catalog-page'>
<div className="content-film d-flex flex-column justify-content-around" id="content"> <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} />) categoriesByRow.map((categoriesRow, index) => <RowCategories categories={categoriesRow} key={index} />)
} }

4
src/pagescss/Catalog.css
View File

@ -15,3 +15,7 @@
width: 100%; width: 100%;
} }
} }
.frame-info-about-film {
background-color: #3C2C72;
}