From a1800d0e4a8bde07a404dcb3742f1893e70092a1 Mon Sep 17 00:00:00 2001
From: Marina Avramenko <marina.avramenko123@gmail.com>
Date: Fri, 30 Aug 2024 13:33:34 +0300
Subject: [PATCH] add task solution

---
 src/App.tsx                       | 1 +
 src/components/NewCommentForm.tsx | 4 ++--
 src/components/PostsList.tsx      | 3 +--
 src/components/UserSelector.tsx   | 8 ++++++--
 4 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 09853a2d7..d0819d287 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -51,6 +51,7 @@ export const App: React.FC = () => {
                   users={users}
                   selectedUser={selectedUser}
                   onSelect={setSelectedUser}
+                  setSelectedPost={setSelectedPost}
                 />
               </div>
 
diff --git a/src/components/NewCommentForm.tsx b/src/components/NewCommentForm.tsx
index 74ad32380..b91d84683 100644
--- a/src/components/NewCommentForm.tsx
+++ b/src/components/NewCommentForm.tsx
@@ -140,7 +140,7 @@ export const NewCommentForm: React.FC<Props> = ({ postId, updateComent }) => {
 
           <div className="control has-icons-left has-icons-right">
             <input
-              type="text"
+              type="email"
               value={email}
               name="email"
               id="comment-author-email"
@@ -181,7 +181,7 @@ export const NewCommentForm: React.FC<Props> = ({ postId, updateComent }) => {
               value={body}
               name="body"
               placeholder="Type comment here"
-              className={cn('textarea', { 'is-danger': hasEmailError })}
+              className={cn('textarea', { 'is-danger': hasBodyError })}
               onChange={handleOnChange}
             />
           </div>
diff --git a/src/components/PostsList.tsx b/src/components/PostsList.tsx
index 852ca8098..842919749 100644
--- a/src/components/PostsList.tsx
+++ b/src/components/PostsList.tsx
@@ -30,7 +30,6 @@ export const PostsList: React.FC<Props> = ({
           <tr className="has-background-link-light">
             <th>#</th>
             <th>Title</th>
-            {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
             <th> </th>
           </tr>
         </thead>
@@ -42,7 +41,7 @@ export const PostsList: React.FC<Props> = ({
             return (
               <tr data-cy="Post" key={id}>
                 <td data-cy="PostId">{id}</td>
-                <td data-cy="PostTitle"> {title}</td>
+                <td data-cy="PostTitle">{title}</td>
                 <td className="has-text-right is-vcentered">
                   <button
                     type="button"
diff --git a/src/components/UserSelector.tsx b/src/components/UserSelector.tsx
index 0bd9e6db9..86d1fa3bc 100644
--- a/src/components/UserSelector.tsx
+++ b/src/components/UserSelector.tsx
@@ -1,17 +1,20 @@
 import React, { useState } from 'react';
 import cn from 'classnames';
 import { User } from '../types/User';
+import { Post } from '../types/Post';
 
 type Props = {
   users: User[];
   selectedUser: User | null | undefined;
   onSelect: React.Dispatch<React.SetStateAction<User | null | undefined>>;
+  setSelectedPost: React.Dispatch<React.SetStateAction<Post | null>>;
 };
 
 export const UserSelector: React.FC<Props> = ({
   users,
   selectedUser,
   onSelect,
+  setSelectedPost,
 }) => {
   const [focused, setFocused] = useState(false);
 
@@ -22,6 +25,7 @@ export const UserSelector: React.FC<Props> = ({
   const handleUserSelect = (user: User) => {
     setFocused(false);
     onSelect(user);
+    setSelectedPost(null);
   };
 
   const handlerOnBlur = () => {
@@ -39,7 +43,7 @@ export const UserSelector: React.FC<Props> = ({
           className="button"
           aria-haspopup="true"
           aria-controls="dropdown-menu"
-          onMouseDown={handlerToggleMenu}
+          onClick={handlerToggleMenu}
           onBlur={handlerOnBlur}
         >
           {selectedUser ? (
@@ -66,7 +70,7 @@ export const UserSelector: React.FC<Props> = ({
                   'is-active': selectedUser?.id === id,
                 })}
                 key={id}
-                onMouseDown={() => handleUserSelect(user)}
+                onClick={() => handleUserSelect(user)}
               >
                 {name}
               </a>