Solution

package.json

@@ -14,7 +14,7 @@
   },
   "devDependencies": {
     "@cypress/react18": "^2.0.1",
-    "@mate-academy/scripts": "^1.8.5",
+    "@mate-academy/scripts": "^1.9.12",
     "@mate-academy/stylelint-config": "*",
     "@vitejs/plugin-react": "^4.3.1",
     "cypress": "^13.13.0",

src/App.jsx

@@ -1,104 +1,28 @@
 import './App.scss';
+import postsFromServer from './api/posts.json';
+import usersFromServer from './api/users.json';
+import { PostList } from './components/PostList/PostList';
+import commentsFromServer from './api/comments.json';
 
-// import postsFromServer from './api/posts.json';
-// import commentsFromServer from './api/comments.json';
-// import usersFromServer from './api/users.json';
 
-export const App = () => (
-  <section className="App">
-    <h1 className="App__title">Static list of posts</h1>
-
-    <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>
-
-      <div className="PostInfo">
-        <div className="PostInfo__header">
-          <h3 className="PostInfo__title">doloremque illum aliquid sunt</h3>
+function getUserById(userId) {
+  return usersFromServer.find(user => user.id === userId) || null;
+}
 
-          <p>
-            {' Posted by  '}
+function getCommentsById(commentId) {
+  return commentsFromServer.find(comment => comment.id === commentId) || null;
+}
 
-            <a className="UserInfo" href="mailto:[email protected]">
-              Patricia Lebsack
-            </a>
-          </p>
-        </div>
+const posts = postsFromServer.map(post => ({
+  ...post,
+  user: getUserById(post.userId),
+  comments: getCommentsById(post.id),
+}));
 
-        <p className="PostInfo__body">
-          deserunt eos nobis asperiores et hic est debitis repellat molestiae
-          optio nihil ratione ut eos beatae quibusdam distinctio maiores earum
-          voluptates et aut adipisci ea maiores voluptas maxime
-        </p>
 
-        <div className="CommentList">
-          <div className="CommentInfo">
-            <div className="CommentInfo__title">
-              <strong className="CommentInfo__name">pariatur omnis in</strong>
-
-              {' by '}
-
-              <a
-                className="CommentInfo__email"
-                href="mailto:[email protected]"
-              >
-                [email protected]
-              </a>
-            </div>
-
-            <div className="CommentInfo__body">
-              dolorum voluptas laboriosam quisquam ab totam beatae et aut
-              aliquid optio assumenda voluptas velit itaque quidem voluptatem
-              tempore cupiditate in itaque sit molestiae minus dolores magni
-            </div>
-          </div>
-
-          <div className="CommentInfo">
-            <div className="CommentInfo__title">
-              <strong className="CommentInfo__name">
-                odio adipisci rerum aut animi
-              </strong>
-
-              {' by '}
-
-              <a
-                className="CommentInfo__email"
-                href="mailto:[email protected]"
-              >
-                [email protected]
-              </a>
-            </div>
-
-            <div className="CommentInfo__body">
-              quia molestiae reprehenderit quasi aspernatur aut expedita
-              occaecati aliquam eveniet laudantium omnis quibusdam delectus
-              saepe quia accusamus maiores nam est cum et ducimus et vero
-              voluptates excepturi deleniti ratione
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
+export const App = () => (
+  <section className="App">
+    <h1 className="App__title">Static list of posts</h1>
+    <PostList posts={ posts} />
   </section>
 );

src/App.scss

@@ -27,10 +27,4 @@ iframe {
   font-weight: bold;
 }
 
-.CommentList {
-  display: flex;
-  flex-direction: column;
-  gap: 0.7em;
-  background-color: #eee;
-  padding: 1em;
-}
+

src/components/CommentInfo/CommentInfo.jsx

@@ -1 +1,48 @@
-export const CommentInfo = () => <>Put the comment here</>;
+export const CommentInfo = ({comment}) =>
+  <>
+    <div className="CommentInfo">
+      <div className="CommentInfo__title">
+        <strong className="CommentInfo__name">{comment.name}</strong>
+
+        {' by '}
+
+        <a
+          className="CommentInfo__email"
+          href="mailto:[email protected]"
+        >
+          [email protected]
+        </a>
+      </div>
+
+      <div className="CommentInfo__body">
+        dolorum voluptas laboriosam quisquam ab totam beatae et aut
+        aliquid optio assumenda voluptas velit itaque quidem voluptatem
+        tempore cupiditate in itaque sit molestiae minus dolores magni
+      </div>
+    </div>
+
+    <div className="CommentInfo">
+      <div className="CommentInfo__title">
+        <strong className="CommentInfo__name">
+          odio adipisci rerum aut animi
+        </strong>
+
+        {' by '}
+
+        <a
+          className="CommentInfo__email"
+          href="mailto:[email protected]"
+        >
+          [email protected]
+        </a>
+      </div>
+
+      <div className="CommentInfo__body">
+        quia molestiae reprehenderit quasi aspernatur aut expedita
+        occaecati aliquam eveniet laudantium omnis quibusdam delectus
+        saepe quia accusamus maiores nam est cum et ducimus et vero
+        voluptates excepturi deleniti ratione
+      </div>
+    </div>
+
+  </>;

src/components/CommentList/CommentList.jsx

@@ -1 +1,8 @@
-export const CommentList = () => <>Put the list here</>;
+import { CommentInfo } from "../CommentInfo/CommentInfo";
+
+export const CommentList = ({ comments }) =>
+    <div className="CommentList">
+      {comments.map(comment => (
+        <CommentInfo comment={comment} />
+      ))}
+    </div>

src/components/CommentList/CommentList.scss

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

src/components/PostInfo/PostInfo.jsx

@@ -1 +1,26 @@
-export const PostInfo = () => <>Put the post here</>;
+import { CommentList } from "../CommentList/CommentList";
+import { UserInfo } from "../UserInfo/UserInfo";
+
+
+export const PostInfo = ({post }) =>
+    <div className="PostInfo">
+      <div className="PostInfo__header">
+        <h3 className="PostInfo__title">{ post.title}</h3>
+
+        <p>
+          {' Posted by  '}
+
+          <UserInfo user={user} />
+        </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 <CommentList comments={commentsFromServer} /></b>
+    </div>

src/components/PostList/PostList.jsx

@@ -1 +1,11 @@
-export const PostList = () => <>Put the list here</>;
+import { PostInfo } from "../PostInfo/PostInfo";
+
+
+export const PostList = ({ posts }) =>
+  <>
+    <div className="PostList">
+      {posts.map(post => (
+        <PostInfo post={post} />
+      ))}
+    </div>
+  </>;

src/components/UserInfo/UserInfo.jsx

@@ -1 +1,5 @@
-export const UserInfo = () => <>Put the user here</>;
+export const UserInfo = () =>
+  <a className="UserInfo" href={`mailto:${user.email}`}>
+    {user.name}
+  </a>
+  ;