From 7f9c504da6621719e2d064c5a6374361af806a5f Mon Sep 17 00:00:00 2001 From: Maksym Korchynskyi Date: Sat, 28 Dec 2024 15:39:22 +0200 Subject: [PATCH 1/3] add task solution --- src/App.jsx | 93 +------------------------ src/App.scss | 10 --- src/components/MovieCard/MovieCard.jsx | 34 ++++++++- src/components/MovieCard/MovieCard.scss | 4 +- src/components/MovieList/MovieList.jsx | 9 ++- src/components/MovieList/MovieList.scss | 6 +- 6 files changed, 52 insertions(+), 104 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index f36c45ef..c3521b84 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,98 +1,11 @@ -/* eslint-disable max-len */ - import './App.scss'; -// import moviesFromServer from './api/movies.json'; +import movies from './api/movies.json'; +import { MovieList } from './components/MovieList'; export const App = () => (
-
-
-
-
- Film logo -
-
- -
-
-
-
- imdb -
-
- -
-

- Inception -

-
-
- -
-

- 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. -

- - - IMDB - -
-
-
- -
-
-
- Film logo -
-
- -
-
-
-
- imdb -
-
- -
-

- Love Actually -

-
-
- -
-

- 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. -

- - - IMDB - -
-
-
-
+
diff --git a/src/App.scss b/src/App.scss index 59cee43b..2a087543 100644 --- a/src/App.scss +++ b/src/App.scss @@ -17,13 +17,3 @@ iframe { padding: 20px; 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 }) => ( +
+
+
+ Film logo +
+
+ +
+
+
+
+ imdb +
+
+ +
+

+ {movie.title} +

+
+
+ +
+

{movie.description}

+ + + IMDB + +
+
+
+); diff --git a/src/components/MovieCard/MovieCard.scss b/src/components/MovieCard/MovieCard.scss index f1b40ee0..4035900b 100644 --- a/src/components/MovieCard/MovieCard.scss +++ b/src/components/MovieCard/MovieCard.scss @@ -1 +1,3 @@ -// 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..df1af326 100644 --- a/src/components/MovieList/MovieList.jsx +++ b/src/components/MovieList/MovieList.jsx @@ -1,3 +1,10 @@ import './MovieList.scss'; +import { MovieCard } from '../MovieCard/MovieCard'; -export const MovieList = () => <>Put the list here; +export const MovieList = ({ movies }) => ( +
+ {movies.map(movie => ( + + ))} +
+); diff --git a/src/components/MovieList/MovieList.scss b/src/components/MovieList/MovieList.scss index f1b40ee0..91f6b0f4 100644 --- a/src/components/MovieList/MovieList.scss +++ b/src/components/MovieList/MovieList.scss @@ -1 +1,5 @@ -// add styles here +.movies { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); + gap: 20px; +} From 3547342bbabec4fdc0f8805bd41df3025370e6f2 Mon Sep 17 00:00:00 2001 From: Maksym Korchynskyi Date: Sat, 28 Dec 2024 15:40:05 +0200 Subject: [PATCH 2/3] update readme file --- README.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/README.md b/README.md index 27504b37..078565d4 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,5 @@ +[DEMO LINK](https://maksym2493.github.io/react_movies-list-js/) + # Movies List > DON'T use Typescirpt in this task @@ -13,6 +15,7 @@ You are given movies loaded from the API and initial markup. Your task is to: 1. Keep all `data-cy` attributes to pass the tests. ## Instructions + - Install Prettier Extention and use this [VSCode settings](https://mate-academy.github.io/fe-program/tools/vscode/settings.json) to enable format on save. - Implement a solution following the [React task guideline](https://github.com/mate-academy/react_task-guideline#react-tasks-guideline). - Open one more terminal and run tests with `npm test` to ensure your solution is correct. From 72fb43123260146b1dc07759c7c371f9c299437c Mon Sep 17 00:00:00 2001 From: Maksym Korchynskyi Date: Sat, 28 Dec 2024 15:44:10 +0200 Subject: [PATCH 3/3] fix mistakes --- src/App.jsx | 4 ++-- src/components/MovieList/MovieList.jsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index c3521b84..8e89afa4 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,11 +1,11 @@ import './App.scss'; -import movies from './api/movies.json'; +import moviesFromServer from './api/movies.json'; import { MovieList } from './components/MovieList'; export const App = () => (
- +
diff --git a/src/components/MovieList/MovieList.jsx b/src/components/MovieList/MovieList.jsx index df1af326..4e4b17a7 100644 --- a/src/components/MovieList/MovieList.jsx +++ b/src/components/MovieList/MovieList.jsx @@ -1,5 +1,5 @@ import './MovieList.scss'; -import { MovieCard } from '../MovieCard/MovieCard'; +import { MovieCard } from '../MovieCard'; export const MovieList = ({ movies }) => (