solutiom

README.md

@@ -13,4 +13,4 @@ This task is similar to [Static List of TODOs](https://github.com/mate-academy/r
 - Install Prettier Extention and use this [VSCode settings](https://mate-academy.github.io/fe-program/tools/vscode/settings.json) to enable format on save.
 - Implement a solution following the [React task guideline](https://github.com/mate-academy/react_task-guideline#react-tasks-guideline).
 - Open one more terminal and run tests with `npm test` to ensure your solution is correct.
-- Replace `<your_account>` with your Github username in the [DEMO LINK](https://<your_account>.github.io/react_static-list-of-posts-js/) and add it to the PR description.
+- Replace `<your_account>` with your Github username in the [DEMO LINK](https://MarushchacM.github.io/react_static-list-of-posts-js/) and add it to the PR description.

src/App.scss

@@ -5,32 +5,3 @@ iframe {
 .App__title {
   text-align: center;
 }
-
-.PostInfo {
-  margin: 10px auto;
-  width: 90%;
-  border: 1px solid #000;
-  border-radius: 8px;
-  background-color: lightgray;
-  padding: 1em;
-
-  &__title {
-    margin: 0;
-  }
-
-  &__header {
-    margin-bottom: 1em;
-  }
-}
-
-.UserInfo {
-  font-weight: bold;
-}
-
-.CommentList {
-  display: flex;
-  flex-direction: column;
-  gap: 0.7em;
-  background-color: #eee;
-  padding: 1em;
-}

src/components/CommentInfo/CommentInfo.jsx

@@ -1,5 +1,5 @@
-export const CommentInfo = ({ comment }) => {
-  <>
+export const CommentInfo = ({ comment }) => (
+  <div className="CommentInfo">
     <div className="CommentInfo__title">
       <strong className="CommentInfo__name">{comment.name}</strong>
       by
@@ -8,5 +8,5 @@ export const CommentInfo = ({ comment }) => {
       </a>
     </div>
     <div className="CommentInfo__body">{comment.body}</div>
-  </>;
-};
+  </div>
+);

src/components/CommentList/CommentList.jsx

@@ -1,11 +1,11 @@
+import './CommentList.scss';
+
 import { CommentInfo } from '../CommentInfo';
 
 export const CommentList = ({ comments }) => (
   <div className="CommentList">
     {comments.map(comment => (
-      <div className="CommentInfo">
-        <CommentInfo comment={comment} />
-      </div>
+      <CommentInfo key={comment.id} comment={comment} />
     ))}
   </div>
 );

src/components/CommentList/CommentList.scss

@@ -1 +1,9 @@
 // add styles here
+
+.CommentList {
+  display: flex;
+  flex-direction: column;
+  gap: 0.7em;
+  background-color: #eee;
+  padding: 1em;
+}

src/components/PostInfo/PostInfo.jsx

@@ -1,11 +1,19 @@
+import './PostInfo.scss';
+
 import { UserInfo } from '../UserInfo';
+import { CommentList } from '../CommentList';
 
 export const PostInfo = ({ post }) => (
-  <>
+  <div className="PostInfo">
     <div className="PostInfo__header">
       <h3 className="PostInfo__title">{post.title}</h3>
       <UserInfo user={post.user} />
     </div>
     <p className="PostInfo__body">{post.body}</p>
-  </>
+    {post.comments.length > 0 ? (
+      <CommentList comments={post.comments} />
+    ) : (
+      <b data-cy="NoCommentsMessage">No comments yet</b>
+    )}
+  </div>
 );

src/components/PostInfo/PostInfo.scss

@@ -1 +1,18 @@
 // add styles here
+
+.PostInfo {
+  margin: 10px auto;
+  width: 90%;
+  border: 1px solid #000;
+  border-radius: 8px;
+  background-color: lightgray;
+  padding: 1em;
+
+  &__title {
+    margin: 0;
+  }
+
+  &__header {
+    margin-bottom: 1em;
+  }
+}

src/components/PostList/PostList.jsx

@@ -1,37 +1,9 @@
-import { CommentList } from '../CommentList';
 import { PostInfo } from '../PostInfo';
 
 export const PostList = ({ posts }) => (
   <div className="PostList">
-    {/* <div className="PostInfo">
-      <div className="PostInfo__header">
-        <h3 className="PostInfo__title">qui est esse</h3>
-
-        <p>
-          {' Posted by  '}
-
-          <a className="UserInfo" href="mailto:[email protected]">
-            Leanne Graham
-          </a>
-        </p>
-      </div>
-
-      <p className="PostInfo__body">
-        est rerum tempore vitae sequi sint nihil reprehenderit dolor beatae ea
-        dolores neque fugiat blanditiis voluptate porro vel nihil molestiae ut
-        reiciendis qui aperiam non debitis possimus qui neque nisi nulla
-      </p>
-
-      <hr />
-
-      <b data-cy="NoCommentsMessage">No comments yet</b>
-    </div> */}
-
     {posts.map(post => (
-      <div className="PostInfo">
-        <PostInfo key={post.id} post={post} />
-        <CommentList comments={post.comments} />
-      </div>
+      <PostInfo key={post.id} post={post} />
     ))}
   </div>
 );

src/components/UserInfo/UserInfo.jsx

@@ -1,3 +1,5 @@
+import './UserInfo.scss';
+
 export const UserInfo = ({ user }) => (
   <p>
     Posted by

src/components/UserInfo/UserInfo.scss

@@ -1 +1,5 @@
 // add styles here
+
+.UserInfo {
+  font-weight: bold;
+}