solution

src/App.tsx

@@ -1,15 +1,25 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import 'bulma/bulma.sass';
 import '@fortawesome/fontawesome-free/css/all.css';
 import './App.scss';
-
 import classNames from 'classnames';
-import { PostsList } from './components/PostsList';
-import { PostDetails } from './components/PostDetails';
 import { UserSelector } from './components/UserSelector';
+import {
+  ErrorContext,
+  PostDataContext,
+  PostsContext,
+  UserContext,
+} from './components/UserContext/UserContext';
 import { Loader } from './components/Loader';
+import { PostsList } from './components/PostsList';
+import { PostDetails } from './components/PostDetails';
 
 export const App: React.FC = () => {
+  const { isError, isLoadingPosts } = useContext(ErrorContext);
+  const { user } = useContext(UserContext);
+  const posts = useContext(PostsContext);
+  const postDetails = useContext(PostDataContext);
+
   return (
     <main className="section">
       <div className="container">
@@ -21,42 +31,56 @@ export const App: React.FC = () => {
               </div>
 
               <div className="block" data-cy="MainContent">
-                <p data-cy="NoSelectedUser">
-                  No user selected
-                </p>
-
-                <Loader />
-
-                <div
-                  className="notification is-danger"
-                  data-cy="PostsLoadingError"
-                >
-                  Something went wrong!
-                </div>
+                {!user && (
+                  <p data-cy="NoSelectedUser">
+                    No user selected
+                  </p>
+                )}
+                {isError && (
+                  <div
+                    className="notification is-danger"
+                    data-cy="PostsLoadingError"
+                  >
+                    Something went wrong!
+                  </div>
+                )}
 
-                <div className="notification is-warning" data-cy="NoPostsYet">
-                  No posts yet
-                </div>
+                {isLoadingPosts ? <Loader /> : (
+                  <>
+                    {(posts?.length > 0 && user && !isError) && (
+                      <PostsList />
+                    )}
 
-                <PostsList />
+                    {(posts?.length === 0 && user && !isError) && (
+                      <div
+                        className="notification is-warning"
+                        data-cy="NoPostsYet"
+                      >
+                        No posts yet
+                      </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 />
+          {postDetails.postData !== null && (
+            <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>
             </div>
-          </div>
+          )}
         </div>
       </div>
     </main>

src/api/comments.ts

@@ -0,0 +1,15 @@
+import { Comment } from '../types/Comment';
+import { Post } from '../types/Post';
+import { client } from '../utils/fetchClient';
+
+export const getComments = (postData: Post | null) => {
+  return client.get<Comment[]>(`/comments?postId=${postData?.id}`);
+};
+
+export const createComment = (comment: Partial<Comment>) => {
+  return client.post<Comment>('/comments', comment);
+};
+
+export const deleteComment = (commentId: number) => {
+  return client.delete(`/comments/${commentId}`);
+};

src/api/posts.ts

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

src/api/users.ts

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