problem

src/App.tsx

@@ -1,46 +1,87 @@
-import classNames from 'classnames';
+//import classNames from 'classnames';
 
 import 'bulma/css/bulma.css';
 import '@fortawesome/fontawesome-free/css/all.css';
 import './App.scss';
 
-import { PostsList } from './components/PostsList';
-import { PostDetails } from './components/PostDetails';
+//import { PostDetails } from './components/PostDetails';
 import { UserSelector } from './components/UserSelector';
+import { useEffect, useState } from 'react';
+import { User } from './types/User';
+import { getUsers } from './api/users';
 import { Loader } from './components/Loader';
+import { PostsList } from './components/PostsList/PostsList';
+import { Post } from './types/Post';
+import { getPosts } from './api/posts';
 
-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 [posts, setPosts] = useState<Post[]>([]);
+  const [selectedUser, setSelectedUser] = useState<User | null>(null);
+  const [notification, setNotification] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
 
-            <div className="block" data-cy="MainContent">
-              <p data-cy="NoSelectedUser">No user selected</p>
+  // #region load
+  useEffect(() => {
+    getUsers().then(setUsers);
+  }, []);
 
-              <Loader />
+  useEffect(() => {
+    if (selectedUser) {
+      setIsLoading(true);
+      setPosts([]);
+      setNotification('');
 
-              <div
-                className="notification is-danger"
-                data-cy="PostsLoadingError"
-              >
-                Something went wrong!
-              </div>
+      getPosts(selectedUser.id)
+        .then(res => {
+          if (res.length === 0) {
+            setNotification('is-warning');
+          }
 
-              <div className="notification is-warning" data-cy="NoPostsYet">
-                No posts yet
+          setPosts(res);
+        })
+        .catch(() => setNotification('is-danger'))
+        .finally(() => setIsLoading(false));
+    }
+  }, [selectedUser]);
+  // #endregion
+
+  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} onSelect={setSelectedUser} />
               </div>
 
-              <PostsList />
+              <div className="block" data-cy="MainContent">
+                {!isLoading && posts.length === 0 && !notification && (
+                  <p data-cy="NoSelectedUser">No user selected</p>
+                )}
+                {!isLoading && posts.length > 0 && <PostsList posts={posts} />}
+                {isLoading && <Loader />}
+
+                {notification === 'is-danger' && (
+                  <div
+                    className="notification is-danger"
+                    data-cy="PostsLoadingError"
+                  >
+                    Something went wrong!
+                  </div>
+                )}
+
+                {notification === 'is-warning' && (
+                  <div className="notification is-warning" data-cy="NoPostsYet">
+                    No posts yet
+                  </div>
+                )}
+              </div>
             </div>
           </div>
-        </div>
 
-        <div
+          {/*<div
           data-cy="Sidebar"
           className={classNames(
             'tile',
@@ -53,8 +94,9 @@ export const App = () => (
           <div className="tile is-child box is-success ">
             <PostDetails />
           </div>
+          </div>*/}
         </div>
       </div>
-    </div>
-  </main>
-);
+    </main>
+  );
+};

src/api/posts.tsx

@@ -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/users.tsx

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

src/components/PostsList/PostsList.tsx

@@ -0,0 +1,59 @@
+import classNames from 'classnames';
+import React, { useState } from 'react';
+import { Post } from '../../types/Post';
+
+interface Props {
+  posts: Post[];
+}
+
+export const PostsList: React.FC<Props> = ({ posts }) => {
+  const [selectedPost, setSelectedPost] = useState<Post | null>(null);
+
+  const handleOnClick = (post: Post) => {
+    setSelectedPost(prevPost =>
+      prevPost && prevPost.id === post.id ? null : post,
+    );
+  };
+
+  return (
+    <div data-cy="PostsList">
+      <p className="title">Posts:</p>
+
+      <table className="table is-fullwidth is-striped is-hoverable is-narrow">
+        <thead>
+          <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 => (
+            <tr data-cy="Post" key={post.id}>
+              <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': !selectedPost || selectedPost.id !== post.id,
+                  })}
+                  onClick={() => handleOnClick(post)}
+                >
+                  {!selectedPost || selectedPost.id !== post.id
+                    ? 'Open'
+                    : 'Close'}
+                </button>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};

src/components/PostsList/index.js

@@ -0,0 +1 @@
+export * from './PostsList';