add task solution

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
+   data.map((user) => {
+   id, name, email, phone;
+   })

package.json

@@ -15,7 +15,7 @@
   },
   "devDependencies": {
     "@cypress/react18": "^2.0.1",
-    "@mate-academy/scripts": "^1.8.5",
+    "@mate-academy/scripts": "^1.9.12",
     "@mate-academy/students-ts-config": "*",
     "@mate-academy/stylelint-config": "*",
     "@types/node": "^20.14.10",

src/App.scss

@@ -21,3 +21,15 @@
 .message-body {
   white-space: pre-line;
 }
+
+.tile.is-ancestor {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.tile.is-parent {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  padding: .75rem;
+}

src/App.tsx

@@ -7,54 +7,63 @@ import './App.scss';
 import { PostsList } from './components/PostsList';
 import { PostDetails } from './components/PostDetails';
 import { UserSelector } from './components/UserSelector';
-import { Loader } from './components/Loader';
+import { useEffect, useState } from 'react';
+import { User } from './types/User';
+import { Post } from './types/Post';
 
-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>
-
-            <div className="block" data-cy="MainContent">
-              <p data-cy="NoSelectedUser">No user selected</p>
+export const App = () => {
+  const [selectedUser, setSelectedUser] = useState<User | null>(null);
+  const [openedPost, setOpenedPost] = useState<Post | null>(null);
 
-              <Loader />
+  useEffect(() => {
+    setOpenedPost(null);
+  }, [selectedUser]);
 
-              <div
-                className="notification is-danger"
-                data-cy="PostsLoadingError"
-              >
-                Something went wrong!
+  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
+                  selectUser={setSelectedUser}
+                  selectedUser={selectedUser}
+                />
               </div>
 
-              <div className="notification is-warning" data-cy="NoPostsYet">
-                No posts yet
+              <div className="block" data-cy="MainContent">
+                {selectedUser ? (
+                  <PostsList
+                    userID={selectedUser.id}
+                    setOpenedPost={setOpenedPost}
+                    openedPost={openedPost}
+                  />
+                ) : (
+                  <p data-cy="NoSelectedUser">No user selected</p>
+                )}
               </div>
-
-              <PostsList />
             </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': !!openedPost },
+            )}
+          >
+            {!!openedPost && (
+              <div className="tile is-child box is-success">
+                <PostDetails post={openedPost} />
+              </div>
+            )}
           </div>
         </div>
       </div>
-    </div>
-  </main>
-);
+    </main>
+  );
+};

src/components/CommentItem.tsx

@@ -0,0 +1,53 @@
+import React, { useState } from 'react';
+import { Comment } from '../types/Comment';
+import { client } from '../utils/fetchClient';
+
+interface Props {
+  comment: Comment;
+  setComments: (
+    updateFn: (prevComments: Comment[] | null) => Comment[] | null,
+  ) => void;
+}
+
+export const CommentItem: React.FC<Props> = ({
+  comment: { name, email, body, id },
+  setComments,
+}) => {
+  const [isDeleted, setIsDeleted] = useState(false);
+  const deleteComment = () => {
+    setIsDeleted(true);
+    client.delete(`/comments/${id}`);
+    setComments(prevComments => {
+      if (!prevComments) {
+        return prevComments;
+      }
+
+      return prevComments.filter(comment => comment.id !== id);
+    });
+  };
+
+  if (isDeleted) {
+    return;
+  }
+
+  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={deleteComment}
+        ></button>
+      </div>
+
+      <div className="message-body" data-cy="CommentBody">
+        {body}
+      </div>
+    </article>
+  );
+};