develop

.eslintignore

@@ -1,2 +1,3 @@
 /build
 /node_modules
+/.eslintrc.js

README.md

@@ -35,3 +35,4 @@ 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
+

package.json

@@ -19,7 +19,7 @@
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@mate-academy/eslint-config-react-typescript": "latest",
-    "@mate-academy/scripts": "^1.7.9",
+    "@mate-academy/scripts": "^1.9.4",
     "@mate-academy/students-ts-config": "latest",
     "@mate-academy/stylelint-config": "latest",
     "@types/node": "^16.18.80",

src/App.scss

@@ -1,3 +1,7 @@
+iframe {
+  display: none;
+}
+
 .Sidebar {
   overflow: hidden;
   opacity: 0;

src/App.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import 'bulma/bulma.sass';
 import '@fortawesome/fontawesome-free/css/all.css';
 import './App.scss';
@@ -8,8 +8,42 @@ import { PostsList } from './components/PostsList';
 import { PostDetails } from './components/PostDetails';
 import { UserSelector } from './components/UserSelector';
 import { Loader } from './components/Loader';
+import { SelectedUserContext } from './providers/UserProvider';
+import { SelectedPostContext } from './providers/PostProvider';
+import { getPosts } from './api/posts';
+import { Post } from './types/Post';
 
 export const App: React.FC = () => {
+  const [posts, setPosts] = useState<Post[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isErrorOnPostsLoad, setIsErrorOnPostsLoad] = useState(false);
+
+  const { selectedUser } = useContext(SelectedUserContext);
+  const { selectedPost } = useContext(SelectedPostContext);
+
+  const isSomethingWrong = !!selectedUser && isErrorOnPostsLoad && !isLoading;
+
+  const isNoPosts =
+    !!selectedUser && !isErrorOnPostsLoad && !posts.length && !isLoading;
+
+  const isPostsShow =
+    !!selectedUser && !isErrorOnPostsLoad && !!posts.length && !isLoading;
+
+  useEffect(() => {
+    if (selectedUser) {
+      setIsLoading(true);
+
+      getPosts(selectedUser.id)
+        .then(setPosts)
+        .catch(() => {
+          setIsErrorOnPostsLoad(true);
+        })
+        .finally(() => {
+          setIsLoading(false);
+        });
+    }
+  }, [selectedUser]);
+
   return (
     <main className="section">
       <div className="container">
@@ -21,22 +55,28 @@ export const App: React.FC = () => {
               </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 />
+                {!!selectedUser && isLoading && <Loader />}
 
-                <div
-                  className="notification is-danger"
-                  data-cy="PostsLoadingError"
-                >
-                  Something went wrong!
-                </div>
+                {isSomethingWrong && (
+                  <div
+                    className="notification is-danger"
+                    data-cy="PostsLoadingError"
+                  >
+                    Something went wrong!
+                  </div>
+                )}
 
-                <div className="notification is-warning" data-cy="NoPostsYet">
-                  No posts yet
-                </div>
+                {isNoPosts && (
+                  <div className="notification is-warning" data-cy="NoPostsYet">
+                    No posts yet
+                  </div>
+                )}
 
-                <PostsList />
+                {isPostsShow && <PostsList posts={posts} />}
               </div>
             </div>
           </div>
@@ -48,11 +88,11 @@ export const App: React.FC = () => {
               'is-parent',
               'is-8-desktop',
               'Sidebar',
-              'Sidebar--open',
+              { 'Sidebar--open': !!selectedPost },
             )}
           >
             <div className="tile is-child box is-success ">
-              <PostDetails />
+              {!!selectedPost && <PostDetails />}
             </div>
           </div>
         </div>

src/api/comments.ts

@@ -0,0 +1,14 @@
+import { client } from '../utils/fetchClient';
+import { Comment } from '../types/Comment';
+
+export function getComments(postId: number) {
+  return client.get<Comment[]>(`/comments?postId=${postId}`);
+}
+
+export function deleteComment(id: number) {
+  return client.delete(`/comments/${id}`);
+}
+
+export function createComment(data: Omit<Comment, 'id'>) {
+  return client.post<Comment>('/comments', data);
+}

src/api/posts.ts

@@ -0,0 +1,6 @@
+import { Post } from '../types/Post';
+import { client } from '../utils/fetchClient';
+
+export function getPosts(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 function getUsers() {
+  return client.get<User[]>('/users');
+}

src/components/CommentItem.tsx

@@ -0,0 +1,54 @@
+import React, { useCallback } from 'react';
+import { Comment } from '../types/Comment';
+import { deleteComment } from '../api/comments';
+
+type Props = {
+  comment: Comment;
+  comments: Comment[];
+  setComments: React.Dispatch<React.SetStateAction<Comment[]>>;
+};
+
+export const CommentItem: React.FC<Props> = ({
+  comment,
+  comments,
+  setComments,
+}) => {
+  const { id, email, name, body } = comment;
+
+  const handleDeleteComment = useCallback(() => {
+    const oldComments = [...comments];
+
+    setComments(prevComments => {
+      return prevComments.filter(c => c.id !== id);
+    });
+
+    deleteComment(id).catch(() => {
+      setComments(oldComments);
+      // eslint-disable-next-line no-console
+      console.error('Failed to delete comment');
+    });
+  }, [id, setComments, comments]);
+
+  return (
+    <article className="message is-small" data-cy="Comment">
+      <div className="message-header">
+        <a href={`mailto:${email}`} data-cy="CommentAuthor">
+          {name}
+        </a>
+        <button
+          data-cy="CommentDelete"
+          type="button"
+          className="delete is-small"
+          aria-label="delete"
+          onClick={handleDeleteComment}
+        >
+          delete button
+        </button>
+      </div>
+
+      <div className="message-body" data-cy="CommentBody">
+        {body}
+      </div>
+    </article>
+  );
+};

src/components/Loader/Loader.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import './Loader.scss';
 
 export const Loader = () => (