commit for chat

README.md

@@ -35,3 +35,6 @@ Install Prettier Extention and use this [VSCode settings](https://mate-academy.g
 1. Implement comment deletion
     - Delete the commnet immediately not waiting for the server response to improve the UX.
 1. (*) Handle `Add` and `Delete` errors so the user can retry
+
+
+[DEMO LINK](https://Vasyl-Zhyliakov.github.io/react_dynamic-list-of-posts/)

src/App.tsx

@@ -1,4 +1,5 @@
 import classNames from 'classnames';
+import { useEffect, useMemo, useState } from 'react';
 
 import 'bulma/css/bulma.css';
 import '@fortawesome/fontawesome-free/css/all.css';
@@ -8,53 +9,139 @@ import { PostsList } from './components/PostsList';
 import { PostDetails } from './components/PostDetails';
 import { UserSelector } from './components/UserSelector';
 import { Loader } from './components/Loader';
+import { User } from './types/User';
+import { getUsersFromServer } from './api/users';
+import { Post } from './types/Post';
+import { getPostsFromServer } 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 [isDropDownOpen, setIsDropDownOpen] = useState(false);
+  const [users, setUsers] = useState<User[]>([]);
+  const [selectedUserId, setSelectedUserId] = useState<number | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [posts, setPosts] = useState<Post[]>([]);
+  const [errorMessage, setErrorMessage] = useState('');
+  const [notificationMessage, setNotificationMessage] = useState('');
+  const [activePostId, setActivePostId] = useState<number | null>(null);
 
-            <div className="block" data-cy="MainContent">
-              <p data-cy="NoSelectedUser">No user selected</p>
+  useEffect(() => {
+    getUsersFromServer()
+      .then(setUsers)
+      .catch(() => {});
+  }, []);
 
-              <Loader />
+  useEffect(() => {
+    if (selectedUserId) {
+      setIsLoading(true);
+      setPosts([]);
+      setErrorMessage('');
+      setNotificationMessage('');
+      setActivePostId(null);
+
+      getPostsFromServer(selectedUserId)
+        .then(fetchPosts => {
+          setPosts(fetchPosts);
+          if (fetchPosts.length === 0) {
+            setNotificationMessage('No posts yet');
+          }
+        })
+        .catch(() => {
+          setErrorMessage('Something went wrong!');
+        })
+        .finally(() => {
+          setIsLoading(false);
+        });
+    }
+  }, [selectedUserId]);
+
+  const activePost = useMemo(() => {
+    if (activePostId) {
+      return posts.find(post => post.id === activePostId);
+    }
+
+    return null;
+  }, [activePostId, posts]);
+
+  useEffect(() => {
+    const handleClickOutside = () => {
+      setIsDropDownOpen(false);
+    };
+
+    document.addEventListener('click', handleClickOutside);
+
+    return () => {
+      document.removeEventListener('click', handleClickOutside);
+    };
+  }, []);
 
-              <div
-                className="notification is-danger"
-                data-cy="PostsLoadingError"
-              >
-                Something went wrong!
-              </div>
 
-              <div className="notification is-warning" data-cy="NoPostsYet">
-                No posts yet
+  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
+                  isDropDownOpen={isDropDownOpen}
+                  users={users}
+                  setSelectedUserId={setSelectedUserId}
+                  selectedUserId={selectedUserId}
+                  setIsDropDownOpen={setIsDropDownOpen}
+                />
               </div>
 
-              <PostsList />
+              <div className="block" data-cy="MainContent">
+                {!selectedUserId && (
+                  <p data-cy="NoSelectedUser">No user selected</p>
+                )}
+
+                {isLoading && <Loader />}
+
+                {errorMessage && !isLoading && (
+                  <div
+                    className="notification is-danger"
+                    data-cy="PostsLoadingError"
+                  >
+                    {errorMessage}
+                  </div>
+                )}
+
+                {notificationMessage && !isLoading && !errorMessage && (
+                  <div className="notification is-warning" data-cy="NoPostsYet">
+                    {notificationMessage}
+                  </div>
+                )}
+
+                {posts.length > 0 && (
+                  <PostsList
+                    posts={posts}
+                    activePostId={activePostId}
+                    setActivePostId={setActivePostId}
+                  />
+                )}
+              </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': activePostId },
+            )}
+          >
+            {activePost && (
+              <div className="tile is-child box is-success ">
+                <PostDetails activePost={activePost} />
+              </div>
+            )}
           </div>
         </div>
       </div>
-    </div>
-  </main>
-);
+    </main>
+  );
+};

src/api/comments.ts

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

src/api/posts.ts

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

src/api/users.ts

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