Skip to content

Commit

Permalink
Done
Browse files Browse the repository at this point in the history
  • Loading branch information
Ihor Barban authored and Ihor Barban committed Jan 18, 2025
1 parent 0b857a7 commit 1fda4ae
Show file tree
Hide file tree
Showing 6 changed files with 57 additions and 101 deletions.
13 changes: 7 additions & 6 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,15 @@
You are given movies loaded from the API and initial markup. Your task is to:

1. Render movies from a given `moviesFromServer` array (for the simplicity, you can do it inside the `App` and split later).
1. Extract a `.movies` block to a `MovieList` component.
1. The `App` should pass the `moviesFromServer` to the `MovieList` as a `movies` prop.
1. Extract a `.card` block to a `MovieCard` component.
1. The `MovieList` should pass a `movie` to the `MovieCard`.
1. Use `movie.imdbId` as a key.
1. Keep all `data-cy` attributes to pass the tests.
<!-- 1. Extract a `.movies` block to a `MovieList` component. -->
<!-- 1. The `App` should pass the `moviesFromServer` to the `MovieList` as a `movies` prop. -->
<!-- 1. Extract a `.card` block to a `MovieCard` component. -->
<!-- 1. The `MovieList` should pass a `movie` to the `MovieCard`. -->
<!-- 1. Use `movie.imdbId` as a key. -->
<!-- 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.
Expand Down
9 changes: 5 additions & 4 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
},
"devDependencies": {
"@cypress/react18": "^2.0.1",
"@mate-academy/scripts": "^1.8.5",
"@mate-academy/scripts": "^1.9.12",
"@mate-academy/stylelint-config": "*",
"@vitejs/plugin-react": "^4.3.1",
"cypress": "^13.13.0",
Expand Down
91 changes: 3 additions & 88 deletions src/App.jsx
Original file line number Diff line number Diff line change
@@ -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 moviesList={moviesFromServer} />
</div>

<div className="sidebar" data-cy="Sidebar">
Expand Down
34 changes: 33 additions & 1 deletion src/components/MovieCard/MovieCard.jsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,35 @@
import './MovieCard.scss';

export const MovieCard = () => <>Put the card here</>;
export const MovieCard = ({ movie }) => (
<div className="card" data-cy="Movie" key={movie.imdbId}>
<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>
);
9 changes: 8 additions & 1 deletion src/components/MovieList/MovieList.jsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,10 @@
import { MovieCard } from '../MovieCard/MovieCard';
import './MovieList.scss';

export const MovieList = () => <>Put the list here</>;
export const MovieList = ({ moviesList }) => {
return (
<div className="movies">
{moviesList && moviesList.map(movie => <MovieCard movie={movie} />)}
</div>
);
};

0 comments on commit 1fda4ae

Please sign in to comment.