Develop

README.md

@@ -5,6 +5,7 @@ be opened in the sidebar with its comments. There should delete a comment and a
 form to add new comments.
 
 > Here is [the working version](https://mate-academy.github.io/react_dynamic-list-of-posts/)
+[Demo Link](https://read-my-code.github.io/react_dynamic-list-of-posts/)
 
 1. Learn the `utils/fetchClient.ts` and use it to interact with the API (tests expect that you each API request is sent after 300 ms delay);
 1. Initially the `App` shows the `UserSelector` and a paragraph `No user selected` in the main content block.

src/App.tsx

@@ -1,44 +1,100 @@
-import React from 'react';
+import React, { useState, useEffect } 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 { PostsList } from './components/PostList';
 import { PostDetails } from './components/PostDetails';
 import { UserSelector } from './components/UserSelector';
 import { Loader } from './components/Loader';
+import { User } from './types/User';
+import { client } from './utils/fetchClient';
+import { Post } from './types/Post';
 
 export const App: React.FC = () => {
+  const [selectedUser, setSelectedUser] = useState<User | null>(null);
+  const [userPosts, setUserPosts] = useState<Post[] | null>(null);
+  const [hasUserPostsLoadError, setHasUserPostsLoadError] = useState(false);
+  const [isUserPostsLoading, setIsUserPostsLoading] = useState(false);
+  const [isUserPostsEmpty, setIsUserPostsEmpty] = useState(false);
+  const [openedPost, setOpenedPost] = useState<Post | null>(null);
+  const [isNewCommentFormActive, setIsNewCommentFormActive] = useState(false);
+
+  const handleUserSelect = (user: User) => {
+    setSelectedUser(user);
+    setOpenedPost(null);
+    setUserPosts(null);
+  };
+
+  useEffect(() => {
+    setIsUserPostsEmpty(false);
+
+    if (selectedUser) {
+      setIsUserPostsLoading(true);
+
+      client.get<Post[]>(`/posts?userId=${selectedUser?.id}`)
+        .then(users => {
+          setUserPosts(users);
+
+          if (!users.length) {
+            setIsUserPostsEmpty(true);
+          }
+        })
+        .catch(() => setHasUserPostsLoadError(true))
+        .finally(() => {
+          setIsUserPostsLoading(false);
+        });
+    }
+  }, [selectedUser]);
+
   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 />
+                <UserSelector setUser={handleUserSelect} />
               </div>
 
               <div className="block" data-cy="MainContent">
-                <p data-cy="NoSelectedUser">
-                  No user selected
-                </p>
+                {!selectedUser && (
+                  <p data-cy="NoSelectedUser">
+                    No user selected
+                  </p>
+                )}
 
-                <Loader />
+                {isUserPostsLoading && (
+                  <Loader />
+                )}
 
-                <div
-                  className="notification is-danger"
-                  data-cy="PostsLoadingError"
-                >
-                  Something went wrong!
-                </div>
+                {hasUserPostsLoadError && (
+                  <div
+                    className="notification is-danger"
+                    data-cy="PostsLoadingError"
+                  >
+                    Something went wrong!
+                  </div>
+                )}
 
-                <div className="notification is-warning" data-cy="NoPostsYet">
-                  No posts yet
-                </div>
+                {isUserPostsEmpty && (
+                  <div
+                    className="notification is-warning"
+                    data-cy="NoPostsYet"
+                  >
+                    No posts yet
+                  </div>
+                )}
 
-                <PostsList />
+                {!!userPosts?.length && (
+                  <PostsList
+                    posts={userPosts}
+                    selectedPost={openedPost}
+                    openPost={setOpenedPost}
+                    setIsNewCommentFormActive={setIsNewCommentFormActive}
+                  />
+                )}
               </div>
             </div>
           </div>
@@ -49,12 +105,19 @@ export const App: React.FC = () => {
               'tile',
               'is-parent',
               'is-8-desktop',
-              'Sidebar',
-              'Sidebar--open',
+              'Sidebar', {
+                'Sidebar--open': openedPost,
+              },
             )}
           >
             <div className="tile is-child box is-success ">
-              <PostDetails />
+              {openedPost && (
+                <PostDetails
+                  post={openedPost}
+                  isNewCommentFormActive={isNewCommentFormActive}
+                  setIsNewCommentFormActive={setIsNewCommentFormActive}
+                />
+              )}
             </div>
           </div>
         </div>

src/components/CommentsList/CommentsList.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Comment } from '../../types/Comment';
+
+interface Props {
+  comments: Comment[];
+  setCommentIdToDelete: (value: number) => void;
+}
+
+export const CommentsList: React.FC<Props> = ({
+  comments,
+  setCommentIdToDelete,
+}) => (
+  <>
+    <p className="title is-4">Comments:</p>
+
+    {comments.map(comment => (
+      <article
+        key={comment.id}
+        className="message is-small"
+        data-cy="Comment"
+      >
+        <div className="message-header">
+          <a
+            href={`mailto:${comment.email}`}
+            data-cy="CommentAuthor"
+          >
+            {comment.name}
+          </a>
+          <button
+            data-cy="CommentDelete"
+            type="button"
+            className="delete is-small"
+            aria-label="delete"
+            onClick={() => setCommentIdToDelete(comment.id)}
+          >
+            delete button
+          </button>
+        </div>
+
+        <div className="message-body" data-cy="CommentBody">
+          {comment.body}
+        </div>
+      </article>
+    ))}
+  </>
+);

src/components/CommentsList/index.tsx

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