react_dynamic-list-of-posts solution #874
Conversation
NataliGru
commented
Aug 2, 2023
•
NataliGru
commented
- DEMO LINK
| Add | ||
| </button> | ||
| </div> | ||
|
|
||
| <div className="control"> | ||
| {/* eslint-disable-next-line react/button-has-type */} | ||
| <button type="reset" className="button is-link is-light"> | ||
| <button |
There was a problem hiding this comment.
You are using 'eslint-disable-next-line react/button-has-type' to disable the linter warning. Instead of disabling the linter, try to solve the issue. If the linter is giving a warning, it's probably for a good reason.
| }) | ||
| .finally(() => { | ||
| setIsLoading(false); | ||
| setBody(''); |
There was a problem hiding this comment.
In the finally block of addComment, it only clears the body state, it should also clear name and email states for consistency.
| setComments(prev => prev.filter(comm => comm.id !== commentId)); | ||
|
|
||
| postService.deleteComment(commentId) | ||
| .catch(() => { |
There was a problem hiding this comment.
In case of an error in deleting the comment, only 'postError' is set to true and the 'comments' state is reverted. It would be better to show a descriptive error message to the user.
| const deleteComment = (commentId: number) => { | ||
| const currentComments = comments; | ||
|
|
||
| setComments(prev => prev.filter(comm => comm.id !== commentId)); |
There was a problem hiding this comment.
Optimistic update is performed by directly modifying the state before the result of the delete request is known. In case of an error, this could lead to data inconsistency between client and server.
| }, [post]); | ||
|
|
||
| const deleteComment = (commentId: number) => { | ||
| const currentComments = comments; |
There was a problem hiding this comment.
The 'currentComments' is defined but it is not updated when the comments state changes. This may lead to using stale data when an error occurs during comment deletion.
| }; | ||
|
|
||
| const onAddComment = (comment: Comment) => { | ||
| setComments(prev => [...prev, comment]); |
There was a problem hiding this comment.
Optimistic update is performed by directly modifying the state before the result of the add comment request is known. In case of an error, this could lead to data inconsistency between client and server.
|
|
||
| <Loader /> | ||
| {selectedUser && isLoading && <Loader />} |
There was a problem hiding this comment.
The loader should also show when fetching users. Consider updating this condition.
|
|
||
| if (selectedUser) { | ||
| postService | ||
| .getPosts(selectedUser?.id) |
There was a problem hiding this comment.
The optional chaining in 'selectedUser?.id' is not needed since you've already checked if 'selectedUser' is truthy in the if condition above.
| setError(false); | ||
|
|
||
| postService | ||
| .getUsers() |
There was a problem hiding this comment.
You are not handling the loading state for fetching users. Consider updating the 'isLoading' state variable before and after the users fetch request.
