Here is the working version
Implement the FindMovie
component to load movies from OMDb API (You need to register and get an API key).
- 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 theapi.ts
;
- use the
- The submit button should be disabled when the title field is empty;
- 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
);
- use
- If a movie is not found show an error message below the input;
- hide it after changing the title;
- If a movie is found show the preview as a
MovieCard
and the add button;- the API return
MovieData
orReposnseError
(see thetypes
) - don't forget to normalize received
MovieData
- use the deafult picture if the found movie has no poster.
- the API return
- The add button should add the movie to the list, clear the form and remove the preview;
- Don't add a movie to the list twice (compare by
imdbId
), just clear the data;
- 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.