app was created

src/App.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import 'bulma/bulma.sass';
 import '@fortawesome/fontawesome-free/css/all.css';
 import './App.scss';
@@ -7,56 +7,96 @@ import classNames from 'classnames';
 import { PostsList } from './components/PostsList';
 import { PostDetails } from './components/PostDetails';
 import { UserSelector } from './components/UserSelector';
+import { UserInt } from './types/UserInt';
+import { PostInt } from './types/PostInt';
+import { getUserPost } from './utils/RESTmethods';
 import { Loader } from './components/Loader';
 
 export const App: React.FC = () => {
+  const [selectedUser, setSelectedUser] = useState<UserInt>();
+  const [selectedPost, setSelectedPost] = useState<PostInt | undefined>();
+  const [posts, setPosts] = useState<PostInt[]>();
+  const [isError, setIsError] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    if (selectedUser) {
+      setIsLoading(true);
+      getUserPost(selectedUser.id)
+        .then(setPosts)
+        .catch(() => setIsError(true))
+        .finally(() => setIsLoading(false));
+    }
+  }, [selectedUser]);
+
   return (
     <main className="section">
       <div className="container">
         <div className="tile is-ancestor">
           <div className="tile is-parent">
             <div className="tile is-child box is-success">
               <div className="block">
-                <UserSelector />
+                <UserSelector
+                  selectedUser={selectedUser}
+                  setSelectedUser={setSelectedUser}
+                  setIsError={setIsError}
+                />
               </div>
 
               <div className="block" data-cy="MainContent">
-                <p data-cy="NoSelectedUser">
-                  No user selected
-                </p>
+                {!selectedUser && !isError && (
+                  <p data-cy="NoSelectedUser">
+                    No user selected
+                  </p>
+                )}
+
+                {isLoading && <Loader />}
 
-                <Loader />
+                {!isLoading && isError && (
+                  <div
+                    className="notification is-danger"
+                    data-cy="PostsLoadingError"
+                  >
+                    Something went wrong!
+                  </div>
+                )}
 
-                <div
-                  className="notification is-danger"
-                  data-cy="PostsLoadingError"
-                >
-                  Something went wrong!
-                </div>
+                {!isLoading && posts && posts.length === 0 && (
+                  <div className="notification is-warning" data-cy="NoPostsYet">
+                    No posts yet
+                  </div>
+                )}
 
-                <div className="notification is-warning" data-cy="NoPostsYet">
-                  No posts yet
-                </div>
+                {!isLoading && posts && posts.length > 0 && (
+                  <PostsList
+                    posts={posts}
+                    selectedPost={selectedPost}
+                    setSelectedPost={setSelectedPost}
+                  />
+                )}
 
-                <PostsList />
               </div>
             </div>
           </div>
 
-          <div
-            data-cy="Sidebar"
-            className={classNames(
-              'tile',
-              'is-parent',
-              'is-8-desktop',
-              'Sidebar',
-              'Sidebar--open',
-            )}
-          >
-            <div className="tile is-child box is-success ">
-              <PostDetails />
+          {selectedPost && (
+            <div
+              data-cy="Sidebar"
+              className={classNames(
+                'tile',
+                'is-parent',
+                'is-8-desktop',
+                'Sidebar',
+                { 'Sidebar--open': selectedPost },
+              )}
+            >
+              <div className="tile is-child box is-success ">
+                <PostDetails
+                  selectedPost={selectedPost}
+                />
+              </div>
             </div>
-          </div>
+          )}
         </div>
       </div>
     </main>

src/components/Comment.tsx

@@ -0,0 +1,51 @@
+import React, { Dispatch, SetStateAction } from 'react';
+import { CommentInt } from '../types/CommentInt';
+import { deleteComment } from '../utils/RESTmethods';
+
+type CommentProps = {
+  comment: CommentInt,
+  setComments: Dispatch<SetStateAction<CommentInt[]>>,
+};
+
+export const Comment: React.FC<CommentProps> = ({
+  comment,
+  setComments,
+}) => {
+  const {
+    email,
+    name,
+    body,
+    id,
+  } = comment;
+
+  const handleDeleteComment = (commentId: number) => {
+    setComments(prevCom => prevCom.filter(com => com.id !== commentId));
+    deleteComment(commentId);
+  };
+
+  return (
+    <article className="message is-small" data-cy="Comment">
+      <div className="message-header">
+        <a
+          href={`mailto:${email}`}
+          data-cy="CommentAuthor"
+        >
+          {name}
+        </a>
+        <button
+          data-cy="CommentDelete"
+          type="button"
+          className="delete is-small"
+          aria-label="delete"
+          onClick={() => handleDeleteComment(id)}
+        >
+          delete button
+        </button>
+      </div>
+
+      <div className="message-body" data-cy="CommentBody">
+        {body}
+      </div>
+    </article>
+  );
+};