From c05b516bbb12ad4c21cad35c370620560f2fdfc5 Mon Sep 17 00:00:00 2001
From: Marina Avramenko <marina.avramenko123@gmail.com>
Date: Thu, 29 Aug 2024 16:37:47 +0300
Subject: [PATCH] add task solution

---
 src/components/PostDetails.tsx  |  2 +-
 src/components/UserSelector.tsx | 24 +++++++++++-------------
 2 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/src/components/PostDetails.tsx b/src/components/PostDetails.tsx
index d73360ff6..22e1b81a1 100644
--- a/src/components/PostDetails.tsx
+++ b/src/components/PostDetails.tsx
@@ -65,7 +65,7 @@ export const PostDetails: React.FC<Props> = ({ post }) => {
             </div>
           )}
 
-          {!comments.length && !isError && isLoading && (
+          {!comments.length && !isError && !isLoading && (
             <p className="title is-4" data-cy="NoCommentsMessage">
               No comments yet
             </p>
diff --git a/src/components/UserSelector.tsx b/src/components/UserSelector.tsx
index 3c765196c..58fc31a16 100644
--- a/src/components/UserSelector.tsx
+++ b/src/components/UserSelector.tsx
@@ -18,18 +18,21 @@ export const UserSelector: React.FC<Props> = ({
 }) => {
   const [focused, setFocused] = useState(false);
 
-  const onFocused = () => {
-    if (focused) {
-      setFocused(false);
-    } else {
-      setFocused(true);
-    }
+  const toggleDropdown = () => {
+    setFocused(prev => !prev);
+  };
+
+  const handleUserSelect = (user: User) => {
+    setSelectedUser(user);
+    setFocused(false);
+    setSelectedPost(null);
   };
 
   return (
     <div
       data-cy="UserSelector"
       className={cn('dropdown', { 'is-active': focused })}
+      onBlur={() => setFocused(false)}
     >
       <div className="dropdown-trigger">
         <button
@@ -37,8 +40,7 @@ export const UserSelector: React.FC<Props> = ({
           className="button"
           aria-haspopup="true"
           aria-controls="dropdown-menu"
-          onClick={onFocused}
-          onBlur={() => setFocused(false)}
+          onClick={toggleDropdown}
         >
           {selectedUser ? (
             <span>{selectedUser.name}</span>
@@ -64,11 +66,7 @@ export const UserSelector: React.FC<Props> = ({
                   'is-active': selectedUser?.id === id,
                 })}
                 key={id}
-                onClick={() => {
-                  setSelectedUser(user);
-                  setFocused(false);
-                  setSelectedPost(null);
-                }}
+                onClick={() => handleUserSelect(user)}
               >
                 {name}
               </a>