add task solution

mate-academy · Aug 30, 2024 · a1800d0 · a1800d0
1 parent 108b46b
commit a1800d0
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>