solution #2735
solution #2735
Conversation
There was a problem hiding this comment.
Thank you for your hard work on this project! 😊 There are a few critical issues that need to be addressed before we can proceed. The submit button logic needs to be corrected to ensure it is disabled when any required field is empty. Additionally, there are some unnecessary parts in the code, such as the onClick handler and the if (title) condition, which can be removed for clarity. Lastly, the count state is not being updated, which affects the form reset functionality. Please make these changes, and feel free to reach out if you need any help! Keep up the great work! 🚀
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
🔄 Fix the issues, commit the changes, and then re-request my review using the Re-request review button in the Reviewers tab.
src/components/NewMovie/NewMovie.tsx
Outdated
| onAdd: (movie: Movie) => void; | ||
| }; | ||
|
|
||
| export const NewMovie: React.FC<Props> = ({ onAdd }) => { | ||
| // Increase the count after successful form submission | ||
| // to reset touched status of all the `Field`s | ||
| const [count] = useState(0); |
There was a problem hiding this comment.
The count state is initialized but never updated, which means the key prop on the form will not change. Consider using setCount to update the count after form submission if you intend to reset the form fields' touched status.
src/components/NewMovie/NewMovie.tsx
Outdated
| imdbId, | ||
| }; | ||
|
|
||
| if (title) { |
There was a problem hiding this comment.
The condition if (title) is unnecessary here since the form submission already checks for required fields. You can remove this condition to simplify the code.
src/components/NewMovie/NewMovie.tsx
Outdated
|
|
||
| <div className="field is-grouped"> | ||
| <div className="control"> | ||
| <button | ||
| type="submit" | ||
| data-cy="submit-button" | ||
| className="button is-link" | ||
| onClick={() => {}} |
There was a problem hiding this comment.
The onClick handler for the submit button is an empty function. If it's not needed, consider removing it to clean up the code.
src/components/NewMovie/NewMovie.tsx
Outdated
| disabled={ | ||
| !title && !description && !imgUrl && !imdbUrl && !imdbId | ||
| ? true | ||
| : false | ||
| } |
There was a problem hiding this comment.
The disabled attribute logic for the button is incorrect. It should disable the button if any of the required fields are empty, not all. Change the condition to disable the button when any required field is missing.
There was a problem hiding this comment.
Your code has been reviewed and I'm pleased to inform you that it meets the task requirements and constraints. 🎉
Review Summary:
-
Submit Button Logic: You've correctly implemented the logic to disable the submit button until all required fields (
title,imgUrl,imdbUrl, andimdbId) are filled. This ensures that the form cannot be submitted with incomplete data. -
Form Reset Functionality: The form is effectively cleared after adding a new movie by resetting the state of each field. The use of the
countstate to reset the form's key is a clever solution to reinitialize the form and prevent errors from persisting. -
Form Submission Handling: You've used the
onSubmitevent for form submission, which is the recommended approach. -
Code Cleanliness: Previous issues with unnecessary code have been addressed, resulting in a cleaner and more efficient implementation.
Your implementation aligns well with the task description and checklist requirements. While there are no critical issues, always strive to review and refine your code based on feedback. This will help you improve and avoid similar issues in the future. Keep up the great work and continue learning from each experience! 🚀
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
DEMO LINK