make task #2706
make task #2706
Conversation
There was a problem hiding this comment.
Great job on implementing the task requirements! 🎉 Your code is well-structured and meets the core functionality as expected. While there are a few areas to double-check, such as ensuring the TextField component handles the onChange prop correctly and verifying the moviesFromServer import, these are minor and do not detract from the overall functionality. Keep up the excellent work, and consider these points for future improvements! 😊
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
| @@ -2,15 +2,30 @@ import './App.scss'; | |||
| import { MoviesList } from './components/MoviesList'; | |||
| import { NewMovie } from './components/NewMovie'; | |||
| import moviesFromServer from './api/movies.json'; | |||
| import { useState } from 'react'; | |||
There was a problem hiding this comment.
Ensure that the moviesFromServer import on line 4 is correctly pointing to the JSON file and that the file exists. This is crucial for initializing the state with the movie data.
| return ( | ||
| <div className="page"> | ||
| <div className="page-content"> | ||
| <MoviesList movies={moviesFromServer} /> | ||
| <MoviesList movies={movies} /> |
There was a problem hiding this comment.
Verify that the MoviesList component is correctly implemented to handle the movies prop. It should expect an array of movies and render them appropriately.
| </div> | ||
| <div className="sidebar"> | ||
| <NewMovie /* onAdd={(movie) => {}} */ /> | ||
| <NewMovie onAdd={handleAddMovie} /> |
There was a problem hiding this comment.
Ensure that the NewMovie component is correctly implemented to handle the onAdd prop. It should call this function with a new movie object when a movie is added.
| value="" | ||
| onChange={() => {}} | ||
| value={title} | ||
| onChange={handleTitleChange} |
There was a problem hiding this comment.
Ensure that the TextField component is correctly implemented to handle the onChange prop. It should call the provided function with the new value of the input field.
|
|
||
| <div className="field is-grouped"> | ||
| <div className="control"> | ||
| <button | ||
| type="submit" | ||
| data-cy="submit-button" | ||
| className="button is-link" | ||
| disabled={!ifFormValid()} |
There was a problem hiding this comment.
The disabled attribute for the submit button is correctly set based on the form validation function ifFormValid. Ensure that the ifFormValid function covers all necessary validation checks.
DEMO LINK](https://cyberte4.github.io/react_movies-list-add-form/)