From 24306c05ee1af82b2a35bb961c4b8a54ceea1449 Mon Sep 17 00:00:00 2001
From: DavidKuznets <davidkuznets7@gmail.com>
Date: Tue, 10 Dec 2024 11:38:38 +0200
Subject: [PATCH 1/2] Solution

---
 src/App.jsx                             | 91 +------------------------
 src/App.scss                            |  9 +--
 src/components/MovieCard/MovieCard.jsx  | 34 ++++++++-
 src/components/MovieCard/MovieCard.scss |  3 +
 src/components/MovieList/MovieList.jsx  |  9 ++-
 src/components/MovieList/MovieList.scss |  5 ++
 6 files changed, 53 insertions(+), 98 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index f36c45ef..3bb4ef5c 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,98 +1,13 @@
 /* eslint-disable max-len */
 
 import './App.scss';
-// import moviesFromServer from './api/movies.json';
+import { MovieList } from './components/MovieList/MovieList';
+import moviesFromServer from './api/movies.json';
 
 export const App = () => (
   <div className="page">
     <div className="page-content">
-      <div className="movies">
-        <div className="card" data-cy="Movie">
-          <div className="card-image">
-            <figure className="image is-4by3">
-              <img
-                data-cy="MovieImage"
-                src="https://m.media-amazon.com/images/M/MV5BMjAxMzY3NjcxNF5BMl5BanBnXkFtZTcwNTI5OTM0Mw@@._V1_SX300.jpg"
-                alt="Film logo"
-              />
-            </figure>
-          </div>
-
-          <div className="card-content">
-            <div className="media">
-              <div className="media-left">
-                <figure className="image is-48x48">
-                  <img src="images/imdb-logo.jpeg" alt="imdb" />
-                </figure>
-              </div>
-
-              <div className="media-content">
-                <p className="title is-8" data-cy="MovieTitle">
-                  Inception
-                </p>
-              </div>
-            </div>
-
-            <div className="content">
-              <p data-cy="MovieDescription">
-                Follows the lives of eight very different couples in dealing
-                with their love lives in various loosely interrelated tales all
-                set during a frantic month before Christmas in London, England.
-              </p>
-
-              <a
-                href="https://www.imdb.com/title/tt1375666"
-                data-cy="MovieLink"
-              >
-                IMDB
-              </a>
-            </div>
-          </div>
-        </div>
-
-        <div className="card" data-cy="Movie">
-          <div className="card-image">
-            <figure className="image is-4by3">
-              <img
-                data-cy="MovieImage"
-                src="https://m.media-amazon.com/images/M/MV5BMTY4NjQ5NDc0Nl5BMl5BanBnXkFtZTYwNjk5NDM3._V1_.jpg"
-                alt="Film logo"
-              />
-            </figure>
-          </div>
-
-          <div className="card-content">
-            <div className="media">
-              <div className="media-left">
-                <figure className="image is-48x48">
-                  <img src="images/imdb-logo.jpeg" alt="imdb" />
-                </figure>
-              </div>
-
-              <div className="media-content">
-                <p className="title is-8" data-cy="MovieTitle">
-                  Love Actually
-                </p>
-              </div>
-            </div>
-
-            <div className="content">
-              <p data-cy="MovieDescription">
-                A thief who steals corporate secrets through the use of
-                dream-sharing technology is given the inverse task of planting
-                an idea into the mind of a C.E.O.
-              </p>
-
-              <a
-                href="https://www.imdb.com/title/tt0314331"
-                data-cy="MovieLink"
-              >
-                IMDB
-              </a>
-            </div>
-          </div>
-        </div>
-      </div>
+      <MovieList moviesFromServer={moviesFromServer} />
     </div>
 
     <div className="sidebar" data-cy="Sidebar">
diff --git a/src/App.scss b/src/App.scss
index 59cee43b..e9a8d461 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -18,12 +18,5 @@ iframe {
   border-left: 1px solid lightgray;
 }
 
-.movies {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-  gap: 20px;
-}
 
-.card-image img {
-  object-fit: contain;
-}
+
diff --git a/src/components/MovieCard/MovieCard.jsx b/src/components/MovieCard/MovieCard.jsx
index a1f454f7..d4e6a620 100644
--- a/src/components/MovieCard/MovieCard.jsx
+++ b/src/components/MovieCard/MovieCard.jsx
@@ -1,3 +1,35 @@
 import './MovieCard.scss';
 
-export const MovieCard = () => <>Put the card here</>;
+export const MovieCard = ({ movie }) => (
+  <div className="card" data-cy="Movie">
+    <div className="card-image">
+      <figure className="image is-4by3">
+        <img data-cy="MovieImage" src={movie.imgUrl} alt="Film logo" />
+      </figure>
+    </div>
+
+    <div className="card-content">
+      <div className="media">
+        <div className="media-left">
+          <figure className="image is-48x48">
+            <img src="images/imdb-logo.jpeg" alt="imdb" />
+          </figure>
+        </div>
+
+        <div className="media-content">
+          <p className="title is-8" data-cy="MovieTitle">
+            {movie.title}
+          </p>
+        </div>
+      </div>
+
+      <div className="content">
+        <p data-cy="MovieDescription">{movie.description}</p>
+
+        <a href={movie.imdbUrl} data-cy="MovieLink">
+          IMDB
+        </a>
+      </div>
+    </div>
+  </div>
+);
diff --git a/src/components/MovieCard/MovieCard.scss b/src/components/MovieCard/MovieCard.scss
index f1b40ee0..42a3ad55 100644
--- a/src/components/MovieCard/MovieCard.scss
+++ b/src/components/MovieCard/MovieCard.scss
@@ -1 +1,4 @@
 // add styles here
+.card-image img {
+  object-fit: contain;
+}
diff --git a/src/components/MovieList/MovieList.jsx b/src/components/MovieList/MovieList.jsx
index b2820479..caaee4bd 100644
--- a/src/components/MovieList/MovieList.jsx
+++ b/src/components/MovieList/MovieList.jsx
@@ -1,3 +1,10 @@
+import { MovieCard } from '../MovieCard/MovieCard';
 import './MovieList.scss';
 
-export const MovieList = () => <>Put the list here</>;
+export const MovieList = ({ moviesFromServer }) => (
+  <div className="movies">
+    {moviesFromServer.map(movie => (
+      <MovieCard movie={movie} key={movie.imdbId} />
+    ))}
+  </div>
+);
diff --git a/src/components/MovieList/MovieList.scss b/src/components/MovieList/MovieList.scss
index f1b40ee0..aa2bccbc 100644
--- a/src/components/MovieList/MovieList.scss
+++ b/src/components/MovieList/MovieList.scss
@@ -1 +1,6 @@
 // add styles here
+.movies {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  gap: 20px;
+}

From 31f11fbdecb45931001fa90c248a4e87e27fcbd5 Mon Sep 17 00:00:00 2001
From: DavidKuznets <davidkuznets7@gmail.com>
Date: Tue, 10 Dec 2024 11:53:40 +0200
Subject: [PATCH 2/2] Solution

---
 src/App.jsx                            | 2 +-
 src/components/MovieList/MovieList.jsx | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 3bb4ef5c..f974ef72 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -7,7 +7,7 @@ import moviesFromServer from './api/movies.json';
 export const App = () => (
   <div className="page">
     <div className="page-content">
-      <MovieList moviesFromServer={moviesFromServer} />
+      <MovieList movies={moviesFromServer} />
     </div>
 
     <div className="sidebar" data-cy="Sidebar">
diff --git a/src/components/MovieList/MovieList.jsx b/src/components/MovieList/MovieList.jsx
index caaee4bd..097f33c6 100644
--- a/src/components/MovieList/MovieList.jsx
+++ b/src/components/MovieList/MovieList.jsx
@@ -1,9 +1,9 @@
 import { MovieCard } from '../MovieCard/MovieCard';
 import './MovieList.scss';
 
-export const MovieList = ({ moviesFromServer }) => (
+export const MovieList = ({ movies }) => (
   <div className="movies">
-    {moviesFromServer.map(movie => (
+    {movies.map(movie => (
       <MovieCard movie={movie} key={movie.imdbId} />
     ))}
   </div>