Develop

README.md

@@ -17,4 +17,4 @@ You are given movies loaded from the API and initial markup. Your task is to:
 - Implement a solution following the [React task guideline](https://github.com/mate-academy/react_task-guideline#react-tasks-guideline).
 - Use the [React TypeScript cheat sheet](https://mate-academy.github.io/fe-program/js/extra/react-typescript).
 - Open one more terminal and run tests with `npm test` to ensure your solution is correct.
-- Replace `<your_account>` with your Github username in the [DEMO LINK](https://<your_account>.github.io/react_movies-list/) and add it to the PR description.
+- Replace `<your_account>` with your Github username in the [DEMO LINK](https://nex1994.github.io/react_movies-list/) and add it to the PR description.

package.json

@@ -14,7 +14,7 @@
   },
   "devDependencies": {
     "@cypress/react18": "^2.0.1",
-    "@mate-academy/scripts": "^1.8.5",
+    "@mate-academy/scripts": "^1.9.12",
     "@mate-academy/students-ts-config": "*",
     "@mate-academy/stylelint-config": "*",
     "@types/node": "^20.14.10",

src/App.tsx

@@ -2,98 +2,13 @@
 import React from 'react';
 
 import './App.scss';
-// import moviesFromServer from './api/movies.json';
+import { MoviesList } from './components/MoviesList';
+import moviesFromServer from './api/movies.json';
 
 export const App: React.FC = () => (
   <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>
+      <MoviesList movies={moviesFromServer} />
     </div>
 
     <div className="sidebar" data-cy="Sidebar">

src/components/MovieCard/MovieCard.tsx

@@ -1,5 +1,43 @@
 import React from 'react';
-
+import { Movie } from '../../types/Movie';
 import './MovieCard.scss';
 
-export const MovieCard: React.FC = () => <>Put the card here</>;
+type Movi = {
+  movie: Movie;
+}
+
+export const MovieCard: React.FC<Movi> = ({ movie }) => {
+  return (
+    <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>
+  );
+};

src/components/MoviesList/MoviesList.tsx

@@ -1,4 +1,18 @@
 import React from 'react';
 import './MoviesList.scss';
+import { Movie } from '../../types/Movie';
+import { MovieCard } from '../MovieCard';
 
-export const MoviesList: React.FC = () => <>Put the list here</>;
+type Movies = {
+  movies: Movie[];
+};
+
+export const MoviesList: React.FC<Movies> = ({ movies }) => {
+  return (
+    <div className="movies">
+      {movies.map(movie => {
+        return <MovieCard key={movie.imdbId} movie={movie} />;
+      })}
+    </div>
+  );
+};

src/types/Movie.ts

@@ -1,5 +1,7 @@
 export interface Movie {
   title: string;
-
-  // add all the other field
+  description: string;
+  imgUrl: string;
+  imdbUrl: string;
+  imdbId: string;
 }