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.

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published