mate-academy / react_movies-list-add-form

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

• 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.

react_movies-list-add-form's Issues

Tests should include if TextField labels are matching

We should extend tests with another test scenario, matching the labels. Students multiple times don't provide them properly, leaving JSON keys as labels, there should be a test that checks if they are proper.