fixed solution

mate-academy · Dec 5, 2024 · c0c441e · c0c441e
1 parent 9fe09d5
commit c0c441e
Show file tree

Hide file tree

Showing 8 changed files with 83 additions and 54 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -13,14 +13,14 @@ import { usePosts } from './hooks/usePosts';
 import { useState } from 'react';
 
 export const App: React.FC = () => {
-  const [isShowForm, setIsShowForm] = useState(false);
+  const [isFormShown, setIsFormShown] = useState(false);
 
   const { users, currentUser, setCurrentUser } = useUsers();
 
   const { posts, currentPost, setCurrentPost, isPostsLoading, isPostsError } =
     usePosts(currentUser?.id || null);
 
-  const isShowPostsBlock = currentUser && !isPostsError && !isPostsLoading;
+  const isPostsBlockShown = currentUser && !isPostsError && !isPostsLoading;
 
   return (
     <main className="section">
@@ -53,8 +53,8 @@ export const App: React.FC = () => {
                   </div>
                 )}
 
-                {isShowPostsBlock &&
-                  (posts.length === 0 ? (
+                {isPostsBlockShown &&
+                  (!posts.length ? (
                     <div
                       className="notification is-warning"
                       data-cy="NoPostsYet"
@@ -66,7 +66,7 @@ export const App: React.FC = () => {
                       posts={posts}
                       currentPost={currentPost}
                       setCurrentPost={setCurrentPost}
-                      setIsShowForm={setIsShowForm}
+                      setIsShowForm={setIsFormShown}
                     />
                   ))}
               </div>
@@ -83,8 +83,8 @@ export const App: React.FC = () => {
               <div className="tile is-child box is-success ">
                 <PostDetails
                   currentPost={currentPost}
-                  isShowForm={isShowForm}
-                  setIsShowForm={setIsShowForm}
+                  isShowForm={isFormShown}
+                  setIsShowForm={setIsFormShown}
                 />
               </div>
             )}

diff --git a/src/components/Comment.tsx b/src/components/Comment.tsx
@@ -4,17 +4,22 @@ import type { Comment } from '../types/Comment';
 type Props = {
   comment: Comment;
   deleteComment: (commentId: number) => void;
+  isCommentDeleteError: boolean;
 };
 
-const CommentItem: React.FC<Props> = ({ comment, deleteComment }) => {
+const CommentItem: React.FC<Props> = ({
+  comment,
+  deleteComment,
+  isCommentDeleteError,
+}) => {
   const handleDelete = () => {
     deleteComment(comment.id);
   };
 
   return (
     <article className="message is-small" data-cy="Comment">
       <div className="message-header">
-        <a href={comment.email} data-cy="CommentAuthor">
+        <a href={`mailto:${comment.email}`} data-cy="CommentAuthor">
           {comment.name}
         </a>
         <button
@@ -31,6 +36,12 @@ const CommentItem: React.FC<Props> = ({ comment, deleteComment }) => {
       <div className="message-body" data-cy="CommentBody">
         {comment.body}
       </div>
+
+      {isCommentDeleteError && (
+        <div className="notification is-danger" data-cy="CommentDeleteError">
+          Something went wrong
+        </div>
+      )}
     </article>
   );
 };

diff --git a/src/components/PostDetails.tsx b/src/components/PostDetails.tsx
@@ -23,15 +23,22 @@ export const PostDetails: React.FC<Props> = ({
     isCommentsError,
     deleteComment,
     isCommentCreating,
+    isCommentDeleteError,
   } = useComments(currentPost.id);
 
   const isShowCommentsBlock = !isCommentsError && !isCommentsLoading;
 
+  const isNoCommentsMessageShown = isShowCommentsBlock && !comments.length;
+
+  const isCommentsBlockShown = isShowCommentsBlock && comments.length !== 0;
+
+  const isCommentButtonShown = isShowCommentsBlock && !isShowForm;
+
   return (
     <div className="content" data-cy="PostDetails">
       <div className="content" data-cy="PostDetails">
         <div className="block">
-          <h2 data-cy="PostTitle">{`#${currentPost.id} ${currentPost.title}`}</h2>
+          <h2 data-cy="PostTitle">{`#${currentPost.id}: ${currentPost.title}`}</h2>
 
           <p data-cy="PostBody">{currentPost.body}</p>
         </div>
@@ -45,26 +52,27 @@ export const PostDetails: React.FC<Props> = ({
             </div>
           )}
 
-          {isShowCommentsBlock && comments.length === 0 && (
+          {isNoCommentsMessageShown && (
             <p className="title is-4" data-cy="NoCommentsMessage">
               No comments yet
             </p>
           )}
 
-          {isShowCommentsBlock && comments.length !== 0 && (
+          {isCommentsBlockShown && (
             <>
               <p className="title is-4">Comments:{comments.length}</p>
               {comments.map(comment => (
                 <CommentItem
                   key={comment.id}
                   comment={comment}
                   deleteComment={deleteComment}
+                  isCommentDeleteError={isCommentDeleteError}
                 />
               ))}
             </>
           )}
 
-          {isShowCommentsBlock && !isShowForm && (
+          {isCommentButtonShown && (
             <button
               data-cy="WriteCommentButton"
               type="button"

diff --git a/src/components/PostItem.tsx b/src/components/PostItem.tsx
@@ -21,11 +21,11 @@ const PostItem: React.FC<Props> = ({
   const handleSelectPost = () => {
     if (isSelected) {
       setCurrentPost(null);
-      setIsShowForm(false);
     } else {
       setCurrentPost(post);
-      setIsShowForm(false);
     }
+
+    setIsShowForm(false);
   };
 
   return (

diff --git a/src/components/UserSelector.tsx b/src/components/UserSelector.tsx
@@ -1,8 +1,9 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import cn from 'classnames';
 
 import { User } from '../types/User';
 import { Post } from '../types/Post';
+import classNames from 'classnames';
 
 type Props = {
   users: User[];
@@ -25,8 +26,28 @@ export const UserSelector: React.FC<Props> = ({
     setIsOpen(false);
   };
 
+  const componentRef = useRef<HTMLDivElement>(null);
+
+  const handleClickOutside = (event: MouseEvent) => {
+    if (
+      componentRef.current &&
+      !componentRef.current.contains(event.target as Node)
+    ) {
+      setIsOpen(false);
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener('mousedown', handleClickOutside);
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
   return (
     <div
+      ref={componentRef}
       data-cy="UserSelector"
       className={cn('dropdown', { 'is-active': isOpen })}
     >
@@ -53,7 +74,9 @@ export const UserSelector: React.FC<Props> = ({
               <a
                 key={user.id}
                 href={`#user-${user.id}`}
-                className="dropdown-item"
+                className={classNames('dropdown-item', {
+                  'is-active': currentUser?.id === user.id,
+                })}
                 onClick={() => handleSelectUser(user)}
               >
                 {user.name}

diff --git a/src/hooks/useComments.ts b/src/hooks/useComments.ts
@@ -6,6 +6,7 @@ export const useComments = (postId?: number | null) => {
   const [isCommentsLoading, setIsCommentsLoading] = useState(false);
   const [isCommentCreating, setIsCommentCreating] = useState(false);
   const [isCommentsError, setIsCommentsError] = useState(false);
+  const [isCommentDeleteError, setIsCommentDeleteError] = useState(false);
   const [comments, setComments] = useState<Comment[]>([]);
 
   const loadComments = useCallback(async () => {
@@ -16,13 +17,11 @@ export const useComments = (postId?: number | null) => {
     setIsCommentsLoading(true);
     setIsCommentsError(false);
     try {
-      try {
-        const usersFromServer = await postService.getComments(postId);
+      const usersFromServer = await postService.getComments(postId);
 
-        setComments(usersFromServer);
-      } catch {
-        setIsCommentsError(true);
-      }
+      setComments(usersFromServer);
+    } catch {
+      setIsCommentsError(true);
     } finally {
       setIsCommentsLoading(false);
     }
@@ -31,13 +30,11 @@ export const useComments = (postId?: number | null) => {
   const addComment = useCallback(async (comment: Omit<Comment, 'id'>) => {
     setIsCommentCreating(true);
     try {
-      try {
-        const newComment = await postService.createComment(comment);
+      const newComment = await postService.createComment(comment);
 
-        setComments(prev => [...prev, newComment]);
-      } catch {
-        setIsCommentsError(true);
-      }
+      setComments(prev => [...prev, newComment]);
+    } catch {
+      setIsCommentsError(true);
     } finally {
       setIsCommentCreating(false);
     }
@@ -47,14 +44,12 @@ export const useComments = (postId?: number | null) => {
     async (commentId: number) => {
       setComments(prev => prev.filter(comment => comment.id !== commentId));
       try {
-        try {
-          await postService.deleteComment(commentId);
-        } catch {
-          setIsCommentsError(true);
-        }
-      } finally {
+        await postService.deleteComment(commentId);
+      } catch {
+        setIsCommentDeleteError(true);
         setComments(comments);
-        setIsCommentsError(false);
+      } finally {
+        setIsCommentDeleteError(false);
       }
     },
     [comments],
@@ -78,5 +73,6 @@ export const useComments = (postId?: number | null) => {
     deleteComment,
     loadComments,
     isCommentCreating,
+    isCommentDeleteError,
   };
 };
diff --git a/src/hooks/usePosts.ts b/src/hooks/usePosts.ts
@@ -13,27 +13,21 @@ export const usePosts = (id: number | null) => {
     setIsPostsError(false);
 
     try {
-      try {
-        const postsFromServer = await getPosts(userId);
+      const postsFromServer = await getPosts(userId);
 
-        setPosts(postsFromServer);
-      } catch {
-        setIsPostsError(true);
-      }
+      setPosts(postsFromServer);
+    } catch {
+      setIsPostsError(true);
     } finally {
       setIsPostsLoading(false);
     }
   }, []);
 
   useEffect(() => {
-    if (!id) {
-      setPosts([]);
-
-      return;
+    if (id) {
+      loadPosts(id);
     }
-
-    loadPosts(id);
-  }, [id]);
+  }, [id, loadPosts]);
 
   return {
     posts,

diff --git a/src/hooks/useUsers.ts b/src/hooks/useUsers.ts
@@ -11,15 +11,12 @@ export const useUsers = () => {
       const usersFromServer = await getUsers();
 
       setUsers(usersFromServer);
-    } catch {
-      throw new Error('Unable to load users');
-    } finally {
-    }
+    } catch {}
   }, []);
 
   useEffect(() => {
     loadUsers();
-  }, []);
+  }, [loadUsers]);
 
   return {
     users,