Merge pull request #3 from jorgecortesdev/Task-3.4

it fetch movies from API and add propTypes

Author: jorgecortesdev

package-lock.json

@@ -10,7 +10,8 @@
   "license": "ISC",
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "prop-types": "^15.8.1"
   },
   "devDependencies": {
     "@parcel/transformer-sass": "^2.12.0",

package.json

@@ -1,60 +1,61 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { MovieCard } from "../movie-card/movie-card";
 import { MovieView } from "../movie-view/movie-view";
 
 export const MainView = () => {
-  const [movies, setMovies] = useState([
-    {
-      id: 1,
-      title: "Fight Club",
-      description: "An insomniac office worker and a devil-may-care soap maker form an underground fight club that evolves...",
-      genre: { name: "Drama" },
-      director: { name: "David Fincher" },
-      image:
-        "https://upload.wikimedia.org/wikipedia/en/f/fc/Fight_Club_poster.jpg",
-    },
-    {
-      id: 2,
-      title: "Schindler's List",
-      description: "In German-occupied Poland during World War II, industrialist Oskar Schindler gradually becomes concerned...",
-      genre: { name: "Biography" },
-      director: { name: "Steven Spielberg" },
-      image:
-        "https://upload.wikimedia.org/wikipedia/en/3/38/Schindler%27s_List_movie.jpg",
-    },
-    {
-      id: 3,
-      title: "The Shawshank Redemption",
-      description: "Two imprisoned men bond over a number of years, finding solace and eventual redemption through acts of common...",
-      genre: { name: "Drama" },
-      director: { name: "Frank Darabont" },
-      image:
-        "https://upload.wikimedia.org/wikipedia/en/8/81/ShawshankRedemptionMoviePoster.jpg",
-    },
-    {
-      id: 4,
-      title: "The Dark Knight",
-      description: "When the menace known as the Joker wreaks havoc and chaos on the people of Gotham, Batman must accept...",
-      genre: { name: "Action" },
-      director: { name: "Christopher Nolan" },
-      image:
-        "https://upload.wikimedia.org/wikipedia/en/1/1c/The_Dark_Knight_%282008_film%29.jpg",
-    },
-    {
-      id: 5,
-      title: "The Matrix",
-      description: "A computer hacker learns from mysterious rebels about the true nature of his reality and his role in the war...",
-      genre: { name: "Sci-Fi" },
-      director: { name: "Lana Wachowski" },
-      image:
-        "https://upload.wikimedia.org/wikipedia/en/c/c1/The_Matrix_Poster.jpg",
-    }
-  ]);
-
+  const [movies, setMovies] = useState([]);
   const [selectedMovie, setSelectedMovie] = useState(null);
 
+  useEffect(() => {
+    fetch("https://cf-2-movie-api.onrender.com/movies")
+      .then((response) => response.json())
+      .then(({ data }) => {
+        // Please review the response format of the API here
+        // https://cf-2-movie-api.onrender.com/docs/#/Movie/get_movies
+        const moviesFromApi = data.map(movie => {
+          return {
+            id: movie._id,
+            Title: movie.Title,
+            Description: movie.Description,
+            ImagePath: movie.ImagePath,
+            Featured: movie.Featured,
+            ReleaseYear: movie.ReleaseYear,
+            MPA: movie.MPA,
+            IMDb: movie.IMDb,
+            Genre: movie.Genre,
+            Director: movie.Director,
+            Actors: movie.Actors,
+          }
+        });
+
+        setMovies(moviesFromApi);
+      });
+  }, []);
+
   if (selectedMovie) {
-    return <MovieView movie={selectedMovie} onBackClick={() => setSelectedMovie(null)} />
+    // 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 (
+      <>
+        <MovieView movie={selectedMovie} onBackClick={() => setSelectedMovie(null)} />
+        <hr />
+        <h2>Similar Movies</h2>
+        {similarMovies.map(movie => (
+          <MovieCard
+            key={movie.id}
+            movie={movie}
+            onMovieClick={(newSelectedMovie) => {
+              setSelectedMovie(newSelectedMovie);
+            }}
+          />
+        ))}
+      </>
+    );
   }
 
   if (movies.length === 0) {

src/components/main-view/main-view.jsx

@@ -1,11 +1,20 @@
+import PropTypes from "prop-types";
+
 export const MovieCard = ({ movie, onMovieClick }) => {
   return (
     <div
       onClick={() => {
         onMovieClick(movie);
       }}
     >
-      {movie.title}
+      {movie.Title}
     </div>
   );
 };
+
+MovieCard.propTypes = {
+  movie: PropTypes.shape({
+    Title: PropTypes.string
+  }).isRequired,
+  onMovieClick: PropTypes.func.isRequired
+};

src/components/movie-card/movie-card.jsx

@@ -1,26 +1,71 @@
+import PropTypes from "prop-types";
+
 export const MovieView = ({ movie, onBackClick }) => {
   return (
     <div>
       <div>
-        <img src={movie.image} />
+        <img src={movie.ImagePath} />
       </div>
       <div>
         <span>Title: </span>
-        <span>{movie.title}</span>
+        <span>{movie.Title}</span>
       </div>
       <div>
         <span>Description: </span>
-        <span>{movie.description}</span>
+        <span>{movie.Description}</span>
       </div>
       <div>
         <span>Genre: </span>
-        <span>{movie.genre.name}</span>
+        <span>{movie.Genre.Name}</span>
       </div>
       <div>
         <span>Director: </span>
-        <span>{movie.director.name}</span>
+        <span>{movie.Director.Name}</span>
+      </div>
+      <div>
+        <span>Release Year: </span>
+        <span>{movie.ReleaseYear}</span>
+      </div>
+      <div>
+        <span>MPA: </span>
+        <span>{movie.MPA}</span>&nbsp;
+        <small>(Motion Picture Association rating)</small>
+      </div>
+      <div>
+        <span>Rating: </span>
+        <span>{movie.IMDb}</span>&nbsp;
+        <small>(IMDb rating)</small>
       </div>
       <button onClick={onBackClick}>Back</button>
     </div>
   );
 };
+
+MovieView.propTypes = {
+  movie: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    Title: PropTypes.string.isRequired,
+    Description: PropTypes.string.isRequired,
+    ImagePath: PropTypes.string.isRequired,
+    ReleaseYear: PropTypes.number,
+    MPA: PropTypes.string,
+    IMDb: PropTypes.number,
+    Genre: PropTypes.shape({
+      Name: PropTypes.string.isRequired,
+      Description: PropTypes.string.isRequired
+    }).isRequired,
+    Director: PropTypes.shape({
+      Name: PropTypes.string.isRequired,
+      Bio: PropTypes.string.isRequired,
+      Birth: PropTypes.string,
+      Death: PropTypes.string,
+    }),
+    Actors: PropTypes.arrayOf(PropTypes.shape({
+      Name: PropTypes.string.isRequired,
+      Bio: PropTypes.string.isRequired,
+      Birthday: PropTypes.string,
+      ImagePath: PropTypes.string.isRequired
+    }))
+  }).isRequired,
+  onBackClick: PropTypes.func.isRequired
+};