Develop #1242

taniavozniuk · 2025-02-13T13:19:26Z

mateacademy-ai-mentor

Thank you for your hard work on this project! There are a few critical issues that need to be addressed before we can approve the pull request:

Naming Conventions: The prop setSelectedPosts should be renamed to setSelectedPost to ensure consistency and clarity in your code. This change is necessary in both App.tsx and PostsList.tsx.
Error Handling: It's important to use try {..} catch blocks for error handling, especially when fetching data. This will improve clarity and error management in your components.
Typo Correction: The state variable isFormVisiblem appears to be a typo. Please correct it to isFormVisible for better readability.
Unused Props: The postId prop in NewCommentForm.tsx and setError prop in UserSelector.tsx are defined but not used. Consider removing them if they're unnecessary or ensure they're used appropriately.

These changes will enhance the functionality and maintainability of your code. Keep up the great work, and feel free to reach out if you have any questions! 😊

✨ 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 · 2025-02-13T13:22:01Z

src/App.tsx

+                {posts.length > 0 && (
+                  <PostsList
+                    posts={posts}
+                    setSelectedPosts={setPostId}


The prop setSelectedPosts should be renamed to setSelectedPost to follow the naming conventions for event handler functions and props in React.

mateacademy-ai-mentor · 2025-02-13T13:22:02Z

src/App.tsx

+    getPostByUserId(selectedUser)
+      .then(data => {
+        setPosts(data);
+      })
+      .catch(() => {
+        setError('Error');
+        setPosts([]);
+      })
+      .finally(() => {
+        setIsLoading(false);
+      });


Consider using a try {..} catch block for error handling when fetching posts. This approach is recommended for clarity and better error management.

mateacademy-ai-mentor · 2025-02-13T13:22:02Z

src/components/NewCommentForm.tsx

+  commentLoading: boolean;
+}
+
+export const NewCommentForm: React.FC<NewCommentProps> = ({ onSubmit }) => {


The postId prop is defined in the NewCommentProps interface but is not used within the NewCommentForm component. Consider removing it if it's unnecessary, or ensure it's used appropriately if needed.

mateacademy-ai-mentor · 2025-02-13T13:22:02Z

src/components/PostDetails.tsx

+  const selectedPost = posts.find(post => post.id === postId); // обраний пост
+  const [commentError, setCommentError] = useState(''); // помилка
+  const [commentLoading, setCommentLoading] = useState(false); // завантаження
+  const [isFormVisiblem, setIsFormVisiblem] = useState(false); // старн форми


The state variable isFormVisiblem seems to be a typo. Consider renaming it to isFormVisible for clarity and consistency.

mateacademy-ai-mentor · 2025-02-13T13:22:02Z

src/components/PostDetails.tsx

+      .catch(() => {
+        setCommentError('error');
+      })


Consider using a try {..} catch block for error handling when fetching comments. This approach is recommended for clarity and better error management.

mateacademy-ai-mentor · 2025-02-13T13:22:02Z

src/components/PostDetails.tsx

+      .catch(() => {
+        setCommentError('Error');


Ensure consistent error messages throughout the component. The error message here is 'Error', while elsewhere it's 'error'. Consistency helps with debugging and user experience.

mateacademy-ai-mentor · 2025-02-13T13:22:02Z

src/components/PostsList.tsx

+
+interface PostProps {
+  posts: Post[];
+  setSelectedPosts: (post: Post | null) => void;


The prop setSelectedPosts should be renamed to setSelectedPost to reflect that it handles a single post selection. This change will improve code readability and consistency.

mateacademy-ai-mentor · 2025-02-13T13:22:02Z

src/components/UserSelector.tsx

+  setError: (message: string) => void;
+}
+
+export const UserSelector: React.FC<UserProps> = ({


The setError prop is defined in the UserProps interface but is not used within the UserSelector component. Consider removing it if it's unnecessary, or ensure it's used appropriately if needed.

mateacademy-ai-mentor · 2025-02-13T13:22:02Z

src/utils/fetchClient.ts

+      .then(() => fetch(BASE_URL + url, options))
+      .then(response => {
+        if (!response.ok) {
+          throw new Error();


Consider providing a descriptive error message when throwing an error for a non-OK response. This will help with debugging and understanding the nature of the error.

mateacademy-ai-mentor

Great job on addressing many of the issues from the previous review! 🎉 Your code is shaping up well, but there are still a few areas that need attention to enhance its quality and maintainability:

Naming Conventions: Ensure consistency by renaming the selectedPosts prop to selectedPost across your components. This will help avoid confusion and align with naming conventions.
Error Handling: While you've started incorporating try {..} catch blocks, make sure all asynchronous operations, especially API calls, are wrapped in these blocks. This includes functions like getCommentsByPostId, getPostByUserId, and getUsers.
Unused Props: Review your components for any unused props like setError and postId. Remove them if they're unnecessary or ensure they're utilized effectively.
Typo Correction: Correct the typo in the state variable setisFormVisible to setIsFormVisible for better readability.
Error Messages: Consider providing more informative error messages in your throw new Error() statements to aid in debugging.

These improvements will not only enhance the robustness and clarity of your code but also help you grow as a developer. Keep up the good work, and make sure to address these points in future iterations to avoid similar issues. Happy coding! 🚀

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

mateacademy-ai-mentor · 2025-02-13T13:29:09Z

src/App.tsx

+                    setSelectedPost={setPostId}
+                    selectedPosts={postId}


The prop setSelectedPost is correctly named, but the prop selectedPosts should be renamed to selectedPost to ensure consistency and clarity in your code. This change is necessary to match the naming conventions and avoid confusion.

mateacademy-ai-mentor · 2025-02-13T13:29:09Z

src/App.tsx

+    getPostByUserId(selectedUser)
+      .then(data => {
+        setPosts(data);
+      })
+      .catch(() => {
+        setError('Error');
+        setPosts([]);
+      })
+      .finally(() => {
+        setIsLoading(false);
+      });


Consider wrapping the getPostByUserId call in a try {..} catch block for better error handling. This will improve clarity and error management in your component, as recommended in the previous review.

mateacademy-ai-mentor · 2025-02-13T13:29:09Z

src/components/NewCommentForm.tsx

+interface NewCommentProps {
+  onSubmit: (newComment: { name: string; email: string; body: string }) => void;
+}


The postId prop is defined but not used in this component. Consider removing it if it's unnecessary, or ensure it's used appropriately if needed.

mateacademy-ai-mentor · 2025-02-13T13:29:09Z

src/components/PostDetails.tsx

+  const selectedPost = posts.find(post => post.id === postId); // обраний пост
+  const [commentError, setCommentError] = useState(''); // помилка
+  const [commentLoading, setCommentLoading] = useState(false); // завантаження
+  const [isFormVisible, setisFormVisible] = useState(false); // старн форми


There is a typo in the state variable setisFormVisible. It should be corrected to setIsFormVisible for better readability and consistency.

mateacademy-ai-mentor · 2025-02-13T13:29:10Z

src/components/PostDetails.tsx

+    getCommentsByPostId(postId)
+      .then(data => {
+        setComment(data);
+      })
+      .catch(() => {
+        setCommentError('error');
+      })
+      .finally(() => {
+        setCommentLoading(false);
+      });


Consider wrapping the getCommentsByPostId call in a try {..} catch block for better error handling. This will improve clarity and error management in your component.

mateacademy-ai-mentor · 2025-02-13T13:29:10Z

src/utils/services.ts

+export const getUsers = () => {
+  return client.get<User[]>('/users');
+};


Consider adding error handling to the getUsers function. This will improve robustness and provide better feedback in case of failures when fetching users.

mateacademy-ai-mentor · 2025-02-13T13:29:10Z

src/utils/services.ts

+export const getPostByUserId = (id: number) => {
+  return client.get<Post[]>(`/posts?userId=${id}`);
+};


Consider adding error handling to the getPostByUserId function. This will improve robustness and provide better feedback in case of failures when fetching posts by user ID.

mateacademy-ai-mentor · 2025-02-13T13:29:10Z

src/utils/services.ts

+export const getCommentsByPostId = (postId: number) => {
+  return client.get<Comment[]>(`/comments?postId=${postId}`);
+};


Consider adding error handling to the getCommentsByPostId function. This will improve robustness and provide better feedback in case of failures when fetching comments by post ID.

mateacademy-ai-mentor · 2025-02-13T13:29:10Z

src/utils/services.ts

+export const postCommentsByPostId = (
+  postId: number,
+  comment: Omit<Comment, 'id'>,
+) => {
+  return client.post<Comment>(`/comments`, {
+    postId: postId,
+    name: comment.name,
+    email: comment.email,
+    body: comment.body,
+  });
+};


Consider adding error handling to the postCommentsByPostId function. This will improve robustness and provide better feedback in case of failures when posting comments.

mateacademy-ai-mentor · 2025-02-13T13:29:10Z

src/utils/services.ts

+export const deleteCommentsByPostId = (commentId: number) => {
+  return client.delete(`/comments/${commentId}`);
+};


Consider adding error handling to the deleteCommentsByPostId function. This will improve robustness and provide better feedback in case of failures when deleting comments by post ID.

taniavozniuk added 8 commits February 11, 2025 12:02

add task solution

208acab

Solution

441c42b

add task solution

4c67fff

add task solution

6c8e3b0

add task solution

aa1bb1d

add task solution

edbde07

add task solution

dd0b80b

all done

3a98464

mateacademy-ai-mentor suggested changes Feb 13, 2025

View reviewed changes

all done

aa8c4be

taniavozniuk requested a review from mateacademy-ai-mentor February 13, 2025 13:26

mateacademy-ai-mentor approved these changes Feb 13, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Develop #1242

Develop #1242

taniavozniuk commented Feb 13, 2025

mateacademy-ai-mentor left a comment

mateacademy-ai-mentor Feb 13, 2025

mateacademy-ai-mentor Feb 13, 2025

mateacademy-ai-mentor Feb 13, 2025

mateacademy-ai-mentor Feb 13, 2025

mateacademy-ai-mentor Feb 13, 2025

mateacademy-ai-mentor Feb 13, 2025

mateacademy-ai-mentor Feb 13, 2025

mateacademy-ai-mentor Feb 13, 2025

mateacademy-ai-mentor Feb 13, 2025

mateacademy-ai-mentor left a comment

mateacademy-ai-mentor Feb 13, 2025

mateacademy-ai-mentor Feb 13, 2025

mateacademy-ai-mentor Feb 13, 2025

mateacademy-ai-mentor Feb 13, 2025

mateacademy-ai-mentor Feb 13, 2025

mateacademy-ai-mentor Feb 13, 2025

mateacademy-ai-mentor Feb 13, 2025

mateacademy-ai-mentor Feb 13, 2025

mateacademy-ai-mentor Feb 13, 2025

mateacademy-ai-mentor Feb 13, 2025

Develop #1242

Are you sure you want to change the base?

Develop #1242

Conversation

taniavozniuk commented Feb 13, 2025

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

Choose a reason for hiding this comment