✨ Movie APP(CC Pattern)

src/App.js

@@ -1,23 +1,11 @@
-import logo from './logo.svg';
 import './App.css';
+import MovieContainer from './movies/MovieContainer';
+
 
 function App() {
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      <MovieContainer />
     </div>
   );
 }

src/data/movies.js

@@ -0,0 +1,66 @@
+
+
+export const movies = [
+  {
+    id: 1,
+    title: 'The Matrix',
+    year: 1999,
+    director: 'Lana Wachowski',
+    rating: 'R',
+    runtime: 136,
+    poster: 'https://images-na.ssl-images-amazon.com/images/M/MV5BNzQzOTk3OTAtNDQ0Zi00ZTVkLWI0MTEtMDllZjNkYzNjNTc4L2ltYWdlXkEyXkFqcGdeQXVyNjU0OTQ0OTY@._V1_SX300.jpg'
+  },
+  {
+    id: 2,
+    title: 'The Lord of the Rings',
+    year: 2001,
+    director: 'Peter Jackson',
+    rating: 'PG-13',
+    runtime: 178,
+    poster: 'https://images-na.ssl-images-amazon.com/images/M/MV5BN2EyZjM3NzUtNWUzMi00MTgxLWI0NTctMzY4M2VlOTdjZWRiXkEyXkFqcGdeQXVyNDUzOTQ5MjY@._V1_SX300.jpg'
+  },
+  {
+    id: 3,
+    title: 'The Dark Knight',
+    year: 2008,
+    director: 'Christopher Nolan',
+    rating: 'PG-13',
+    runtime: 152,
+    poster: 'https://images-na.ssl-images-amazon.com/images/M/MV5BMTMxNTMwODM0NF5BMl5BanBnXkFtZTcwODAyMTk2Mw@@._V1_SX300.jpg'
+  },
+  {
+    id: 4,
+    title: 'Inception',
+    year: 2010,
+    director: 'Christopher Nolan',
+    rating: 'PG-13',
+    runtime: 148,
+    poster: 'https://images-na.ssl-images-amazon.com/images/M/MV5BMjAxMzY3NjcxNF5BMl5BanBnXkFtZTcwNTI5OTM0Mw@@._V1_SX300.jpg'
+  },
+  {
+    id: 5,
+    title: 'Interstellar',
+    year: 2014,
+    director: 'Christopher Nolan',
+    rating: 'PG-13',
+    runtime: 169,
+    poster: 'https://images-na.ssl-images-amazon.com/images/M/MV5BMjIxNTU4MzY4MF5BMl5BanBnXkFtZTgwMzM4ODI3MjE@._V1_SX300.jpg'
+  },
+  {
+    id: 6,
+    title: 'The Dark Knight Rises',
+    year: 2012,
+    director: 'Christopher Nolan',
+    rating: 'PG-13',
+    runtime: 164,
+    poster: 'https://images-na.ssl-images-amazon.com/images/M/MV5BMTk4ODQzNDY3Ml5BMl5BanBnXkFtZTcwODA0NTM4Nw@@._V1_SX300.jpg'
+  }, 
+  {
+    id: 7,
+    title: 'The Lord of the Rings: The Fellowship of the Ring',
+    year: 2001,
+    director: 'Peter Jackson',
+    rating: 'PG-13',
+    runtime: 178,
+    poster: 'https://images-na.ssl-images-amazon.com/images/M/MV5BN2EyZjM3NzUtNWUzMi00MTgxLWI0NTctMzY4M2VlOTdjZWRiXkEyXkFqcGdeQXVyNDUzOTQ5MjY@._V1_SX300.jpg'
+  }];

src/movies/Movie.js

@@ -0,0 +1,20 @@
+
+const Movie = ({movie}) => {
+  const {
+    id,
+    title,
+    year,
+    poster,
+    rating,
+    director} = movie;
+
+  return (
+    <li className="movie">
+      <img src={poster} alt={title} />
+      <p>{title} by {director} was released on {year}</p>
+      <p>Rating: {rating}</p>
+    </li>
+  );
+}
+
+export default Movie;

src/movies/MovieContainer.js

@@ -0,0 +1,37 @@
+
+
+import { useEffect, useState } from 'react';
+import { movies } from '../data/movies';
+import Movie from './Movie';
+import './movies.css';
+
+
+const fetchMovies = () => {
+  return movies;
+};
+
+const MovieContainer = () => {
+  console.log(fetchMovies());
+
+  const [movies, setMovies] = useState([]);
+
+  useEffect(() => {
+    const movies = fetchMovies();
+    console.log('MovieContainer: useEffect: movies: ', movies);
+    setMovies(movies);
+  }, []);
+
+  return(
+    <div className="movie-container">
+      <h2>Movies</h2>
+      <ul className ="movie-list">
+        {movies.map(movie => (
+          <Movie movie={movie} key={movie.id} />
+        ))}
+      </ul>      
+    </div>
+  );
+};
+
+export default MovieContainer;
+

src/movies/movies.css

@@ -0,0 +1,31 @@
+li {
+  list-style: none;
+}
+
+.movie-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.movie-list {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-content: center;
+  justify-content: center;
+}
+
+.movie {
+  flex: 1;
+  margin: 10px;
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  background-color: #fff;
+}
+
+.movie img {
+ align-self: center;
+}
+
+