solution

src/App.tsx

@@ -1,11 +1,16 @@
 import { useState } from 'react';
-import './App.scss';
+
 import { MoviesList } from './components/MoviesList';
 import { FindMovie } from './components/FindMovie';
 import { Movie } from './types/Movie';
+import './App.scss';
 
 export const App = () => {
-  const [movies] = useState<Movie[]>([]);
+  const [movies, setMovies] = useState<Movie[]>([]);
+
+  const handleMovieAdd = (newMovie: Movie) => {
+    setMovies(currentMovies => [...currentMovies, newMovie]);
+  };
 
   return (
     <div className="page">
@@ -14,7 +19,7 @@ export const App = () => {
       </div>
 
       <div className="sidebar">
-        <FindMovie />
+        <FindMovie handleMovieAdd={handleMovieAdd} movies={movies} />
       </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=d7f6ccfc';
 
 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 { Loader } from '../Loader';
+
+type Props = {
+  handleMovieAdd: (newMovie: Movie) => void;
+  movies: Movie[];
+};
+
+export const FindMovie: React.FC<Props> = ({ handleMovieAdd, movies }) => {
+  const [query, setQuery] = useState('');
+  const [movie, setMovie] = useState<Movie | null>(null);
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  const foundMovieById = movies.find(mov => mov.imdbId === movie?.imdbId);
+
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    setIsLoading(true);
+
+    setTimeout(() => {
+      getMovie(query)
+        .then(response => {
+          if ('Error' in response) {
+            setError(response.Error);
+          } else {
+            const foundMovie = {
+              title: response.Title,
+              description: response.Plot,
+              imgUrl: response.Poster,
+              imdbUrl: `https://www.imdb.com/title/${response.imdbID}`,
+              imdbId: response.imdbID,
+            };
+
+            setMovie(foundMovie);
+          }
+        })
+        .finally(() => setIsLoading(false));
+    }, 300);
+  };
+
+  const onMovieAdd = (movieToAdd: Movie) => {
+    if (!foundMovieById) {
+      handleMovieAdd(movieToAdd);
+    }
+
+    setQuery('');
+    setMovie(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
@@ -15,43 +67,57 @@ export const FindMovie: React.FC = () => {
               data-cy="titleField"
               type="text"
               id="movie-title"
+              value={query}
+              onChange={event => setQuery(event.target.value.trimStart())}
               placeholder="Enter a title to search"
-              className="input is-danger"
+              className={`input ${error && 'is-danger'}`}
             />
           </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"
-            >
-              Find a movie
-            </button>
+            {isLoading ? (
+              <Loader />
+            ) : (
+              <button
+                data-cy="searchButton"
+                type="submit"
+                className="button is-light"
+                disabled={!query}
+              >
+                {movie && query ? '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>
+          {movie && (
+            <div className="control">
+              <button
+                data-cy="addButton"
+                type="button"
+                className="button is-primary"
+                onClick={() => onMovieAdd(movie)}
+              >
+                Add to the list
+              </button>
+            </div>
+          )}
         </div>
       </form>
 
-      <div className="container" data-cy="previewContainer">
-        <h2 className="title">Preview</h2>
-        {/* <MovieCard movie={movie} /> */}
-      </div>
+      {movie && (
+        <div className="container" data-cy="previewContainer">
+          <h2 className="title">Preview</h2>
+          <MovieCard movie={movie} />
+        </div>
+      )}
     </>
   );
 };

src/components/Loader/Loader.scss

@@ -0,0 +1,27 @@
+.Loader {
+  display: flex;
+  width: 130px;
+  height: 40px;
+  background-color: rgb(243, 244, 246);
+  justify-content: center;
+  align-items: center;
+
+  &__content {
+    border-radius: 50%;
+    width: 1em;
+    height: 1em;
+    margin: 1em auto;
+    border: 0.3em solid #ddd;
+    border-left-color: #000;
+    animation: load8 1.2s infinite linear;
+  }
+}
+
+@keyframes load8 {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

src/components/Loader/Loader.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import './Loader.scss';
+
+export const Loader: React.FC = () => (
+  <div className="Loader is-loading" data-cy="searchButton">
+    <div className="Loader__content" />
+  </div>
+);

src/components/Loader/index.tsx

@@ -0,0 +1 @@
+export * from './Loader';

src/components/MovieCard/MovieCard.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import { Movie } from '../../types/Movie';
 import './MovieCard.scss';
 
@@ -10,9 +11,18 @@ 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" />
+        <img
+          data-cy="moviePoster"
+          src={
+            movie.imgUrl === 'N/A'
+              ? 'https://via.placeholder.com/360x270.png?text=no%20preview'
+              : movie.imgUrl
+          }
+          alt="Film logo"
+        />
       </figure>
     </div>
+
     <div className="card-content">
       <div className="media">
         <div className="media-left">

src/components/MoviesList/MoviesList.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
-import './MoviesList.scss';
 import { MovieCard } from '../MovieCard';
 import { Movie } from '../../types/Movie';
+import './MoviesList.scss';
 
 type Props = {
   movies: Movie[];