Posts task

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://Oksigenka.github.io/react_static-list-of-posts-js/) and add it to the PR description.

src/App.jsx

@@ -1,104 +1,19 @@
 import './App.scss';
+import { PostList } from './components/PostList';
 
-// import postsFromServer from './api/posts.json';
-// import commentsFromServer from './api/comments.json';
-// import usersFromServer from './api/users.json';
+import postsFromServer from './api/posts.json';
+import commentsFromServer from './api/comments.json';
+import usersFromServer from './api/users.json';
+
+export const posts = postsFromServer.map(post => ({
+  ...post,
+  user: usersFromServer.find(user => user.id === post.userId),
+  comments: commentsFromServer.filter(comment => comment.postId === post.id),
+}));
 
 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:Sincere@april.biz">
-              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>
-
-          <p>
-            {' Posted by  '}
-
-            <a className="UserInfo" href="mailto:Julianne.OConner@kory.org">
-              Patricia Lebsack
-            </a>
-          </p>
-        </div>
-
-        <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:Telly_Lynch@karl.co.uk"
-              >
-                Telly_Lynch@karl.co.uk
-              </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:Nikita@garfield.biz"
-              >
-                Nikita@garfield.biz
-              </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>
+    <PostList posts={posts} />
   </section>
 );

src/App.scss

@@ -6,31 +6,5 @@ iframe {
   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/api/comments.json

@@ -1,11 +1,11 @@
 [
-  {
-    "postId": 1,
-    "id": 1,
-    "name": "id labore ex et quam laborum",
-    "email": "Eliseo@gardner.biz",
-    "body": "laudantium enim quasi est quidem magnam voluptate ipsam eos\ntempora quo necessitatibus\ndolor quam autem quasi\nreiciendis et nam sapiente accusantium"
-  },
+    {
+      "postId": 1,
+      "id": 1,
+      "name": "id labore ex et quam laborum",
+      "email": "Eliseo@gardner.biz",
+      "body": "laudantium enim quasi est quidem magnam voluptate ipsam eos\ntempora quo necessitatibus\ndolor quam autem quasi\nreiciendis et nam sapiente accusantium"
+    },
   {
     "postId": 1,
     "id": 2,

src/components/CommentInfo/CommentInfo.jsx

@@ -1 +1,19 @@
-export const CommentInfo = () => <>Put the comment here</>;
+import './CommentInfo.scss';
+
+export const CommentInfo = ({ comment }) => {
+  return (
+    <div className="CommentInfo">
+      <div className="CommentInfo__title">
+        <strong className="CommentInfo__name">{comment.name}</strong>
+
+        {' by '}
+
+        <a className="CommentInfo__email" href={`mailto:${comment.email}`}>
+          {comment.email}
+        </a>
+      </div>
+
+      <div className="CommentInfo__body">{comment.body}</div>
+    </div>
+  );
+};

src/components/CommentList/CommentList.jsx

@@ -1 +1,13 @@
-export const CommentList = () => <>Put the list here</>;
+import './CommentList.scss';
+
+import { CommentInfo } from '../CommentInfo';
+
+export const CommentList = ({ comments }) => {
+  return (
+    <div className="CommentList">
+      {comments.map(comment => (
+        <CommentInfo key={comment.id} 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,34 @@
-export const PostInfo = () => <>Put the post here</>;
+import './PostInfo.scss';
+
+import { CommentList } from '../CommentList';
+import { UserInfo } from '../UserInfo';
+
+function existComment(comments) {
+  if (!comments || comments.length === 0) {
+    return <b data-cy="NoCommentsMessage">No comments yet</b>;
+  }
+
+  return <CommentList comments={comments} />;
+}
+
+export const PostInfo = ({ post }) => {
+  const { user, comments } = post;
+
+  return (
+    <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">{post.body}</p>
+
+      <hr />
+
+      {existComment(comments)}
+    </div>
+  );
+};

src/components/PostInfo/PostInfo.scss

@@ -1 +1,17 @@
-// 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 +1,13 @@
-export const PostList = () => <>Put the list here</>;
+import './PostList.scss';
+
+import { PostInfo } from '../PostInfo';
+
+export const PostList = ({ posts }) => {
+  return (
+    <div className="PostList">
+      {posts.map(post => (
+        <PostInfo key={post.id} post={post} />
+      ))}
+    </div>
+  );
+};

src/components/PostList/PostList.scss

@@ -1 +1 @@
-// add styles here
+// add styles her

src/components/UserInfo/UserInfo.jsx

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

src/components/UserInfo/UserInfo.scss

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