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 20:46:04 +04:00 committed by ns.potapov
parent f642529571
commit d0b2fe0cda
4 changed files with 94 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/cardFilm/CardFilm.jsx
View File

@ -1,8 +1,23 @@
import PropTypes from 'prop-types';
import './CardFilm.css';
import { useSearchParams } from 'react-router-dom/dist';
import { Link } from 'react-router-dom/dist';
const CardFilm = ({ movie }) => {
const [, setSearchParams] = useSearchParams();
const handleClick = () => {
setSearchParams((prevParams) => {
return new URLSearchParams({
...Object.fromEntries(prevParams.entries()),
...{
movie: movie.id
},
});
});
}
const handleAnchorClick = (event, action) => {
event.preventDefault();
action();
@ -17,9 +32,10 @@ const CardFilm = ({ movie }) => {
return (
<>
<div className="card-film d-flex flex-column justify-content-center align-items-center mb-5 mb-md-0">
<img src={movie.image} className="img-fluid rounded-3" id="img-fluid" />
<Link onClick={handleClick}>
<img src={movie.image} className="img-fluid rounded-3" id="img-fluid" />
</Link>
<div className="icons w-50 d-flex justify-content-around mt-1 mb-1">
<svg id="icon-heart" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"
className="my-icon bi bi-heart" viewBox="0 0 16 16" onClick={(event) => handleAnchorClick(event, toggleFavorite)}>
<path d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15" />

16
src/components/movies/hooks/MoviesFilterHook.js
View File

@ -1,8 +1,8 @@
import { useSearchParams } from 'react-router-dom';
import useCategories from '../../categories/hooks/CategoriesHook';
import { useSearchParams } from "react-router-dom";
import useCategories from "../../categories/hooks/CategoriesHook";
const useCategorieFilter = () => {
const filterName = 'categorie';
const filterName = "categorie";
const [searchParams, setSearchParams] = useSearchParams();
@ -20,9 +20,17 @@ const useCategorieFilter = () => {
return {
categories,
currentFilter: searchParams.get(filterName) || '',
currentFilter: searchParams.get(filterName) || "",
handleFilterChange,
};
};
export const useMovieIdFilter = () => {
const filterName = "movie";
const [searchParams] = useSearchParams();
return searchParams.get(filterName) || "";
};
export default useCategorieFilter;

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

@ -1,5 +1,5 @@
import { useEffect, useState } from 'react';
import MoviesApiService from '../service/MoviesApiService.js';
import { useEffect, useState } from "react";
import MoviesApiService from "../service/MoviesApiService.js";
const useMovies = (categorieFilter) => {
const [moviesRefresh, setMoviesRefresh] = useState(false);
@ -7,7 +7,7 @@ const useMovies = (categorieFilter) => {
const handleMoviesChange = () => setMoviesRefresh(!moviesRefresh);
const getMovies = async () => {
let expand = '?_expand=categorie';
let expand = "?_expand=categorie";
if (categorieFilter) {
expand = `${expand}&categorieId=${categorieFilter}`;
}
@ -26,4 +26,22 @@ const useMovies = (categorieFilter) => {
};
};
export const useMovie = (movieId) => {
const [moviesRefresh] = useState(false);
const [movie, setMovie] = useState([]);
const getMovie = async () => {
let expand = "?_expand=categorie";
const data = await MoviesApiService.get(movieId, expand);
setMovie(data ?? []);
};
useEffect(() => {
getMovie();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [moviesRefresh, movieId]);
return movie;
};
export default useMovies;

57
src/pages/Catalog.jsx
View File

@ -5,6 +5,8 @@ import RowCategories from '../components/RowCategories/RowCategories';
import useCategories from '../components/categories/hooks/CategoriesHook';
import RowFilms from '../components/RowFilms/RowFilms';
import { splitByRows } from '../components/utils/funcs';
import { useMovie } from '../components/movies/hooks/MoviesHook';
import { useMovieIdFilter } from '../components/movies/hooks/MoviesFilterHook';
const Catalog = () => {
@ -14,7 +16,47 @@ const Catalog = () => {
const { movies } = useMovies(currentFilter);
if (currentFilter == "") {
const movieIdFilter = useMovieIdFilter();
const movie = useMovie(movieIdFilter);
if (movieIdFilter) {
return (
<>
<main className="main-frame-viewing d-flex flex-row flex-fill justify-content-around">
<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>
</div>
<div className="frame-info-about-film d-flex flex-column justify-content-around m-3">
<p className='name-viewed-film text-center'>
{movie.name}
</p>
<p className='description-viewed-film text-center'>
{movie.description}
</p>
</div>
</main>
</>
);
}
else if (currentFilter) {
const moviesByRow = splitByRows(movies, 3);
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">
{
moviesByRow.map((moviesRow, index) => <RowFilms movies={moviesRow} key={index} />)
}
</div>
</main >
</>
);
}
else {
const categoriesByRow = splitByRows(categories, 3);
@ -31,19 +73,6 @@ const Catalog = () => {
);
}
const moviesByRow = splitByRows(movies, 3);
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">
{
moviesByRow.map((moviesRow, index) => <RowFilms movies={moviesRow} key={index} />)
}
</div>
</main >
</>
);
};