result1

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

src/App.jsx

@@ -1,104 +1,61 @@
-import './App.scss';
+/* eslint-disable max-len */
 
-// import postsFromServer from './api/posts.json';
-// import commentsFromServer from './api/comments.json';
-// import usersFromServer from './api/users.json';
+import React from 'react';
+import './App.scss';
+import { PostList } from './components/PostList/PostList';
+
+const usersFromServer = [
+  { id: 1, name: 'Leanne Graham', email: '[email protected]' },
+  { id: 2, name: 'Patricia Lebsack', email: '[email protected]' },
+];
+
+const commentsFromServer = [
+  {
+    id: 1,
+    postId: 2,
+    name: 'pariatur omnis in',
+    email: '[email protected]',
+    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',
+  },
+  {
+    id: 2,
+    postId: 2,
+    name: 'odio adipisci rerum aut animi',
+    email: '[email protected]',
+    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',
+  },
+];
+
+const postsFromServer = [
+  {
+    id: 1,
+    title: 'qui est esse',
+    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',
+    userId: 1,
+  },
+  {
+    id: 2,
+    title: 'doloremque illum aliquid sunt',
+    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',
+    userId: 2,
+  },
+];
+
+const posts = postsFromServer.map(post => {
+  const user = usersFromServer.find(u => u.id === post.userId);
+  const comments = commentsFromServer.filter(c => c.postId === post.id);
+
+  return {
+    ...post,
+    user,
+    comments,
+  };
+});
 
 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>
-
-          <p>
-            {' Posted by  '}
-
-            <a className="UserInfo" href="mailto:[email protected]">
-              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:[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>
+    <PostList posts={posts} />
   </section>
 );

src/App.scss

@@ -22,15 +22,3 @@ iframe {
     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 +1,16 @@
-export const CommentInfo = () => <>Put the comment here</>;
+import React from 'react';
+import './CommentInfo.scss';
+
+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:${comment.email}`}>
+        {comment.email}
+      </a>
+    </div>
+
+    <div className="CommentInfo__body">{comment.body}</div>
+  </div>
+);

src/components/CommentInfo/CommentInfo.scss

@@ -1 +1,18 @@
-// add styles here
+.CommentInfo {
+  &__title {
+    margin-bottom: 0.5em;
+  }
+
+  &__name {
+    font-weight: bold;
+  }
+
+  &__email {
+    color: blue;
+    text-decoration: underline;
+  }
+
+  &__body {
+    line-height: 1.4;
+  }
+}

src/components/CommentList/CommentList.jsx

@@ -1 +1,17 @@
-export const CommentList = () => <>Put the list here</>;
+import React from 'react';
+import { CommentInfo } from '../CommentInfo/CommentInfo';
+import './CommentList.scss';
+
+export const CommentList = ({ comments }) => {
+  if (!comments.length) {
+    return <b data-cy="NoCommentsMessage">No comments yet</b>;
+  }
+
+  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,27 @@
-export const PostInfo = () => <>Put the post here</>;
+import React from 'react';
+import { UserInfo } from '../UserInfo/UserInfo';
+import { CommentList } from '../CommentList/CommentList';
+import './PostInfo.scss';
+
+export const PostInfo = ({ post }) => (
+  <div className="PostInfo">
+    <div className="PostInfo__header">
+      <h3 className="PostInfo__title">{post.title}</h3>
+
+      <p>
+        {' Posted by '}
+        <UserInfo user={post.user} />
+      </p>
+    </div>
+
+    <p className="PostInfo__body">{post.body}</p>
+
+    <hr />
+
+    {post.comments.length > 0 ? (
+      <CommentList comments={post.comments} />
+    ) : (
+      <b data-cy="NoCommentsMessage">No comments yet</b>
+    )}
+  </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,11 @@
-export const PostList = () => <>Put the list here</>;
+import React from 'react';
+import { PostInfo } from '../PostInfo/PostInfo';
+import './PostList.scss';
+
+export const PostList = ({ posts }) => (
+  <div className="PostList">
+    {posts.map(post => (
+      <PostInfo key={post.id} post={post} />
+    ))}
+  </div>
+);

src/components/UserInfo/UserInfo.jsx

@@ -1 +1,8 @@
-export const UserInfo = () => <>Put the user here</>;
+import React from 'react';
+import './UserInfo.scss';
+
+export const UserInfo = ({ user }) => (
+  <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;
+}