solution #1382
solution #1382
Conversation
There was a problem hiding this comment.
Great job on implementing the task! 🎉 Your code meets most of the requirements, and you've done well in structuring your components and handling data. There are a few minor improvements suggested, such as adding prop type validation and ensuring unique keys for lists, which can enhance the robustness of your code. Keep up the good work, and consider these suggestions for future enhancements. Well done! 👍
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
| import postsFromServer from './api/posts.json'; | ||
| import commentsFromServer from './api/comments.json'; | ||
| import usersFromServer from './api/users.json'; |
There was a problem hiding this comment.
Ensure that the JSON files posts.json, comments.json, and users.json exist and contain the expected data structures. If they don't, it might lead to runtime errors.
| return usersFromServer.find(user => user.id === userId) || null; | ||
| } | ||
| function getCommentsById(postId) { | ||
| return commentsFromServer.filter((comment) => comment.postId === postId) || null; |
There was a problem hiding this comment.
The filter method will always return an array, so the || null part is unnecessary. If you want to return null when no comments are found, you should check the length of the array instead.
| ...post, | ||
| user: getUserById(post.userId), | ||
| comments: getCommentsById(post.id), | ||
| })) |
There was a problem hiding this comment.
Consider handling cases where getUserById or getCommentsById might return null. This could happen if the user or comments are not found, and it might lead to issues when rendering the PostList component.
| @@ -1 +1,21 @@ | |||
| export const CommentInfo = () => <>Put the comment here</>; | |||
| export const CommentInfo = ({ comment }) => { | |||
There was a problem hiding this comment.
Consider adding prop type validation to ensure that the comment prop is provided and contains the expected fields (name, email, and body). This can help prevent runtime errors if the component is used incorrectly.
| return ( | ||
| <div className="CommentList"> | ||
| {comments.map(comment => ( | ||
| <CommentInfo key={comment.id} comment={comment}/> |
There was a problem hiding this comment.
Ensure that each comment object has a unique id property. Using a unique key is important for React to efficiently update and manage the list of components.
| import { UserInfo } from '../UserInfo/UserInfo'; | ||
| import { CommentList } from '../CommentList/CommentList'; | ||
|
|
||
| export const PostInfo = ({ post }) => { |
There was a problem hiding this comment.
Consider adding prop type validation to ensure that the post prop is provided and contains the expected fields (title, body, user, and comments). This can help prevent runtime errors if the component is used incorrectly.
| <div className="PostInfo__header"> | ||
| <h3 className="PostInfo__title">{post.title}</h3> | ||
|
|
||
| <UserInfo key={post.user.id} user={post.user} /> |
There was a problem hiding this comment.
Ensure that the post.user object is always provided and contains the expected fields. If post.user is null or undefined, it will cause a runtime error.
| return ( | ||
| <div className="PostList"> | ||
| {posts.map(post => ( | ||
| <PostInfo key={post.id} post={post} /> |
There was a problem hiding this comment.
Ensure that each post object has a unique id property. Using a unique key is important for React to efficiently update and manage the list of components.
| export const UserInfo = () => <>Put the user here</>; | ||
| import './UserInfo.scss'; | ||
|
|
||
| export const UserInfo = ({ user }) => { |
There was a problem hiding this comment.
Consider adding prop type validation to ensure that the user prop is provided and contains the expected fields (name and email). This can help prevent runtime errors if the component is used incorrectly.
https://Zaransoftline.github.io/react_static-list-of-posts-js/