v1 #1199
v1 #1199
Conversation
There was a problem hiding this comment.
Great job on your submission! 🎉 Your code meets most of the task requirements and constraints, and it's clear you've put a lot of effort into following best practices. Here are a few areas to focus on for improvement:
-
PropTypes: Consider adding
propTypesdefinitions for your components to ensure type-checking of props in React. -
Error Handling: Implement retry logic for adding and deleting comments to enhance user experience.
-
State Initialization with Props: Avoid initializing state directly with props to prevent unexpected behavior.
-
Unused Comments: Clean up any commented-out code or unnecessary comments to maintain code clarity.
-
Key Generation: Ensure stable keys for list items, avoiding dynamic generation during render.
These improvements will help you refine your skills and produce even more robust code. Keep up the great work, and continue learning from these experiences! 🚀
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
src/App.tsx
Outdated
| <div className="block" data-cy="MainContent"> | ||
| <p data-cy="NoSelectedUser">No user selected</p> | ||
| useEffect(() => { | ||
| getUsers().then(fetchedUsers => setUsers(fetchedUsers)); |
There was a problem hiding this comment.
| getUsers().then(fetchedUsers => setUsers(fetchedUsers)); | |
| getUsers() | |
| .then(setUsers); |
src/components/PostsList.tsx
Outdated
| <tr data-cy="Post" key={post.id}> | ||
| <td data-cy="PostId">{post.id}</td> | ||
|
|
||
| <td data-cy="PostTitle">{post.title}</td> | ||
|
|
||
| <td className="has-text-right is-vcentered"> | ||
| <button | ||
| type="button" | ||
| data-cy="PostButton" |
There was a problem hiding this comment.
Move this logic to the PostItem component
src/components/PostsList.tsx
Outdated
| <tr data-cy="Post" key={post.id}> | ||
| <td data-cy="PostId">{post.id}</td> | ||
|
|
||
| <td data-cy="PostTitle">{post.title}</td> |
src/components/PostsList.tsx
Outdated
| onClick={() => { | ||
| if (selectedPost?.id === post.id) { | ||
| setSelectedPost(null); | ||
| } else { | ||
| setSelectedPost(post); | ||
| } | ||
| }} |
There was a problem hiding this comment.
Move this logic from jsx to the helper function and use it here
src/App.tsx
Outdated
| </div> | ||
| )} | ||
|
|
||
| {!error && selectedUser && posts.length > 0 && !loading && ( |
There was a problem hiding this comment.
| {!error && selectedUser && posts.length > 0 && !loading && ( | |
| {!error && selectedUser && !!posts.length && !loading && ( |
https://daryna-kukharets.github.io/react_dynamic-list-of-posts/