cleanupp comments

src/App.tsx

@@ -15,16 +15,13 @@ import { postClient } from './utils/postClient';
 import { Post } from './types/Post';
 
 export const App = () => {
-  //region States
   const [users, setUsers] = useState<User[]>([]);
   const [userSelected, setUserSelected] = useState<User | null>(null);
   const [userSelPosts, setUserSelPosts] = useState<Post[]>([]);
   const [openedPost, setOpendPost] = useState<Post | null>(null);
   const [error, setError] = useState(false);
   const [loading, setLoading] = useState(false);
-  //endregion
 
-  //Init users
   useEffect(() => {
     setLoading(true);
     userClient
@@ -37,7 +34,6 @@ export const App = () => {
       .finally(() => setLoading(false));
   }, []);
 
-  // Update User Posts
   useEffect(() => {
     setOpendPost(null);
 

src/components/Comment.tsx

@@ -6,7 +6,7 @@ type Props = {
 };
 
 export const CommentObj: React.FC<Props> = ({ comment, onDelete }) => {
-  const { id, email, name, body } = { ...comment };
+  const { id, email, name, body } = comment;
 
   return (
     <article key={id} className="message is-small" data-cy="Comment">

src/components/PostItem.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Post } from '../types/Post';
+import classNames from 'classnames';
+
+type Props = {
+  posts: Post[];
+  openPostId: number | undefined;
+  onClick: (post: Post) => void;
+};
+
+export const PostItem: React.FC<Props> = ({ posts, openPostId, onClick }) => {
+  return (
+    <>
+      {posts.map(post => {
+        const { id, title } = post;
+        const isOppened = openPostId === id;
+
+        return (
+          <tr key={id} data-cy="Post">
+            <td data-cy="PostId">{id}</td>
+
+            <td data-cy="PostTitle">{title}</td>
+
+            <td className="has-text-right is-vcentered">
+              <button
+                type="button"
+                data-cy="PostButton"
+                className={classNames('button is-link', {
+                  'is-light': !isOppened,
+                })}
+                onClick={() => onClick(post)}
+              >
+                {isOppened ? 'Close' : 'Open'}
+              </button>
+            </td>
+          </tr>
+        );
+      })}
+    </>
+  );
+};

src/components/PostsList.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { Post } from '../types/Post';
-import classNames from 'classnames';
+import { PostItem } from './PostItem';
 
 type Props = {
   posts: Post[];
@@ -29,36 +29,17 @@ export const PostsList: React.FC<Props> = ({ posts, onOpen }) => {
           <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>
 
         <tbody>
-          {posts.map(post => {
-            const isOppened = openedPost?.id === post.id;
-
-            return (
-              <tr key={post.id} data-cy="Post">
-                <td data-cy="PostId">{post.id}</td>
-
-                <td data-cy="PostTitle">{post.title}</td>
-
-                <td className="has-text-right is-vcentered">
-                  <button
-                    type="button"
-                    data-cy="PostButton"
-                    className={classNames('button is-link', {
-                      'is-light': !isOppened,
-                    })}
-                    onClick={() => handleClick(post)}
-                  >
-                    {isOppened ? 'Close' : 'Open'}
-                  </button>
-                </td>
-              </tr>
-            );
-          })}
+          <PostItem
+            posts={posts}
+            openPostId={openedPost?.id}
+            onClick={handleClick}
+          />
         </tbody>
       </table>
     </div>

src/components/UserSelector.tsx

@@ -8,18 +8,14 @@ type Props = {
 };
 
 export const UserSelector: React.FC<Props> = ({ users, onSelect }) => {
-  // region States
   const [userSelect, setUserSelect] = useState<User | null>(null);
   const [visible, setVisible] = useState(false);
-  //endregion
 
-  // region Event handlers
   const handleUserSelect = (user: User): void => {
     setUserSelect(user);
     setVisible(false);
     onSelect(user);
   };
-  //endregion
 
   return (
     <div data-cy="UserSelector" className="dropdown is-active">