solution #1185

YuliiaShatkovska · 2024-10-25T12:18:08Z

demo - https://yuliiashatkovska.github.io/react_dynamic-list-of-posts/

не підтягуються стилі з бульми для цих елементів ▿

та не проходить тест, хоча наче має працювати все коректно should not request posts from API:
AssertionError: Timed out retrying after 4000ms: expected posts to not have been called at least once
at Context.eval (webpack://react_dynamic-list-of-posts/./cypress/integration/page.spec.js:236:25)

на qna ментор сказав запушити так

Valeraom

Good job!

There are several no big problems, I mentioned below.

Valeraom · 2024-10-26T12:07:59Z

src/components/UserSelector.tsx

-            Chelsey Dietrich
-          </a>
+      {isClicked && (
+        <div className="dropdown-menu" id="dropdown-menu" role="menu">


The dropdown menu should close after clicking on other elements (when it loses focus)

Valeraom · 2024-10-26T12:12:32Z

src/components/UserSelector.tsx

+  const [isClicked, setIsClicked] = useState(false);
+
+  const handleSelectUser = (user: User) => {
+    setUserSelected(user);


You need also to reset the selected post

Valeraom · 2024-10-26T12:22:22Z

src/components/PostDetails.tsx

+            />
+          )}
+
+          {!isShownForm && !isLoadingComments && (


If the error occurs. "write a comment" button should be hidden

mateacademy-ai-mentor

Thank you for your hard work on this pull request! While your code is mostly well-implemented, there are a few critical issues that need to be addressed before we can approve it.

Error Handling: The error handling across various parts of the code is minimal and generic. It's important to provide more informative error messages, possibly including status codes or response texts, to aid in debugging and user feedback. Specifically, the handleDeleteComment function lacks error handling, and the addComment function should set an error state to inform the user when an addition fails.
Variable Naming: There's a repeated typo in the variable name comentText. It should be corrected to commentText for consistency and to avoid confusion.
Finally Block: The finally block in your useEffect is currently empty. Consider removing it if no cleanup or final actions are needed.

By addressing these issues, you'll improve the robustness and clarity of your code. Keep up the great work, and I'm confident you'll nail it with these adjustments! 😊

✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨

🔄 Fix the issues, commit the changes, and then re-request my review using the Re-request review button in the Reviewers tab.

mateacademy-ai-mentor · 2024-10-26T15:06:25Z

src/App.tsx

+      .catch(() => setError('Something went wrong!'))
+      .finally(() => {});


The error handling here is quite generic. It might be beneficial to provide more specific error messages based on the type of error encountered. This will help in debugging and understanding the issue better.

mateacademy-ai-mentor · 2024-10-26T15:06:25Z

src/App.tsx

+    getUsers()
+      .then(setUsers)
+      .catch(() => setError('Something went wrong!'))
+      .finally(() => {});


The finally block is currently empty and does not perform any actions. Consider removing it if no cleanup or final actions are needed after the promise resolution.

mateacademy-ai-mentor · 2024-10-26T15:06:25Z

src/components/NewCommentForm.tsx

+  const [authorNameError, setAuthorNameError] = useState(false);
+  const [authorEmail, setAuthorEmail] = useState('');
+  const [authorEmailError, setAuthorEmailError] = useState(false);
+  const [comentText, setComentText] = useState('');


There is a typo in the variable name comentText. It should be commentText to maintain consistency and avoid confusion.

mateacademy-ai-mentor · 2024-10-26T15:06:25Z

src/components/NewCommentForm.tsx

+
+      case 'body':
+        setCommentTextError(false);
+        setComentText(event.target.value.trim());


The variable comentText is misspelled. It should be commentText.

mateacademy-ai-mentor · 2024-10-26T15:06:25Z

src/components/NewCommentForm.tsx

+
+    const preparedAuthorName = authorName.trim();
+    const preparedAuthorEmail = authorEmail.trim();
+    const preparedCommentText = comentText.trim();


The variable comentText is misspelled. It should be commentText.

mateacademy-ai-mentor · 2024-10-26T15:06:25Z

src/components/NewCommentForm.tsx

+    addComment(commentToAdd)
+      .then(newComment => {
+        setComments(currentComments => [...currentComments, newComment]);
+        setComentText('');


The variable comentText is misspelled. It should be commentText.

mateacademy-ai-mentor · 2024-10-26T15:06:26Z

src/components/NewCommentForm.tsx

+        setComments(currentComments => [...currentComments, newComment]);
+        setComentText('');
+      })
+      .catch(() => 'Something Wrong')


The error handling here is not effective. Consider setting an error state to display a message to the user when the comment addition fails.

mateacademy-ai-mentor · 2024-10-26T15:06:26Z

src/components/PostDetails.tsx

+  const handleDeleteComment = (id: Comment['id']) => {
+    deleteComment(id).then(() =>
+      setComments(currentComments =>
+        currentComments.filter(comment => comment.id !== id),
+      ),
+    );


The handleDeleteComment function lacks error handling. Consider adding a catch block to handle potential errors during the deletion process and inform the user appropriately.

mateacademy-ai-mentor · 2024-10-26T15:06:26Z

src/utils/fetchClient.ts

-    .then(response => response.json());
+    .then(response => {
+      if (!response.ok) {
+        throw new Error();


The error handling here is minimal. Consider throwing an error with a more informative message, such as including the status code or response text, to aid in debugging.

mateacademy-ai-mentor

Thank you for your submission! Your code generally meets the task requirements, and I'm approving it to help you move forward with your learning. However, there are a few important areas for improvement:

PropTypes: Ensure that all components have propTypes defined for type checking. This is crucial for maintaining robust code.
Error Handling: Consider using try-catch blocks for error handling instead of .catch(). This aligns with best practices and provides clearer error management.
Specific Error Messages: Avoid generic error messages like 'Something wrong'. Providing specific error details can greatly aid in debugging and user feedback.
Dropdown Toggle Logic: The is-active class is always applied to the dropdown. Make sure it is conditionally applied based on the isClicked state.
State Management: Ensure that state management logic is clear and correct, such as initializing the error state with null instead of an empty string.
Complex Conditions: Review complex conditions to ensure they accurately reflect the intended logic, such as the condition for displaying the 'No posts yet' message.
Function Implementation: Verify that functions like getPosts correctly handle parameters like userId to avoid unexpected behavior.

These improvements will enhance the functionality and maintainability of your code. Keep up the great work, and continue to learn from these experiences! 😊

✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨

mateacademy-ai-mentor · 2024-10-26T15:19:32Z

src/App.tsx

+  const [selectedPost, setSelectedPost] = useState<Post | null>(null);
+
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState('');


Consider initializing the error state with null instead of an empty string to better represent the absence of an error. This will also help in conditionally rendering error messages more clearly.

mateacademy-ai-mentor · 2024-10-26T15:19:32Z

src/App.tsx

+    setError('');
+    setIsLoading(true);
+
+    getPosts(userId)


Ensure that the getPosts function is correctly implemented to accept a userId and return a promise. If getPosts does not handle the userId correctly, it might lead to unexpected behavior.

mateacademy-ai-mentor · 2024-10-26T15:19:32Z

src/App.tsx

+                  </div>
+                )}
+
+                {userSelected && !error && posts.length === 0 && !isLoading && (


The condition userSelected && !error && posts.length === 0 && !isLoading might be complex. Ensure that each part of this condition is necessary and correctly reflects the intended logic for displaying the 'No posts yet' message.

mateacademy-ai-mentor · 2024-10-26T15:19:32Z

src/components/NewCommentForm.tsx

+
+  const handleResetForm = () => {
+    setAuthorName('');
+    setAuthorEmailError(false);


This line mistakenly sets setAuthorEmailError(false) twice. The first occurrence should be setAuthorNameError(false) to reset the name error state.

mateacademy-ai-mentor · 2024-10-26T15:19:33Z

src/components/NewCommentForm.tsx

+        setComments(currentComments => [...currentComments, newComment]);
+        setCommentText('');
+      })
+      .catch(() => 'Something Wrong')


The catch block should handle errors more explicitly. Consider displaying an error message to the user or logging the error for debugging purposes.

mateacademy-ai-mentor · 2024-10-26T15:19:33Z

src/components/PostDetails.tsx

+          currentComments.filter(comment => comment.id !== id),
+        ),
+      )
+      .catch(() => 'Unable to delete post');


The catch block for deleteComment should handle errors more explicitly. Consider displaying an error message to the user or logging the error for debugging purposes.

mateacademy-ai-mentor · 2024-10-26T15:19:33Z

src/components/PostDetails.tsx

+
+    getComments(selectedPost.id)
+      .then(setComments)
+      .catch(() => setError('Something went wrong'))


The error message in the catch block for getComments is generic. Consider providing more specific error information to help users understand what went wrong.

mateacademy-ai-mentor · 2024-10-26T15:19:33Z

src/components/UserSelector.tsx


-export const UserSelector: React.FC = () => {
  return (
    <div data-cy="UserSelector" className="dropdown is-active">


The class is-active is always applied to the dropdown, which might not be the intended behavior. Consider conditionally applying this class based on the isClicked state to properly toggle the dropdown visibility.

mateacademy-ai-mentor · 2024-10-26T15:19:33Z

src/utils/fetchClient.ts

-    .then(response => response.json());
+    .then(response => {
+      if (!response.ok) {
+        throw new Error('Something wrong');


The error message 'Something wrong' is too generic. Consider providing more specific error information, such as the status code or response text, to help with debugging and user feedback.

solution

24df96b

Valeraom approved these changes Oct 26, 2024

View reviewed changes

mateacademy-ai-mentor suggested changes Oct 26, 2024

View reviewed changes

solution

3638d1f

YuliiaShatkovska requested a review from mateacademy-ai-mentor October 26, 2024 15:17

mateacademy-ai-mentor approved these changes Oct 26, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

solution #1185

solution #1185

YuliiaShatkovska commented Oct 25, 2024

Valeraom left a comment

Valeraom Oct 26, 2024

Valeraom Oct 26, 2024

Valeraom Oct 26, 2024

mateacademy-ai-mentor left a comment

mateacademy-ai-mentor Oct 26, 2024

mateacademy-ai-mentor Oct 26, 2024

mateacademy-ai-mentor Oct 26, 2024

mateacademy-ai-mentor Oct 26, 2024

mateacademy-ai-mentor Oct 26, 2024

mateacademy-ai-mentor Oct 26, 2024

mateacademy-ai-mentor Oct 26, 2024

mateacademy-ai-mentor Oct 26, 2024

mateacademy-ai-mentor Oct 26, 2024

mateacademy-ai-mentor left a comment

mateacademy-ai-mentor Oct 26, 2024

mateacademy-ai-mentor Oct 26, 2024

mateacademy-ai-mentor Oct 26, 2024

mateacademy-ai-mentor Oct 26, 2024

mateacademy-ai-mentor Oct 26, 2024

mateacademy-ai-mentor Oct 26, 2024

mateacademy-ai-mentor Oct 26, 2024

mateacademy-ai-mentor Oct 26, 2024

mateacademy-ai-mentor Oct 26, 2024

		.catch(() => setError('Something went wrong!'))
		.finally(() => {});

solution #1185

Are you sure you want to change the base?

solution #1185

Conversation

YuliiaShatkovska commented Oct 25, 2024

Valeraom left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mateacademy-ai-mentor left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mateacademy-ai-mentor left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment