From f475627b2330b3dbe3a5aca0cb9dce492b22442e Mon Sep 17 00:00:00 2001
From: ab3MN <ab3mn3@gmail.com>
Date: Thu, 14 Nov 2024 20:22:15 +0200
Subject: [PATCH] fix:fixed all the comments,except remove src from
 eslintIgnore,cuz i have some problems with linter and without it I can't make
 a commit

---
 src/components/Posts/PostDetails/PostDetails.tsx | 12 ++++++------
 .../PostListItem.tsx => PostItem/PostItem.tsx}   | 12 ++++++------
 src/components/Posts/PostList/PostList.tsx       |  6 ++----
 src/context/PostContext.tsx                      |  5 +++--
 src/hooks/useComments.ts                         | 16 ++++++++--------
 5 files changed, 25 insertions(+), 26 deletions(-)
 rename src/components/Posts/{PostList/PostListItem.tsx => PostItem/PostItem.tsx} (84%)

diff --git a/src/components/Posts/PostDetails/PostDetails.tsx b/src/components/Posts/PostDetails/PostDetails.tsx
index a38b766e7..344d93c44 100644
--- a/src/components/Posts/PostDetails/PostDetails.tsx
+++ b/src/components/Posts/PostDetails/PostDetails.tsx
@@ -4,6 +4,7 @@ import { Post } from '../../../types/Post';
 import { Loader } from '../../Loader';
 import { Comments } from '../../Comments/Comments';
 import { useComments } from '../../../hooks/useComments';
+import { ErrorNotification } from '../../ErrorNotification/ErrorNotification';
 
 interface PostDetailsProps {
   post: Post;
@@ -14,6 +15,7 @@ export const PostDetails: React.FC<PostDetailsProps> = ({ post }) => {
     handleAddComment,
     handleDeleteComment,
     fetchComments,
+    error,
     comments,
     isLoading,
   } = useComments(post.id);
@@ -23,7 +25,7 @@ export const PostDetails: React.FC<PostDetailsProps> = ({ post }) => {
     fetchComments();
 
     return setFormOpen(false);
-  }, [post.id]);
+  }, [post.id, fetchComments]);
 
   const CommentsView = (
     <>
@@ -59,13 +61,11 @@ export const PostDetails: React.FC<PostDetailsProps> = ({ post }) => {
           <p data-cy="PostBody">{post.body}</p>
         </div>
 
-        <div className="block">
-          {isLoading && <Loader />}
-
-          {!isLoading && CommentsView}
-        </div>
+        <div className="block">{isLoading ? <Loader /> : CommentsView}</div>
 
         {isFormOpen && <NewCommentForm handleAddComment={handleAddComment} />}
+
+        {error && <ErrorNotification />}
       </div>
     </div>
   );
diff --git a/src/components/Posts/PostList/PostListItem.tsx b/src/components/Posts/PostItem/PostItem.tsx
similarity index 84%
rename from src/components/Posts/PostList/PostListItem.tsx
rename to src/components/Posts/PostItem/PostItem.tsx
index 0add48bff..9086a7fa7 100644
--- a/src/components/Posts/PostList/PostListItem.tsx
+++ b/src/components/Posts/PostItem/PostItem.tsx
@@ -3,11 +3,11 @@ import cn from 'classnames';
 import { Post } from '../../../types/Post';
 import { PostsContext } from '../../../context/PostContext';
 
-interface PostListItemProps {
+interface PostItemProps {
   post: Post;
 }
 
-const PostListItem: FC<PostListItemProps> = memo(({ post }) => {
+const PostItem: FC<PostItemProps> = memo(({ post }) => {
   const { selectedPost, setSelectedPost } = useContext(PostsContext);
 
   const handleSelectPost = (highlightedPost: Post) => {
@@ -20,7 +20,7 @@ const PostListItem: FC<PostListItemProps> = memo(({ post }) => {
   };
 
   return (
-    <>
+    <tr data-cy="Post">
       <td data-cy="PostId">{post.id}</td>
 
       <td data-cy="PostTitle">{post.title}</td>
@@ -37,10 +37,10 @@ const PostListItem: FC<PostListItemProps> = memo(({ post }) => {
           {selectedPost?.id === post.id ? 'Close' : 'Open'}
         </button>
       </td>
-    </>
+    </tr>
   );
 });
 
-PostListItem.displayName = 'PostListItem';
+PostItem.displayName = 'PostItem';
 
-export { PostListItem };
+export { PostItem };
diff --git a/src/components/Posts/PostList/PostList.tsx b/src/components/Posts/PostList/PostList.tsx
index 57c099403..b3e00bebf 100644
--- a/src/components/Posts/PostList/PostList.tsx
+++ b/src/components/Posts/PostList/PostList.tsx
@@ -1,5 +1,5 @@
 import { FC, memo } from 'react';
-import { PostListItem } from './PostListItem';
+import { PostItem } from '../PostItem/PostItem';
 import { Post } from '../../../types/Post';
 
 interface PostsListProps {
@@ -22,9 +22,7 @@ const PostList: FC<PostsListProps> = memo(({ posts }) => (
 
       <tbody>
         {posts.map(post => (
-          <tr data-cy="Post" key={post.id}>
-            <PostListItem post={post} />
-          </tr>
+          <PostItem post={post} key={post.id} />
         ))}
       </tbody>
     </table>
diff --git a/src/context/PostContext.tsx b/src/context/PostContext.tsx
index ed96c1e13..46458897c 100644
--- a/src/context/PostContext.tsx
+++ b/src/context/PostContext.tsx
@@ -3,6 +3,7 @@ import {
   Dispatch,
   ReactNode,
   SetStateAction,
+  useCallback,
   useMemo,
   useState,
 } from 'react';
@@ -56,11 +57,11 @@ export const PostsProvider = ({
   const [selectedPost, setSelectedPost] = useState<Post | null>(null);
   const { posts, postsError, isLoadingPosts } = usePosts(selectedUser);
 
-  const handleSelectUser = async (user: User) => {
+  const handleSelectUser = useCallback((user: User) => {
     setUserMenuOpen(false);
     setSelectedUser(user);
     setSelectedPost(null);
-  };
+  }, []);
 
   const store = useMemo(
     () => ({
diff --git a/src/hooks/useComments.ts b/src/hooks/useComments.ts
index bf738b5d5..eb33877d8 100644
--- a/src/hooks/useComments.ts
+++ b/src/hooks/useComments.ts
@@ -1,20 +1,20 @@
-import { useState } from 'react';
+import { useCallback, useState } from 'react';
 import { Comment } from '../types/Comment';
 import { addComment, deleteComment } from '../api/comments';
 import { getCommentsByPostId } from '../api/posts';
 
 export const useComments = (postId: number) => {
   const [comments, setComments] = useState<Comment[]>([]);
-  const [isLoading, setLoading] = useState(false);
-  const [isError, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState('');
 
-  const fetchComments = () => {
-    setLoading(true);
+  const fetchComments = useCallback(() => {
+    setIsLoading(true);
 
     getCommentsByPostId(postId)
       .then(res => setComments(res))
-      .finally(() => setLoading(false));
-  };
+      .finally(() => setIsLoading(false));
+  }, [postId]);
 
   const handleAddComment = (comment: Omit<Comment, 'id'>) => {
     addComment(comment)
@@ -38,7 +38,7 @@ export const useComments = (postId: number) => {
 
   return {
     isLoading,
-    isError,
+    error,
     comments,
 
     handleAddComment,