From a798946f3d73e48503bf617378b37de1009129e8 Mon Sep 17 00:00:00 2001
From: Stas <staskapica93@gmail.com>
Date: Wed, 18 Dec 2024 20:20:02 +0100
Subject: [PATCH] solution 0.02

---
 src/App.tsx                       |  7 ++++---
 src/components/NewCommentForm.tsx | 15 +++++----------
 src/components/PostDetails.tsx    | 12 +++---------
 src/components/PostsList.tsx      |  8 ++++----
 src/components/UserSelector.tsx   |  6 +++---
 5 files changed, 19 insertions(+), 29 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 0563328aa..42b4f0e69 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -21,7 +21,7 @@ export const App = () => {
   const [catchError, setCatchError] = useState(false);
 
   const [posts, setPosts] = useState<Post[]>([]);
-  const [selectedPost, setSelectedpost] = useState<Post | null>(null);
+  const [selectedPost, setSelectedPost] = useState<Post | null>(null);
   const [emptyPosts, setEmptyPosts] = useState(false);
 
   const fetchUsers = async () => {
@@ -47,6 +47,7 @@ export const App = () => {
 
   useEffect(() => {
     setPosts([]);
+    setEmptyPosts(false);
 
     if (users && userId) {
       const fetchPosts = async () => {
@@ -85,7 +86,7 @@ export const App = () => {
                   users={users}
                   userId={userId}
                   setUserId={setUserId}
-                  setSelectedpost={setSelectedpost}
+                  setSelectedPost={setSelectedPost}
                 />
               </div>
 
@@ -113,7 +114,7 @@ export const App = () => {
                   <PostsList
                     posts={posts}
                     selectedPost={selectedPost}
-                    setSelectedpost={setSelectedpost}
+                    setSelectedPost={setSelectedPost}
                   />
                 )}
               </div>
diff --git a/src/components/NewCommentForm.tsx b/src/components/NewCommentForm.tsx
index e4171f946..312d23783 100644
--- a/src/components/NewCommentForm.tsx
+++ b/src/components/NewCommentForm.tsx
@@ -77,7 +77,7 @@ export const NewCommentForm: React.FC<Props> = ({
     return doesEmpty;
   };
 
-  const addCommetns = async () => {
+  const addComments = async () => {
     const newData = {
       postId: selectedPost.id,
       name: userName,
@@ -112,15 +112,10 @@ export const NewCommentForm: React.FC<Props> = ({
       { value: commentText, setError: setCommentTextError },
     ];
 
-    const hasEmptyForm =
-      !validateInput(userName) &&
-      !validateInput(userMail) &&
-      !validateInput(commentText);
+    const allEmpty = inputs.every(input => !validateInput(input.value));
 
-    if (hasEmptyForm) {
-      setUserNameError(true);
-      setUserMailError(true);
-      setCommentTextError(true);
+    if (allEmpty) {
+      inputs.forEach(input => input.setError(true));
 
       return;
     }
@@ -139,7 +134,7 @@ export const NewCommentForm: React.FC<Props> = ({
       return;
     }
 
-    addCommetns();
+    addComments();
   };
 
   return (
diff --git a/src/components/PostDetails.tsx b/src/components/PostDetails.tsx
index ab71b584f..0f8480166 100644
--- a/src/components/PostDetails.tsx
+++ b/src/components/PostDetails.tsx
@@ -53,9 +53,9 @@ export const PostDetails: React.FC<Props> = ({ posts, selectedPost }) => {
   };
 
   const handleDelete = async (id: number) => {
-    const updatedCommnets = comments.filter(comment => comment.id !== id);
+    const updatedComments = comments.filter(comment => comment.id !== id);
 
-    setComments(updatedCommnets);
+    setComments(updatedComments);
 
     try {
       await client.delete(`/comments/${id}`);
@@ -64,7 +64,7 @@ export const PostDetails: React.FC<Props> = ({ posts, selectedPost }) => {
 
       if (deletedComment) {
         setTimeout(() => {
-          setComments([...updatedCommnets, deletedComment]);
+          setComments([...updatedComments, deletedComment]);
           setLoadingError(true);
 
           setTimeout(() => {
@@ -93,12 +93,6 @@ export const PostDetails: React.FC<Props> = ({ posts, selectedPost }) => {
             </div>
           )}
 
-          {false && (
-            <div className="notification is-danger" data-cy="CommentsError">
-              Something went wrong
-            </div>
-          )}
-
           {comments.length === 0 && !loading && !loadingError && (
             <p className="title is-4" data-cy="NoCommentsMessage">
               No comments yet
diff --git a/src/components/PostsList.tsx b/src/components/PostsList.tsx
index c0ddff889..1796f995b 100644
--- a/src/components/PostsList.tsx
+++ b/src/components/PostsList.tsx
@@ -4,19 +4,19 @@ import classNames from 'classnames';
 interface Props {
   posts: Post[];
   selectedPost: Post | null;
-  setSelectedpost: React.Dispatch<React.SetStateAction<Post | null>>;
+  setSelectedPost: React.Dispatch<React.SetStateAction<Post | null>>;
 }
 
 export const PostsList: React.FC<Props> = ({
   posts,
   selectedPost,
-  setSelectedpost,
+  setSelectedPost,
 }) => {
   const handleButtonSwitch = (currentPost: Post) => {
     if (selectedPost && selectedPost.id === currentPost.id) {
-      setSelectedpost(null);
+      setSelectedPost(null);
     } else {
-      setSelectedpost(currentPost);
+      setSelectedPost(currentPost);
     }
   };
 
diff --git a/src/components/UserSelector.tsx b/src/components/UserSelector.tsx
index d1493e455..cf3329e98 100644
--- a/src/components/UserSelector.tsx
+++ b/src/components/UserSelector.tsx
@@ -7,14 +7,14 @@ interface Props {
   users: User[];
   userId: number | null;
   setUserId: React.Dispatch<React.SetStateAction<number | null>>;
-  setSelectedpost: React.Dispatch<React.SetStateAction<Post | null>>;
+  setSelectedPost: React.Dispatch<React.SetStateAction<Post | null>>;
 }
 
 export const UserSelector: React.FC<Props> = ({
   users,
   userId,
   setUserId,
-  setSelectedpost,
+  setSelectedPost,
 }) => {
   const [showList, setShowList] = useState(false);
   const [userName, setUserName] = useState('Choose a user');
@@ -71,7 +71,7 @@ export const UserSelector: React.FC<Props> = ({
                 setUserId(user.id);
                 setUserName(user.name);
                 setShowList(false);
-                setSelectedpost(null);
+                setSelectedPost(null);
               }}
             >
               {user.name}