Solution

src/App.tsx

@@ -5,16 +5,16 @@ import { FindMovie } from './components/FindMovie';
 import { Movie } from './types/Movie';
 
 export const App = () => {
-  const [movies] = useState<Movie[]>([]);
+  const [addedMovies, setAddedMovies] = useState<Movie[]>([]);
 
   return (
     <div className="page">
       <div className="page-content">
-        <MoviesList movies={movies} />
+        <MoviesList movies={addedMovies} />
       </div>
 
       <div className="sidebar">
-        <FindMovie />
+        <FindMovie onAddMovie={setAddedMovies} />
       </div>
     </div>
   );

src/api.ts

@@ -1,7 +1,7 @@
 import { MovieData } from './types/MovieData';
 import { ResponseError } from './types/ReponseError';
 
-const API_URL = 'https://www.omdbapi.com/?apikey=your-key';
+const API_URL = 'https://www.omdbapi.com/?apikey=117248e3';
 
 export function getMovie(query: string): Promise<MovieData | ResponseError> {
   return fetch(`${API_URL}&t=${query}`)

src/components/FindMovie/FindMovie.tsx

@@ -1,7 +1,67 @@
-import React from 'react';
+import React, { ChangeEvent, FormEvent, useState } from 'react';
+import cn from 'classnames';
+
 import './FindMovie.scss';
+import { Movie } from '../../types/Movie';
+import { getMovie } from '../../api';
+import { MovieCard } from '../MovieCard';
+import { convertMovieDataToMovie } from '../../utils/convertMovieDataToMovie';
+import { DEFAULT_MOVIE } from '../../mocks';
+
+type Callback = (current: Movie[]) => Movie[];
+
+type Props = {
+  onAddMovie: (callback: Callback) => void;
+};
+
+export const FindMovie: React.FC<Props> = ({ onAddMovie }) => {
+  const [foundMovie, setFoundMovie] = useState<Movie>(DEFAULT_MOVIE);
+  const [searchQuery, setSearchQuery] = useState('');
+
+  const [loading, setLoading] = useState(false);
+  const [errorMessage, setErrorMessage] = useState('');
+
+  const hasFoundMovie = foundMovie !== DEFAULT_MOVIE;
+
+  const handleLoadMovie = (event: FormEvent) => {
+    setLoading(true);
+
+    event.preventDefault();
+
+    getMovie(searchQuery)
+      .then(movieData => {
+        if (!('Error' in movieData)) {
+          const movie = convertMovieDataToMovie(movieData);
+
+          setFoundMovie(movie);
+        } else {
+          setErrorMessage(`Can't find a movie with such a title`);
+        }
+      })
+      .finally(() => setLoading(false));
+  };
+
+  const handleAddMovie = () => {
+    onAddMovie(currentMovies => {
+      const hasSameMovie = currentMovies.some(
+        movie => movie.imdbId === foundMovie.imdbId,
+      );
+
+      if (!hasSameMovie) {
+        return [...currentMovies, foundMovie];
+      }
+
+      return currentMovies;
+    });
+    setFoundMovie(DEFAULT_MOVIE);
+    setSearchQuery('');
+  };
+
+  const handleChangeSearchQuery = (event: ChangeEvent<HTMLInputElement>) => {
+    setErrorMessage('');
+    setSearchQuery(event.target.value);
+  };
 
-export const FindMovie: React.FC = () => {
   return (
     <>
       <form className="find-movie">
@@ -16,42 +76,53 @@ export const FindMovie: React.FC = () => {
               type="text"
               id="movie-title"
               placeholder="Enter a title to search"
-              className="input is-danger"
+              className={cn('input', { 'is-danger': errorMessage })}
+              value={searchQuery}
+              onChange={handleChangeSearchQuery}
             />
           </div>
 
-          <p className="help is-danger" data-cy="errorMessage">
-            Can&apos;t find a movie with such a title
-          </p>
+          {errorMessage && (
+            <p className="help is-danger" data-cy="errorMessage">
+              {errorMessage}
+            </p>
+          )}
         </div>
 
         <div className="field is-grouped">
           <div className="control">
             <button
               data-cy="searchButton"
               type="submit"
-              className="button is-light"
+              className={cn('button is-light', { 'is-loading': loading })}
+              disabled={!searchQuery}
+              onClick={handleLoadMovie}
             >
               Find a movie
             </button>
           </div>
 
-          <div className="control">
-            <button
-              data-cy="addButton"
-              type="button"
-              className="button is-primary"
-            >
-              Add to the list
-            </button>
-          </div>
+          {hasFoundMovie && (
+            <div className="control">
+              <button
+                data-cy="addButton"
+                type="button"
+                className="button is-primary"
+                onClick={handleAddMovie}
+              >
+                Add to the list
+              </button>
+            </div>
+          )}
         </div>
       </form>
 
-      <div className="container" data-cy="previewContainer">
-        <h2 className="title">Preview</h2>
-        {/* <MovieCard movie={movie} /> */}
-      </div>
+      {hasFoundMovie && (
+        <div className="container" data-cy="previewContainer">
+          <h2 className="title">Preview</h2>
+          <MovieCard movie={foundMovie} />
+        </div>
+      )}
     </>
   );
 };

src/components/MovieCard/MovieCard.tsx

@@ -6,34 +6,38 @@ type Props = {
   movie: Movie;
 };
 
-export const MovieCard: React.FC<Props> = ({ movie }) => (
-  <div className="card" data-cy="movieCard">
-    <div className="card-image">
-      <figure className="image is-4by3">
-        <img data-cy="moviePoster" 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>
+export const MovieCard: React.FC<Props> = ({ movie }) => {
+  const { title, description, imgUrl, imdbUrl } = movie;
+
+  return (
+    <div className="card" data-cy="movieCard">
+      <div className="card-image">
+        <figure className="image is-4by3">
+          <img data-cy="moviePoster" src={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">
+              {title}
+            </p>
+          </div>
+        </div>
 
-      <div className="content" data-cy="movieDescription">
-        {movie.description}
-        <br />
-        <a href={movie.imdbUrl} data-cy="movieURL">
-          IMDB
-        </a>
+        <div className="content" data-cy="movieDescription">
+          {description}
+          <br />
+          <a href={imdbUrl} data-cy="movieURL">
+            IMDB
+          </a>
+        </div>
       </div>
     </div>
-  </div>
-);
+  );
+};

src/mocks.ts

@@ -0,0 +1,9 @@
+import { Movie } from './types/Movie';
+
+export const DEFAULT_MOVIE: Movie = {
+  title: '',
+  description: '',
+  imgUrl: '',
+  imdbUrl: '',
+  imdbId: '',
+};

src/utils/convertMovieDataToMovie.ts

@@ -0,0 +1,15 @@
+import { Movie } from '../types/Movie';
+import { MovieData } from '../types/MovieData';
+
+export const convertMovieDataToMovie = (movieData: MovieData): Movie => {
+  return {
+    title: movieData.Title,
+    description: movieData.Plot,
+    imgUrl:
+      movieData.Poster === 'N/A'
+        ? 'https://via.placeholder.com/360x270.png?text=no%20preview'
+        : movieData.Poster,
+    imdbUrl: `https://www.imdb.com/title/${movieData.imdbID}`,
+    imdbId: movieData.imdbID,
+  };
+};