Movies list - Add Form

You have the App with the MoviesList and NewMovie form containing ready to use TextField components. Learn how it works and implement an ability to add movies from IMDB.

If you want to test your page you can get first image from a movie page using DevTools -> Network -> Img

Here is the demo page

1. NewMovie should check if title, imgUrl, imdbUrl, imdbId are entered when an input looses focus (onBlur) and show an error and a red border if needed (learn how it it implemented in the TextField);
2. The description is optional;
3. Disable the submit button until all the required fields are filled (spaces should be trimmed);
4. Clear the form after adding a new movie.
5. Errors should not be shown after clearing the form (change its key to reinitialize the form);

(Optional) Advanced validation

Implement the ability to add custom validation callback to the TextField. Check if imgUrl and imdbUrl are valid URLs (you can use the next regex)

const pattern = /^((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=+$,\w]+@)?[A-Za-z0-9.-]+|(?:www\.|[-;:&=+$,\w]+@)[A-Za-z0-9.-]+)((?:\/[+~%/.\w-_]*)?\??(?:[-+=&;%@,.\w_]*)#?(?:[,.!/\\\w]*))?)$/;

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.