From b7068c5779624060c8911e6cc8ea022e03989b14 Mon Sep 17 00:00:00 2001 From: Pavlo Date: Sun, 15 Dec 2024 00:12:55 +0200 Subject: [PATCH 1/2] add task solution --- src/App.jsx | 91 +------------------------ src/App.scss | 10 --- src/components/MovieCard/MovieCard.jsx | 32 ++++++++- src/components/MovieCard/MovieCard.scss | 3 + src/components/MovieList/MovieList.jsx | 15 +++- src/components/MovieList/MovieList.scss | 5 ++ 6 files changed, 56 insertions(+), 100 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index f36c45ef..2a23f6bc 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 moviesFromServer from './api/movies.json'; +import { MovieList } from './components/MovieList/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..b61b6cf9 100644 --- a/src/components/MovieCard/MovieCard.jsx +++ b/src/components/MovieCard/MovieCard.jsx @@ -1,3 +1,33 @@ import './MovieCard.scss'; -export const MovieCard = () => <>Put the card here; +export const MovieCard = ({ movie }) => { + return ( +
+
+
+ Film logo +
+
+
+
+
+
+ imdb +
+
+
+
+
+

+ {movie.title} +

+
+
+

{movie.description}

+ + IMDB + +
+
+ ); +}; 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..ab7c9208 100644 --- a/src/components/MovieList/MovieList.jsx +++ b/src/components/MovieList/MovieList.jsx @@ -1,3 +1,16 @@ +import { MovieCard } from '../MovieCard/MovieCard'; import './MovieList.scss'; -export const MovieList = () => <>Put the list here; +export const MovieList = ({ moviesFromServer }) => { + if (moviesFromServer.length === 0) { + return null; + } + + return ( +
+ {moviesFromServer.map(movie => ( + + ))} +
+ ); +}; 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 02e89a0e6c86e1f4930fe82998d29182d81d8984 Mon Sep 17 00:00:00 2001 From: Pavlo Date: Sun, 15 Dec 2024 17:51:56 +0200 Subject: [PATCH 2/2] add task solution --- src/App.jsx | 4 ++-- src/App.scss | 7 ++++--- src/components/MovieCard/MovieCard.jsx | 4 ++++ src/components/MovieCard/MovieCard.scss | 1 - src/components/MovieList/MovieList.jsx | 8 ++++---- src/components/MovieList/MovieList.spec.jsx | 8 +++++++- 6 files changed, 21 insertions(+), 11 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 2a23f6bc..a1058e6a 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,13 +1,13 @@ /* eslint-disable max-len */ import './App.scss'; -import moviesFromServer from './api/movies.json'; +import movies from './api/movies.json'; import { MovieList } from './components/MovieList/MovieList'; export const App = () => (
- +
diff --git a/src/App.scss b/src/App.scss index 2a087543..3ea9e653 100644 --- a/src/App.scss +++ b/src/App.scss @@ -9,11 +9,12 @@ iframe { min-height: 100vh; } -.page-content { +.sidebar { padding: 20px; + border-left: 1px solid lightgray; } -.sidebar { +.page-content { padding: 20px; - border-left: 1px solid lightgray; } + diff --git a/src/components/MovieCard/MovieCard.jsx b/src/components/MovieCard/MovieCard.jsx index b61b6cf9..5d96e7a0 100644 --- a/src/components/MovieCard/MovieCard.jsx +++ b/src/components/MovieCard/MovieCard.jsx @@ -8,6 +8,7 @@ export const MovieCard = ({ movie }) => { Film logo
+
@@ -17,13 +18,16 @@ export const MovieCard = ({ movie }) => {
+

{movie.title}

+

{movie.description}

+ IMDB diff --git a/src/components/MovieCard/MovieCard.scss b/src/components/MovieCard/MovieCard.scss index 42a3ad55..4035900b 100644 --- a/src/components/MovieCard/MovieCard.scss +++ b/src/components/MovieCard/MovieCard.scss @@ -1,4 +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 ab7c9208..55bc3a21 100644 --- a/src/components/MovieList/MovieList.jsx +++ b/src/components/MovieList/MovieList.jsx @@ -1,14 +1,14 @@ import { MovieCard } from '../MovieCard/MovieCard'; import './MovieList.scss'; -export const MovieList = ({ moviesFromServer }) => { - if (moviesFromServer.length === 0) { - return null; +export const MovieList = ({ movies }) => { + if (movies.length === 0) { + return undefined; } return (
- {moviesFromServer.map(movie => ( + {movies.map(movie => ( ))}
diff --git a/src/components/MovieList/MovieList.spec.jsx b/src/components/MovieList/MovieList.spec.jsx index 9f4ae527..09bc3583 100644 --- a/src/components/MovieList/MovieList.spec.jsx +++ b/src/components/MovieList/MovieList.spec.jsx @@ -8,13 +8,19 @@ describe('MoviesList component', () => { it('should render a card per each movie', () => { mount(); - cy.getByDataCy('Movie').should('have.length', 5); + // eslint-disable-next-line no-unused-expressions + cy.getByDataCy('Movie').should('have.length', 5).only; }); it('should put movies in correct order', () => { mount(); cy.getByDataCy('MovieTitle').eq(0).should('have.text', 'Inception'); + cy.getByDataCy('MovieTitle').eq(1).should('have.text', 'Love Actually'); + cy.getByDataCy('MovieTitle') + .eq(2) + .should('have.text', 'The Day After Tomorrow'); + cy.getByDataCy('MovieTitle').eq(3).should('have.text', 'Rogue One'); cy.getByDataCy('MovieTitle').eq(4).should('have.text', 'The Holiday'); });