solution

package.json

@@ -11,11 +11,12 @@
     "classnames": "^2.5.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-hook-form": "^7.53.0",
     "react-transition-group": "^4.4.5"
   },
   "devDependencies": {
     "@cypress/react18": "^2.0.1",
-    "@mate-academy/scripts": "^1.8.5",
+    "@mate-academy/scripts": "^1.9.12",
     "@mate-academy/students-ts-config": "*",
     "@mate-academy/stylelint-config": "*",
     "@types/node": "^20.14.10",

src/App.tsx

@@ -1,60 +1,77 @@
-import classNames from 'classnames';
+// #region imports
+import cn from 'classnames';
 
 import 'bulma/css/bulma.css';
 import '@fortawesome/fontawesome-free/css/all.css';
 import './App.scss';
 
-import { PostsList } from './components/PostsList';
+import { useEffect, useState } from 'react';
 import { PostDetails } from './components/PostDetails';
 import { UserSelector } from './components/UserSelector';
-import { Loader } from './components/Loader';
-
-export const App = () => (
-  <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 />
-            </div>
+import { UserPosts } from './components/UserPosts';
+import { getUsers } from './services/users';
+import { Post } from './types/Post';
+import { User } from './types/User';
+// #endregion
 
-            <div className="block" data-cy="MainContent">
-              <p data-cy="NoSelectedUser">No user selected</p>
+export const App = () => {
+  // #region states
+  const [users, setUsers] = useState<User[]>([]);
+  const [selectedUserId, setSelectedUserId] = useState<number | null>(null);
+  const [selectedPost, setSelectedPost] = useState<Post | null>(null);
+  // #endregion
 
-              <Loader />
+  useEffect(() => {
+    getUsers().then(setUsers);
+  }, []);
 
-              <div
-                className="notification is-danger"
-                data-cy="PostsLoadingError"
-              >
-                Something went wrong!
+  return (
+    <main className="section">
+      <div className="container">
+        <div className="tile is-ancestor columns">
+          <div className="tile is-parent column">
+            <div className="tile is-child box is-success">
+              <div className="block">
+                <UserSelector
+                  users={users}
+                  selectedId={selectedUserId}
+                  onSelectId={setSelectedUserId}
+                />
               </div>
 
-              <div className="notification is-warning" data-cy="NoPostsYet">
-                No posts yet
-              </div>
+              <div className="block" data-cy="MainContent">
+                {!selectedUserId && (
+                  <p data-cy="NoSelectedUser">No user selected</p>
+                )}
 
-              <PostsList />
+                {selectedUserId && (
+                  <UserPosts
+                    userId={selectedUserId}
+                    selectedPostId={selectedPost?.id || null}
+                    onPostSelect={setSelectedPost}
+                  />
+                )}
+              </div>
             </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 />
+          <div
+            data-cy="Sidebar"
+            className={cn(
+              'tile',
+              'is-parent',
+              'column',
+              'is-half-desktop',
+              'Sidebar',
+              { 'Sidebar--open': selectedPost },
+            )}
+          >
+            <div className="tile is-child box is-success ">
+              {selectedPost && <PostDetails post={selectedPost} />}
+            </div>
           </div>
         </div>
       </div>
-    </div>
-  </main>
-);
+    </main>
+  );
+};

src/components/CommentItem.tsx

@@ -0,0 +1,50 @@
+import React, { memo } from 'react';
+import { Comment } from '../types/Comment';
+import { ErrorNotification } from './ErrorNotification';
+
+type Props = {
+  comment: Comment;
+  onDelete: (id: number) => void;
+  deletingErrorPostIds: number[];
+};
+
+export const CommentItem: React.FC<Props> = memo(function CommentItem({
+  comment,
+  onDelete,
+  deletingErrorPostIds,
+}) {
+  const { id, name, email, body } = comment;
+
+  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={() => {
+              onDelete(id);
+            }}
+          ></button>
+        </div>
+
+        <div className="message-body" data-cy="CommentBody">
+          {body}
+        </div>
+      </article>
+
+      {deletingErrorPostIds.includes(id) && (
+        <ErrorNotification
+          errorMessage="
+                Unable to delete the comment. Try again!
+              "
+        />
+      )}
+    </>
+  );
+});

src/components/CommentsList.tsx

@@ -0,0 +1,30 @@
+import React, { memo } from 'react';
+import { Comment } from '../types/Comment';
+import { CommentItem } from './CommentItem';
+
+type Props = {
+  comments: Comment[];
+  onDelete: (id: number) => void;
+  deletingErrorPostIds: number[];
+};
+
+export const CommentsList: React.FC<Props> = memo(function CommentsList({
+  comments,
+  onDelete,
+  deletingErrorPostIds,
+}) {
+  return (
+    <>
+      <p className="title is-4">Comments:</p>
+
+      {comments.map(comment => (
+        <CommentItem
+          key={comment.id}
+          comment={comment}
+          onDelete={onDelete}
+          deletingErrorPostIds={deletingErrorPostIds}
+        />
+      ))}
+    </>
+  );
+});

src/components/ErrorNotification.tsx

@@ -0,0 +1,15 @@
+import React, { memo } from 'react';
+
+type Props = {
+  errorMessage: string;
+};
+
+export const ErrorNotification: React.FC<Props> = memo(
+  function ErrorNotification({ errorMessage }) {
+    return (
+      <div className="notification is-danger" data-cy="CommentsError">
+        {errorMessage}
+      </div>
+    );
+  },
+);