Skip to content

mate-academy/react_movies-list-fetch-movies

Repository files navigation

Movies list - Fetch movies

Here is the working version

Implement the FindMovie component to load movies from OMDb API (You need to register and get an API key).

  1. When a user enters a title and submits the form, send a request to https://www.omdbapi.com/?apikey=[yourkey]&t=[title];
    • use the getMovie method from the api.ts;
  2. The submit button should be disabled when the title field is empty;
  3. Show a spinner on the submit button while waiting for the respose;
    • use is-loading class;
    • loading should be finished in any case (use finally);
  4. If a movie is not found show an error message below the input;
    • hide it after changing the title;
  5. If a movie is found show the preview as a MovieCard and the add button;
    • the API return MovieData or ReposnseError (see the types)
    • don't forget to normalize received MovieData
    • use the deafult picture if the found movie has no poster.
  6. The add button should add the movie to the list, clear the form and remove the preview;
  7. Don't add a movie to the list twice (compare by imdbId), just clear the data;

Instructions

  • Install Prettier Extention and use this VSCode settings to enable format on save.
  • Implement a solution following the React task guideline.
  • Use the React TypeScript cheat sheet.
  • 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 and add it to the PR description.