update MovieDetails

Irina-anat · Feb 21, 2024 · ce8b605 · ce8b605
1 parent d93cee4
commit ce8b605
Showing 1 changed file with 35 additions and 22 deletions.
diff --git a/src/pages/MovieDetails/MovieDetails.jsx b/src/pages/MovieDetails/MovieDetails.jsx
@@ -1,37 +1,41 @@
-import { NavLink, Outlet, useLocation, useParams } from "react-router-dom";
-import { Link } from "react-router-dom";
-import { Suspense, useEffect, useRef, useState } from "react";
-import { fetchMovieDetails } from "Services/Api";
+import { NavLink, Outlet, useLocation, useParams } from 'react-router-dom';
+import { Link } from 'react-router-dom';
+import { Suspense, useEffect, useRef, useState } from 'react';
+import { fetchMovieDetails } from 'Services/Api';
 import css from './MovieDetails.module.css';
 
-
-
 const MovieDetails = () => {
   const { movieId } = useParams();
   const [details, setDetails] = useState({});
+  const { title, poster_path, genres, vote_average, release_date, overview } =
+    details;
+
   const location = useLocation();
-  const { title, poster_path, genres, vote_average, release_date, overview } = details;
   const backLinkLocationRef = useRef(location.state?.from ?? './movies');
+
   const getDate = new Date(release_date).getFullYear();
   const userScore = Math.round(vote_average * 10);
-    
+
   useEffect(() => {
     if (!movieId) return;
     fetchMovieDetails(movieId)
       .then(response => setDetails({ ...response }))
       .catch(error => {
-        console.error("Error fetching video data:", error);
+        console.error('Error fetching video data:', error);
       });
   }, [movieId]);
-
-
+
   return (
     <div className={css.movie__container}>
-      <Link to={backLinkLocationRef.current}> <button type="button">Go back</button></Link>
+      <Link to={backLinkLocationRef.current}>
+        {' '}
+        <button type="button">Go back</button>
+      </Link>
       {details && (
         <div>
           <div className={css.movie__box}>
-            <img className={css.movie__image}
+            <img
+              className={css.movie__image}
               src={
                 poster_path
                   ? 'https://image.tmdb.org/t/p/w300' + poster_path
@@ -42,20 +46,31 @@ const MovieDetails = () => {
               alt="title"
             />
             <div>
-              <h2 className={css.movie__title}>{title} ({getDate})</h2>
+              <h2 className={css.movie__title}>
+                {title} ({getDate})
+              </h2>
               <p className={css.movie__text}>User score: {userScore}%</p>
               <h3 className={css.descriptin__title}>Overview:</h3>
               <p className={css.movie__text}>{overview}</p>
               <h3 className={css.descriptin__title}>Genres:</h3>
               {genres?.map(genre => (
-                <li key={genre.id}>{genre.name ? genre.name : 'Unknown'}</li>))}
+                <li key={genre.id}>{genre.name ? genre.name : 'Unknown'}</li>
+              ))}
             </div>
           </div>
           <div>
             <h3 className={css.descriptin__title}>Additional information:</h3>
             <ul>
-              <li><NavLink className={css.editional__title} to="cast">Cast</NavLink></li>
-              <li><NavLink className={css.editional__title} to="reviews">Movie review</NavLink></li>
+              <li>
+                <NavLink className={css.editional__title} to="cast">
+                  Cast
+                </NavLink>
+              </li>
+              <li>
+                <NavLink className={css.editional__title} to="reviews">
+                  Movie review
+                </NavLink>
+              </li>
             </ul>
           </div>
         </div>
@@ -69,8 +84,6 @@ const MovieDetails = () => {
 
 export default MovieDetails;
 
-
-
 /*
 const MovieDetails = () => {
     const location = useLocation();
@@ -85,8 +98,8 @@ const MovieDetails = () => {
      //HTTP запит, якщо потрібен   
     }, []) отримати ідентифікатор фільму movieId  і робити запит */
 
-    //location.state &&  location.state.from = location.state?.from
-    /*return <>
+//location.state &&  location.state.from = location.state?.from
+/*return <>
         <h2> Movie Details: {movieId}</h2>
         <Link to={backLinkLocationRef.current}>Назад на сторінку пошуку</Link>
         <ul>
@@ -105,4 +118,4 @@ const MovieDetails = () => {
 };
 
 export default MovieDetails;
-*/ 
+*/