Solution

mate-academy · Aug 12, 2024 · 4c69cd2 · 4c69cd2
1 parent 0ed8eb9
commit 4c69cd2
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 25 deletions.
diff --git a/src/components/PostDetails.tsx b/src/components/PostDetails.tsx
@@ -10,7 +10,7 @@ type Props = {
 };
 
 export const PostDetails: React.FC<Props> = ({ selectedPost }) => {
-  const [comment, setComment] = useState<Comment[]>([]);
+  const [comments, setComments] = useState<Comment[]>([]);
   const [error, setError] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const [showForm, setShowForm] = useState(false);
@@ -22,18 +22,18 @@ export const PostDetails: React.FC<Props> = ({ selectedPost }) => {
 
     setIsLoading(true);
     setShowForm(false);
-    setComment([]);
+    setComments([]);
 
     getComment(selectedPost.id)
-      .then(setComment)
+      .then(setComments)
       .catch(() => setError(true))
       .finally(() => setIsLoading(false));
   }, [selectedPost.id]);
 
   const handleDelete = (commentId: number) => {
     deleteComment(commentId).then(() => {
-      setComment(currentComments =>
-        currentComments.filter(comments => comments.id !== commentId),
+      setComments(currentComments =>
+        currentComments.filter(comment => comment.id !== commentId),
       );
     });
   };
@@ -58,42 +58,39 @@ export const PostDetails: React.FC<Props> = ({ selectedPost }) => {
             </div>
           )}
 
-          {!comment.length && !isLoading && !error && (
+          {!comments.length && !isLoading && !error && (
             <p className="title is-4" data-cy="NoCommentsMessage">
               No comments yet
             </p>
           )}
 
-          {!!comment.length && (
+          {!!comments.length && (
             <>
               <p className="title is-4">Comments:</p>
 
-              {comment.map(comments => (
+              {comments.map(({ id, email, name, body }) => (
                 <article
                   className="message is-small"
                   data-cy="Comment"
-                  key={comments.id}
+                  key={id}
                 >
                   <div className="message-header">
-                    <a
-                      href={`mailto:${comments.email}`}
-                      data-cy="CommentAuthor"
-                    >
-                      {comments.name}
+                    <a href={`mailto:${email}`} data-cy="CommentAuthor">
+                      {name}
                     </a>
                     <button
                       data-cy="CommentDelete"
                       type="button"
                       className="delete is-small"
                       aria-label="delete"
-                      onClick={() => handleDelete(comments.id)}
+                      onClick={() => handleDelete(id)}
                     >
                       delete button
                     </button>
                   </div>
 
                   <div className="message-body" data-cy="CommentBody">
-                    {comments.body}
+                    {body}
                   </div>
                 </article>
               ))}
@@ -115,7 +112,7 @@ export const PostDetails: React.FC<Props> = ({ selectedPost }) => {
         {showForm && (
           <NewCommentForm
             postId={selectedPost.id}
-            setComment={setComment}
+            setComment={setComments}
             setError={setError}
           />
         )}

diff --git a/src/components/UserSelector.tsx b/src/components/UserSelector.tsx
@@ -15,11 +15,11 @@ export const UserSelector: React.FC<Props> = ({
   setSelectedUser,
   setSelectedPost,
 }) => {
-  const [user, setUser] = useState<User[]>([]);
+  const [users, setUsers] = useState<User[]>([]);
   const [isLoading, setIsLoading] = useState(false);
 
   useEffect(() => {
-    getUsers().then(setUser);
+    getUsers().then(setUsers);
   }, []);
 
   const activeUser = () => {
@@ -54,20 +54,20 @@ export const UserSelector: React.FC<Props> = ({
 
       <div className="dropdown-menu" id="dropdown-menu" role="menu">
         <div className="dropdown-content">
-          {user.map(users => (
+          {users.map(user => (
             <a
-              key={users.id}
-              href={`#user-${users.id}`}
+              key={user.id}
+              href={`#user-${user.id}`}
               className={classNames('dropdown-item', {
-                'is-active': selectedUser?.id === users.id,
+                'is-active': selectedUser?.id === user.id,
               })}
               onMouseDown={() => {
                 setSelectedPost(null);
                 setIsLoading(false);
-                setSelectedUser(users);
+                setSelectedUser(user);
               }}
             >
-              {users.name}
+              {user.name}
             </a>
           ))}
         </div>