solution

src/App.tsx

@@ -5,7 +5,19 @@ import { FindMovie } from './components/FindMovie';
 import { Movie } from './types/Movie';
 
 export const App = () => {
-  const [movies] = useState<Movie[]>([]);
+  const [movies, setMovies] = useState<Movie[]>([]);
+
+  const handleAddMovie = (movie: Movie) => {
+    setMovies(currentMovies => {
+      if (
+        currentMovies.some(existMovie => existMovie.imdbId === movie.imdbId)
+      ) {
+        return currentMovies;
+      } else {
+        return [...currentMovies, movie];
+      }
+    });
+  };
 
   return (
     <div className="page">
@@ -14,7 +26,7 @@ export const App = () => {
       </div>
 
       <div className="sidebar">
-        <FindMovie />
+        <FindMovie onAddMovie={handleAddMovie} />
       </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=ec943342';
 
 export function getMovie(query: string): Promise<MovieData | ResponseError> {
   return fetch(`${API_URL}&t=${query}`)

src/components/FindMovie/FindMovie.tsx

@@ -1,10 +1,62 @@
-import React from 'react';
+import React, { useState } from 'react';
 import './FindMovie.scss';
+import { Movie } from '../../types/Movie';
+import { getMovie } from '../../api';
+import { MovieCard } from '../MovieCard';
+import { ResponseError } from '../../types/ReponseError';
+import { MovieData } from '../../types/MovieData';
+import { transformMovieData } from '../../utils/transformMovieData';
+import classNames from 'classnames';
+
+type Props = {
+  onAddMovie: (movie: Movie) => void;
+};
+
+export const FindMovie: React.FC<Props> = ({ onAddMovie }) => {
+  const [searchQuery, setSearchQuery] = useState('');
+  const [foundMovie, setFoundMovie] = useState<Movie | null>(null);
+  const [error, setError] = useState<ResponseError | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleTitleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchQuery(e.target.value);
+    setError(null);
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+
+    setIsLoading(true);
+
+    getMovie(searchQuery)
+      .then((res: MovieData | ResponseError) => {
+        if ('Response' in res && res.Response === 'False') {
+          setError(res);
+          setFoundMovie(null);
+        } else {
+          setFoundMovie(transformMovieData(res as MovieData));
+          setError(null);
+        }
+      })
+      .catch(err => {
+        setError({ Response: 'False', Error: err.message });
+        setFoundMovie(null);
+      })
+      .finally(() => setIsLoading(false));
+  };
+
+  const handleAddMovie = () => {
+    if (foundMovie) {
+      onAddMovie(foundMovie);
+    }
+
+    setSearchQuery('');
+    setFoundMovie(null);
+  };
 
-export const FindMovie: React.FC = () => {
   return (
     <>
-      <form className="find-movie">
+      <form className="find-movie" onSubmit={handleSubmit}>
         <div className="field">
           <label className="label" htmlFor="movie-title">
             Movie title
@@ -16,42 +68,54 @@ export const FindMovie: React.FC = () => {
               type="text"
               id="movie-title"
               placeholder="Enter a title to search"
-              className="input is-danger"
+              className={classNames('input', { 'input is-danger': error })}
+              value={searchQuery}
+              onChange={handleTitleChange}
             />
           </div>
 
-          <p className="help is-danger" data-cy="errorMessage">
-            Can&apos;t find a movie with such a title
-          </p>
+          {error && (
+            <p className="help is-danger" data-cy="errorMessage">
+              Can&apos;t find a movie with such a title
+            </p>
+          )}
         </div>
 
         <div className="field is-grouped">
           <div className="control">
             <button
               data-cy="searchButton"
               type="submit"
-              className="button is-light"
+              className={classNames('button is-light', {
+                'is-loading': isLoading,
+              })}
+              disabled={!searchQuery}
             >
-              Find a movie
+              {foundMovie ? 'Search again' : 'Find a movie'}
             </button>
           </div>
 
-          <div className="control">
-            <button
-              data-cy="addButton"
-              type="button"
-              className="button is-primary"
-            >
-              Add to the list
-            </button>
-          </div>
+          {foundMovie && (
+            <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>
+      {foundMovie && (
+        <div className="container" data-cy="previewContainer">
+          <h2 className="title">Preview</h2>
+          <MovieCard movie={foundMovie} />
+        </div>
+      )}
     </>
   );
 };

src/utils/transformMovieData.ts

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