solution

package.json

@@ -7,15 +7,15 @@
   "license": "GPL-3.0",
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.5.2",
-    "bulma": "^1.0.1",
+    "bulma": "^0.9.4",
     "classnames": "^2.5.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "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

@@ -8,53 +8,165 @@ import { PostsList } from './components/PostsList';
 import { PostDetails } from './components/PostDetails';
 import { UserSelector } from './components/UserSelector';
 import { Loader } from './components/Loader';
+import { useEffect, useState } from 'react';
+import { User } from './types/User';
+import * as userService from './api/user';
+import * as postService from './api/post';
+import * as comentService from './api/coments';
+import { Post } from './types/Post';
+import { Comment } from './types/Comment';
 
-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>
+export const App = () => {
+  const [users, setUsers] = useState<User[]>([]);
+  const [selectedUser, setSelectedUser] = useState<User | null>(null);
 
-            <div className="block" data-cy="MainContent">
-              <p data-cy="NoSelectedUser">No user selected</p>
+  const [postsForSelectedUser, setPostsForSelectedUser] = useState<Post[]>([]);
+  const [selectedPost, setSelectedPost] = useState<Post>({
+    id: 0,
+    userId: 0,
+    title: '',
+    body: '',
+  });
 
-              <Loader />
+  const [selectedPostId, setSelectedPostId] = useState<number>(0);
+  const [comments, setComments] = useState<Comment[]>([]);
 
-              <div
-                className="notification is-danger"
-                data-cy="PostsLoadingError"
-              >
-                Something went wrong!
-              </div>
+  const [slidbarIsActive, setSlidbarIsActive] = useState(false);
+
+  const [errorLoadPosts, setErrorLoadPosts] = useState(false);
+  const [errorLoadComents, setErrorLoadComents] = useState(false);
+
+  const [loader, setLoader] = useState(false);
+  const [isPostsLoaded, setIsPostsLoaded] = useState(false);
+  const [isComentsLoaded, setIsComentsLoaded] = useState(false);
+
+  const errorMessage = 'Something went wrong';
+
+  useEffect(() => {
+    userService
+      .getUsers()
+      .then(setUsers)
+      .catch(er => {
+        throw er;
+      });
+  }, []);
+
+  useEffect(() => {
+    if (!selectedUser) {
+      return;
+    }
+
+    setLoader(true);
+    setIsPostsLoaded(false);
+    setErrorLoadPosts(false);
 
-              <div className="notification is-warning" data-cy="NoPostsYet">
-                No posts yet
+    postService
+      .getPosts(selectedUser?.id)
+      .then(posts => {
+        setPostsForSelectedUser(posts);
+        setIsPostsLoaded(true);
+      })
+      .catch(er => {
+        setErrorLoadPosts(true);
+        setIsPostsLoaded(true);
+
+        throw er;
+      })
+      .finally(() => {
+        setLoader(false);
+      });
+  }, [selectedUser]);
+
+  useEffect(() => {
+    if (selectedPostId === 0) {
+      return;
+    }
+
+    setIsComentsLoaded(true);
+    setErrorLoadComents(false);
+    comentService
+      .getComments(selectedPostId)
+      .then(setComments)
+      .catch(er => {
+        setErrorLoadComents(true);
+        throw er;
+      })
+      .finally(() => {
+        setIsComentsLoaded(false);
+      });
+  }, [selectedPostId]);
+
+  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
+                  users={users}
+                  stateSelectedUser={{ selectedUser, setSelectedUser }}
+                  setSlidbarIsActive={setSlidbarIsActive}
+                />
               </div>
 
-              <PostsList />
+              <div className="block" data-cy="MainContent">
+                {!selectedUser ? (
+                  <p data-cy="NoSelectedUser">No user selected</p>
+                ) : loader ? (
+                  <Loader />
+                ) : errorLoadPosts ? (
+                  <div
+                    className="notification is-danger"
+                    data-cy="PostsLoadingError"
+                  >
+                    Something went wrong!
+                  </div>
+                ) : !isPostsLoaded ? (
+                  <Loader />
+                ) : postsForSelectedUser.length === 0 ? (
+                  <div className="notification is-warning" data-cy="NoPostsYet">
+                    No posts yet
+                  </div>
+                ) : (
+                  <PostsList
+                    posts={postsForSelectedUser}
+                    stateSelectedPost={{ selectedPost, setSelectedPost }}
+                    setSlidbarIsActive={setSlidbarIsActive}
+                    setSelectedPostId={setSelectedPostId}
+                  />
+                )}
+              </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={classNames(
+              'tile',
+              'is-parent',
+              'is-8-desktop',
+              'Sidebar',
+              { 'Sidebar--open': slidbarIsActive },
+            )}
+          >
+            {selectedPost && slidbarIsActive && (
+              <>
+                <div className="tile is-child box is-success">
+                  <PostDetails
+                    selectedPost={selectedPost}
+                    comments={comments}
+                    setComments={setComments}
+                    isComentsLoaded={isComentsLoaded}
+                    errorMessage={errorMessage}
+                    errorLoadComents={errorLoadComents}
+                    setErrorLoadComents={setErrorLoadComents}
+                  />
+                </div>
+              </>
+            )}
           </div>
         </div>
       </div>
-    </div>
-  </main>
-);
+    </main>
+  );
+};

src/api/coments.ts

@@ -0,0 +1,24 @@
+import { Comment } from '../types/Comment';
+import { client } from '../utils/fetchClient';
+
+export const getComments = (postId: number) => {
+  return client.get<Comment[]>(`/comments?postId=${postId}`);
+};
+
+export const postComment = ({
+  postId,
+  name,
+  email,
+  body,
+}: Omit<Comment, 'id'>) => {
+  return client.post<Comment[]>(`/comments`, {
+    postId,
+    name,
+    email,
+    body,
+  });
+};
+
+export const deleteComments = (commentId: number) => {
+  return client.delete(`/comments/${commentId}`);
+};

src/api/post.ts

@@ -0,0 +1,6 @@
+import { Post } from '../types/Post';
+import { client } from '../utils/fetchClient';
+
+export const getPosts = (userId: number) => {
+  return client.get<Post[]>(`/posts?userId=${userId}`);
+};

src/api/user.ts

@@ -0,0 +1,6 @@
+import { User } from '../types/User';
+import { client } from '../utils/fetchClient';
+
+export const getUsers = () => {
+  return client.get<User[]>(`/users`);
+};