-
Similar Movies
- {similarMovies.map(movie => ( -The list is empty!
;
- }
-
- return (
-
- {movies.map((movie) => (
- {
- setSelectedMovie(newSelectedMovie);
- }}
- />
- ))}
-
-
+ {
- onMovieClick(movie);
- }}
- >
- {movie.Title}
-
+
+ {movie.Genre.Name}
+
+
+
+ {isFavorite ? (
+
+ ) : (
+
+ )}
+
+
-
+
- 
-
-
- Title:
- {movie.Title}
-
-
- Description:
- {movie.Description}
-
-
- Genre:
- {movie.Genre.Name}
-
-
- Director:
- {movie.Director.Name}
-
-
- Release Year:
- {movie.ReleaseYear}
-
-
- MPA:
- {movie.MPA}
- (Motion Picture Association rating)
-
-
- Rating:
- {movie.IMDb}
- (IMDb rating)
-
-
-
+
+
+ {movie.Title}
+
+
+
+ {movie.ReleaseYear}•
+ {movie.MPA}
+
+ {movie.Genre.Name}
+ {movie.Description}
+ +-
+ {movie.Actors.map(actor => (
+
- + {actor.Name} + + ))} +
+
+
+
+
+
+
+ IMDb RATING
+
+
+
+
+
+
+
+ {movie.IMDb} / 10
+
+ POPULARITY
+
+
+
+
+
+
+ {/* placeholder: it will count how many times this movie has been favored */}
+ 10
+
+
+
+
+
+
+
+
+ {isFavorite ? (
+
+ ) : (
+
+ )}
+
+
+
+
+
);
};
diff --git a/src/components/similar-movies/similar-movies.jsx b/src/components/similar-movies/similar-movies.jsx
new file mode 100644
index 0000000..2835d69
--- /dev/null
+++ b/src/components/similar-movies/similar-movies.jsx
@@ -0,0 +1,44 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { MovieCard } from "../movie-card/movie-card";
+import { Row, Col } from "react-bootstrap";
+
+export const SimilarMovies = ({ selectedMovie, movies, onSimilarMovieClick }) => {
+ // Bonus Task 2: Similar Movies
+ const similarMovies = movies.filter(movie => {
+ const isSimilarMovie = movie.Genre.Name === selectedMovie.Genre.Name;
+ const isNotTheSelectedMovie = movie.id !== selectedMovie.id;
+ return isNotTheSelectedMovie && isSimilarMovie;
+ });
+
+ return (
+ <>
+ {similarMovies.length > 0 && (
+
+
+ {similarMovies.map(movie => (
+ onSimilarMovieClick(movie)}
+ />
+
+ ))}
+
+
+ )}
+
+ );
+};
+
+MovieCard.propTypes = {
+ movie: PropTypes.shape({
+ ImagePath: PropTypes.string.isRequired,
+ Title: PropTypes.string,
+ Director: PropTypes.shape({
+ Name: PropTypes.string.isRequired,
+ }),
+ }).isRequired,
+ onMovieClick: PropTypes.func.isRequired
+};
diff --git a/src/index.jsx b/src/index.jsx
index 8a086f1..6d81700 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -1,10 +1,15 @@
import { createRoot } from 'react-dom/client';
import { MainView } from "./components/main-view/main-view";
+import Container from 'react-bootstrap/Container';
import "./index.scss";
const App = () => {
- return