Solution #1342
Solution #1342
Conversation
There was a problem hiding this comment.
Great effort on your project! 🎉 While there are several areas that need improvement, the decision to approve your pull request is made to encourage your learning journey. Here are some key points to address:
-
Dynamic Data Handling:
- Ensure that the
userandcommentsdata are correctly passed and used in components likeUserInfoandCommentList. For instance, passpost.usertoUserInfoandpost.commentstoCommentList. - Avoid hardcoding values like email addresses and comment content. Use props such as
comment.emailandcomment.bodyto dynamically render data.
- Ensure that the
-
Key Prop in Lists:
- Add a unique
keyprop to elements rendered in a list using.map(). Use identifiers likepost.idandcomment.idto help React efficiently update the UI.
- Add a unique
-
Function Implementation:
- Correct the
getCommentsByIdfunction to return an array of comments related to a specific post usingfilterinstead offind.
- Correct the
These improvements are crucial for the functionality and maintainability of your code. Make sure to review these comments and apply the necessary changes to enhance your project. Keep up the good work and continue learning from these experiences! 🚀
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
| function getCommentsById(commentId) { | ||
| return commentsFromServer.find(comment => comment.id === commentId) || null; | ||
| } |
There was a problem hiding this comment.
The function getCommentsById is incorrectly implemented. It should return an array of comments for a given post ID, not a single comment. Consider using filter instead of find to collect all comments associated with a specific post.
| const posts = postsFromServer.map(post => ({ | ||
| ...post, | ||
| user: getUserById(post.userId), | ||
| comments: getCommentsById(post.id), |
There was a problem hiding this comment.
The comments property for each post is currently set to a single comment object due to the incorrect implementation of getCommentsById. This should be an array of comments.
| href="mailto:[email protected]" | ||
| > | ||
| [email protected] |
There was a problem hiding this comment.
The email address is hardcoded as '[email protected]'. It should be dynamically set using comment.email to ensure the correct email is displayed for each comment.
| dolorum voluptas laboriosam quisquam ab totam beatae et aut | ||
| aliquid optio assumenda voluptas velit itaque quidem voluptatem | ||
| tempore cupiditate in itaque sit molestiae minus dolores magni |
There was a problem hiding this comment.
The comment body text is hardcoded. It should be dynamically set using comment.body to display the actual content of each comment.
| href="mailto:[email protected]" | ||
| > | ||
| [email protected] |
There was a problem hiding this comment.
The email address is hardcoded as '[email protected]'. It should be dynamically set using comment.email to ensure the correct email is displayed for each comment.
src/components/PostInfo/PostInfo.jsx
Outdated
| est rerum tempore vitae sequi sint nihil reprehenderit dolor beatae ea | ||
| dolores neque fugiat blanditiis voluptate porro vel nihil molestiae ut | ||
| reiciendis qui aperiam non debitis possimus qui neque nisi nulla |
There was a problem hiding this comment.
The post body content is hardcoded. It should be dynamically set using post.body to display the actual content of the post.
src/components/PostInfo/PostInfo.jsx
Outdated
|
|
||
| <hr /> | ||
|
|
||
| <b data-cy="NoCommentsMessage">No comments yet <CommentList comments={commentsFromServer} /></b> |
There was a problem hiding this comment.
The commentsFromServer variable is not defined within the component. You should use post.comments to pass the correct comments related to the post to the CommentList component.
| <> | ||
| <div className="PostList"> | ||
| {posts.map(post => ( | ||
| <PostInfo post={post} /> |
There was a problem hiding this comment.
Each child in a list should have a unique key prop to help React identify which items have changed, are added, or are removed. Consider using post.id as the key.
src/components/UserInfo/UserInfo.jsx
Outdated
| @@ -1 +1,5 @@ | |||
| export const UserInfo = () => <>Put the user here</>; | |||
| export const UserInfo = () => | |||
There was a problem hiding this comment.
The UserInfo component should accept a user prop to display the user's information. Modify the component to take user as a parameter: export const UserInfo = ({ user }) => ....
| <a className="UserInfo" href={`mailto:${user.email}`}> | ||
| {user.name} |
There was a problem hiding this comment.
The user variable is not defined. It should be passed as a prop to the UserInfo component to dynamically render the user's email and name.
There was a problem hiding this comment.
Demo link not works.
Looks like wasn't any deploys for this repo.
https://github.com/Maas1m/react_static-list-of-posts-js/actions
Please check comments and make sure app works and looks correctly.
Fix linter warnings and tests before next re-request and make sure demo link works.
| </div> | ||
| </div> | ||
|
|
||
| <div className="CommentInfo"> |
There was a problem hiding this comment.
why do you need two same CommentInfo blocks?
| <p> | ||
| {' Posted by '} | ||
|
|
||
| <UserInfo user={user} /> |
https://Maas1m.github.io/react_static-list-of-posts-js/