implemented movie runtime

README.md

@@ -47,6 +47,7 @@ Additionally, if you want to extend your project you might want read the code in
 - https://github.com/jorgecortesdev/cf-3-myFlix-client/pull/10/files
 - https://github.com/jorgecortesdev/cf-3-myFlix-client/pull/11/files
 - https://github.com/jorgecortesdev/cf-3-myFlix-client/pull/12/files
+- https://github.com/jorgecortesdev/cf-3-myFlix-client/pull/13/files
 
 #### Branches
 

src/components/Cards/MiniMovieCard/MiniMovieCard.jsx

@@ -7,7 +7,8 @@ import { moviePropTypes } from '../../../propTypes';
 
 import './MiniMovieCard.scss';
 
-// TODO: add the movie length to the API and implement it here.
+import { toHoursAndMinutes } from '../../../utils/movies';
+
 export const MiniMovieCard = ({ movie }) => {
   return (
     <div className="movie-information">
@@ -28,7 +29,7 @@ export const MiniMovieCard = ({ movie }) => {
             <div>
               <span className="movie-details__rating">{movie.MPA}</span>
               <ul className="movie-details__list">
-                <li>1h 56m</li>
+                <li>{toHoursAndMinutes(movie.Runtime)}</li>
                 <li>{movie.ReleaseYear}</li>
               </ul>
             </div>

src/pages/HomePage/HomePage.jsx

@@ -43,6 +43,7 @@ export const HomePage = () => {
             Genre: movie.Genre,
             Director: movie.Director,
             Actors: movie.Actors,
+            Runtime: movie.Runtime,
           };
         });
 

src/pages/MoviePage/MoviePage.jsx

@@ -9,6 +9,8 @@ import { MoviesSlider } from '../../components/MoviesSlider';
 import { GenreBadge } from '../../components/Badges';
 import { DirectorLink, ActorLink } from '../../components/Links';
 
+import { toHoursAndMinutes } from '../../utils/movies';
+
 export const MoviePage = () => {
   const { movieId } = useParams();
 
@@ -31,8 +33,9 @@ export const MoviePage = () => {
             <h1 className="mb-0">{movie.Title}</h1>
             <div className="d-flex justify-content-between align-items-end">
               <div className="d-flex gap-2 align-items-center">
-                <span className="fs-6 text-body-secondary">{movie.ReleaseYear}</span>&bull;
-                <span className="fs-6 text-body-secondary">{movie.MPA}</span>
+                <span className="fs-6 text-body-secondary">{movie.MPA}</span>&bull;
+                <span className="fs-6 text-body-secondary">{toHoursAndMinutes(movie.Runtime)}</span>&bull;
+                <span className="fs-6 text-body-secondary">{movie.ReleaseYear}</span>
               </div>
               <GenreBadge genre={movie.Genre} />
             </div>

src/propTypes.js

@@ -30,4 +30,5 @@ export const moviePropTypes = PropTypes.shape({
   Genre: genrePropTypes.isRequired,
   Director: directorPropTypes.isRequired,
   Actors: PropTypes.arrayOf(actorPropTypes),
+  Runtime: PropTypes.number.isRequired,
 });

src/utils/movies.js

@@ -0,0 +1,5 @@
+export const toHoursAndMinutes = (totalMinutes) => {
+  const hours = Math.floor(totalMinutes / 60);
+  const minutes = totalMinutes % 60;
+  return `${hours}h${minutes > 0 ? ` ${minutes}m` : ''}`;
+};