solution 0.01` #1208

StanislavKapytsia · 2024-12-18T18:55:40Z

Implement the App with ability to show posts of a selected user. Each post can
be opened in the sidebar with its comments. There should delete a comment and a
form to add new comments.
Install Prettier Extention and use this VSCode settings to enable format on save.

Here is the working version

Learn the utils/fetchClient.ts and use it to interact with the API (tests expect that you each API request is sent after 300 ms delay);
Initially the App shows the UserSelector and a paragraph No user selected in the main content block.
- load users from the API on page load;
- implement the UserSelector as a dropdown using the given markup;
When a user is selected load the user's posts form the API and show them using a table in the main content clock;
- show the <Loader> while waiting for the API response;
- show an error notification if posts loading fails;
- if the user has no posts show the No posts yet notification.
Add the Sidebar--open class to the sidebar when a post is selected;
- the post details should appear there immediately;
- the post commnets should be loaded from the API;
- the Loader is shown before comments are loaded;
- CommentsError notification is show on loading error;
- NoComments message is shown if the post does not have comments yet;
Show the Write a comment button below the comments
- after click hide the button and show the form to add new comment;
- the form stays visible until the other post is opened;
- the form should be implemented as a separate component;
The form requires an author's name and email and a comment text.
- show errors only after the form is submitted;
- remove an error on the field change;
- keep the name and email after the successful submit but clear a comment text;
- The Clear button should also clear all errors;
- Add the is-loading class to the submit button while waiting for a response;
- Add the new comment received as a response from the API to the end of the list;
Implement comment deletion
- Delete the commnet immediately not waiting for the server response to improve the UX.
(*) Handle Add and Delete errors so the user can retry

mateacademy-ai-mentor

Thank you for your hard work on this project! While you've made great progress, there are a few critical issues that need to be addressed to ensure the application functions correctly and meets the task requirements:

Typographical Errors: There are several typos in function and variable names, such as setSelectedpost, addCommetns, and updatedCommnets. These should be corrected to setSelectedPost, addComments, and updatedComments respectively, to maintain consistency and avoid potential bugs.
State Management: The emptyPosts state is not reset when posts are successfully fetched, which could lead to incorrect UI behavior. Ensure to reset this state appropriately.
Form Validation Logic: The logic for checking empty form inputs in the hasEmptyForm function is incorrect. It should use logical OR (||) instead of logical AND (&&) to ensure proper validation.
Error Handling: Setting setComments([]) in the catch block will clear all comments on error, which might not be the intended behavior. Consider revising this logic to preserve existing comments.
PropTypes and Key Generation: The code lacks propTypes definitions for components, and keys are generated on render using comment.id. These should be addressed to follow best practices.

Please address these issues to ensure the code meets the specified requirements and functions as expected. Keep up the great work, and don't hesitate to reach out if you need further assistance! 😊

✨ 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-12-18T18:57:12Z

src/App.tsx


-              <Loader />
+  const [posts, setPosts] = useState<Post[]>([]);
+  const [selectedPost, setSelectedpost] = useState<Post | null>(null);


The state setter function setSelectedpost is inconsistently named. It should be setSelectedPost to match the naming convention of selectedPost and avoid potential bugs.

mateacademy-ai-mentor · 2024-12-18T18:57:12Z

src/App.tsx

+                  users={users}
+                  userId={userId}
+                  setUserId={setUserId}
+                  setSelectedpost={setSelectedpost}


The prop setSelectedpost should be renamed to setSelectedPost to maintain consistency with the state variable naming.

mateacademy-ai-mentor · 2024-12-18T18:57:12Z

src/App.tsx

+                  <PostsList
+                    posts={posts}
+                    selectedPost={selectedPost}
+                    setSelectedpost={setSelectedpost}


The prop setSelectedpost should be renamed to setSelectedPost to maintain consistency with the state variable naming.

mateacademy-ai-mentor · 2024-12-18T18:57:12Z

src/App.tsx

-              <Loader />
+  const [posts, setPosts] = useState<Post[]>([]);
+  const [selectedPost, setSelectedpost] = useState<Post | null>(null);
+  const [emptyPosts, setEmptyPosts] = useState(false);


The emptyPosts state is not reset when posts are successfully fetched. Consider setting setEmptyPosts(false) after setting posts to ensure the UI reflects the correct state.

mateacademy-ai-mentor · 2024-12-18T18:57:12Z

src/components/NewCommentForm.tsx

+    return doesEmpty;
+  };
+
+  const addCommetns = async () => {


There is a typo in the function name addCommetns. It should be corrected to addComments to reflect its purpose accurately.

mateacademy-ai-mentor · 2024-12-18T18:57:13Z

src/components/PostsList.tsx

+}) => {
+  const handleButtonSwitch = (currentPost: Post) => {
+    if (selectedPost && selectedPost.id === currentPost.id) {
+      setSelectedpost(null);


The function setSelectedpost should be renamed to setSelectedPost to maintain consistency with the naming convention used for state variables and props.

mateacademy-ai-mentor · 2024-12-18T18:57:13Z

src/components/PostsList.tsx

+    if (selectedPost && selectedPost.id === currentPost.id) {
+      setSelectedpost(null);
+    } else {
+      setSelectedpost(currentPost);


The function setSelectedpost should be renamed to setSelectedPost to maintain consistency with the naming convention used for state variables and props.

mateacademy-ai-mentor · 2024-12-18T18:57:13Z

src/components/UserSelector.tsx

+  users: User[];
+  userId: number | null;
+  setUserId: React.Dispatch<React.SetStateAction<number | null>>;
+  setSelectedpost: React.Dispatch<React.SetStateAction<Post | null>>;


The prop setSelectedpost should be renamed to setSelectedPost to maintain consistency with the naming convention used for state variables and props.

mateacademy-ai-mentor · 2024-12-18T18:57:13Z

src/components/UserSelector.tsx

+  users,
+  userId,
+  setUserId,
+  setSelectedpost,


The prop setSelectedpost should be renamed to setSelectedPost to maintain consistency with the naming convention used for state variables and props.

mateacademy-ai-mentor · 2024-12-18T18:57:13Z

src/components/UserSelector.tsx

+                setUserId(user.id);
+                setUserName(user.name);
+                setShowList(false);
+                setSelectedpost(null);


The function setSelectedpost should be renamed to setSelectedPost to maintain consistency with the naming convention used for state variables and props.

mateacademy-ai-mentor

Review Summary

Great effort on addressing several issues from the previous review! 🎉 Here are some key points and areas for improvement:

Typographical Errors: You've successfully corrected typographical errors in function and variable names, such as setSelectedPost, addComments, and updatedComments. This is crucial for maintaining code readability and functionality.
State Management: The emptyPosts state is now reset when posts are successfully fetched, aligning with the task requirements. However, ensure that the condition emptyPosts && posts.length === 0 && userId is necessary and correctly managed.
Form Validation Logic: The logic for checking empty form inputs should use logical OR (||) instead of logical AND (&&) to ensure proper validation. This change will prevent form submission if any input is empty.
Error Handling: While you've revised the error handling logic in the addComments function, setting setComments([]) in the catch block might not be the intended behavior. Consider preserving existing comments and providing more context-specific error messages to enhance user experience.
PropTypes and Key Generation: The code lacks propTypes definitions for components, which is essential for type-checking and maintaining robust code. Additionally, avoid generating keys on render using comment.id.
Unused Comments: Remember to remove any unused comments in the code to keep it clean and maintainable.

The decision to approve this pull request is made to help you move forward with your learning journey. Please review the comments and address these issues in future iterations to improve your code quality and functionality. 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! ✨

mateacademy-ai-mentor · 2024-12-18T19:26:03Z

src/App.tsx

-              <Loader />
+  const [posts, setPosts] = useState<Post[]>([]);
+  const [selectedPost, setSelectedPost] = useState<Post | null>(null);
+  const [emptyPosts, setEmptyPosts] = useState(false);


The emptyPosts state is not reset when posts are successfully fetched. Ensure to reset this state appropriately to avoid incorrect UI behavior.

mateacademy-ai-mentor · 2024-12-18T19:26:04Z

src/App.tsx


-              <Loader />
+  const [posts, setPosts] = useState<Post[]>([]);
+  const [selectedPost, setSelectedPost] = useState<Post | null>(null);


Ensure that the function name setSelectedPost is correctly spelled and matches its usage throughout the code.

mateacademy-ai-mentor · 2024-12-18T19:26:04Z

src/App.tsx

+            setPosts(currentPosts);
+          }
+        } catch {
+          setCatchError(true);


Setting setCatchError(true) in the catch block will trigger an error notification, but consider revising this logic to preserve existing comments or provide more context-specific error handling.

mateacademy-ai-mentor · 2024-12-18T19:26:04Z

src/App.tsx

+                  </div>
+                )}
+
+                {emptyPosts && posts.length === 0 && userId && (


The condition emptyPosts && posts.length === 0 && userId might not be necessary if emptyPosts is managed correctly. Ensure that the logic for displaying this message aligns with the application's requirements.

mateacademy-ai-mentor · 2024-12-18T19:26:04Z

src/components/NewCommentForm.tsx

+      saveInputDataOnSuccess();
+    } catch {
+      setLoadingError(true);
+      setComments([]);


Setting setComments([]) in the catch block will clear all comments on error, which might not be the intended behavior. Consider revising this logic to preserve existing comments or handle errors more gracefully.

mateacademy-ai-mentor · 2024-12-18T19:26:04Z

src/components/NewCommentForm.tsx

+      { value: commentText, setError: setCommentTextError },
+    ];
+
+    const allEmpty = inputs.every(input => !validateInput(input.value));


The logic for checking empty form inputs in the allEmpty variable is incorrect. It should use logical OR (||) instead of logical AND (&&) to ensure proper validation. This will ensure that the form is not submitted if any input is empty.

mateacademy-ai-mentor · 2024-12-18T19:26:04Z

src/components/PostDetails.tsx

+            setComments(currentComments);
+          }
+        } catch {
+          setLoadingError(true);


Ensure that the error handling logic here does not inadvertently clear important data or state. Consider providing more context-specific error messages or handling.

mateacademy-ai-mentor · 2024-12-18T19:26:04Z

src/components/PostDetails.tsx

+      if (deletedComment) {
+        setTimeout(() => {
+          setComments([...updatedComments, deletedComment]);
+          setLoadingError(true);


Setting setLoadingError(true) after attempting to restore a deleted comment might not be the intended behavior. Ensure that the error handling logic aligns with the application's requirements.

solution 0.0`

823d0dd

mateacademy-ai-mentor suggested changes Dec 18, 2024

View reviewed changes

solution 0.02

a798946

StanislavKapytsia requested a review from mateacademy-ai-mentor December 18, 2024 19:24

mateacademy-ai-mentor approved these changes Dec 18, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

solution 0.01` #1208

solution 0.01` #1208

StanislavKapytsia commented Dec 18, 2024

mateacademy-ai-mentor left a comment

mateacademy-ai-mentor Dec 18, 2024

mateacademy-ai-mentor Dec 18, 2024

mateacademy-ai-mentor Dec 18, 2024

mateacademy-ai-mentor Dec 18, 2024

mateacademy-ai-mentor Dec 18, 2024

mateacademy-ai-mentor Dec 18, 2024

mateacademy-ai-mentor Dec 18, 2024

mateacademy-ai-mentor Dec 18, 2024

mateacademy-ai-mentor Dec 18, 2024

mateacademy-ai-mentor Dec 18, 2024

mateacademy-ai-mentor left a comment

mateacademy-ai-mentor Dec 18, 2024

mateacademy-ai-mentor Dec 18, 2024

mateacademy-ai-mentor Dec 18, 2024

mateacademy-ai-mentor Dec 18, 2024

mateacademy-ai-mentor Dec 18, 2024

mateacademy-ai-mentor Dec 18, 2024

mateacademy-ai-mentor Dec 18, 2024

mateacademy-ai-mentor Dec 18, 2024

solution 0.01` #1208

Are you sure you want to change the base?

solution 0.01` #1208

Conversation

StanislavKapytsia commented Dec 18, 2024

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

Choose a reason for hiding this comment

mateacademy-ai-mentor left a comment

Choose a reason for hiding this comment

Review Summary

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