task solved

README.md

@@ -17,4 +17,4 @@ This task is similar to [Static List of TODOs](https://github.com/mate-academy/r
 - Implement a solution following the [React task guideline](https://github.com/mate-academy/react_task-guideline#react-tasks-guideline).
 - Use the [React TypeScript cheat sheet](https://mate-academy.github.io/fe-program/js/extra/react-typescript).
 - 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/) and add it to the PR description.
+- Replace `<your_account>` with your Github username in the [DEMO LINK](https://TommasoGiacopini.github.io/react_static-list-of-posts/) and add it to the PR description.

package.json

@@ -18,7 +18,7 @@
     "@mate-academy/cypress-tools": "^1.0.4",
     "@mate-academy/eslint-config-react": "*",
     "@mate-academy/eslint-config-react-typescript": "*",
-    "@mate-academy/scripts": "^1.2.8",
+    "@mate-academy/scripts": "^1.2.12",
     "@mate-academy/students-ts-config": "*",
     "@mate-academy/stylelint-config": "*",
     "@types/node": "^17.0.23",

src/App.tsx

@@ -1,109 +1,34 @@
-import React from 'react';
-
+import postsFromServer from './api/posts';
+import commentsFromServer from './api/comments';
+import usersFromServer from './api/users';
+import { User } from './types/User';
+import { Post } from './types/Post';
+import { Comment } from './types/Comment';
+import { PostList } from './components/PostList';
 import './App.scss';
 
-// import postsFromServer from './api/posts';
-// import commentsFromServer from './api/comments';
-// import usersFromServer from './api/users';
-
-export const App: React.FC = () => (
-  <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>
+function getUserById(userId: number): User | null {
+  const foundUser = usersFromServer.find(user => user.id === userId);
 
-      <div className="PostInfo">
-        <div className="PostInfo__header">
-          <h3 className="PostInfo__title">
-            doloremque illum aliquid sunt
-          </h3>
+  return foundUser || null;
+}
 
-          <p>
-            {' Posted by  '}
+function getCommentsById(postId: number): Comment[] {
+  const foundComments = commentsFromServer
+    .filter(comment => comment.postId === postId);
 
-            <a className="UserInfo" href="mailto:[email protected]">
-              Patricia Lebsack
-            </a>
-          </p>
-        </div>
+  return foundComments;
+}
 
-        <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>
+export const posts: Post[] = postsFromServer.map(post => ({
+  ...post,
+  user: getUserById(post.userId),
+  comments: getCommentsById(post.id),
+}));
 
-        <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: React.FC = () => (
+  <section className="App">
+    <h1 className="App__title">Static list of posts</h1>
+    <PostList posts={posts} />
   </section>
 );

src/components/CommentInfo/CommentInfo.tsx

@@ -1,5 +1,34 @@
-import React from 'react';
+import { Comment } from '../../types/Comment';
 
-export const CommentInfo: React.FC = () => (
-  <>Put the comment here</>
-);
+type Props = {
+  comment: Comment;
+};
+
+export const CommentInfo: React.FC<Props> = ({ comment }) => {
+  const {
+    name,
+    email,
+    body,
+  } = comment;
+
+  return (
+    <div className="CommentInfo">
+      <div className="CommentInfo__title">
+        <strong className="CommentInfo__name">{name}</strong>
+
+        {' by '}
+
+        <a
+          className="CommentInfo__email"
+          href={`mailto:${email}`}
+        >
+          {email}
+        </a>
+      </div>
+
+      <div className="CommentInfo__body">
+        {body}
+      </div>
+    </div>
+  );
+};

src/components/CommentList/CommentList.tsx

@@ -1,5 +1,16 @@
 import React from 'react';
+import { Comment } from '../../types/Comment';
+import { CommentInfo } from '../CommentInfo';
+import './CommentList.scss';
 
-export const CommentList: React.FC = () => (
-  <>Put the list here</>
+type Props = {
+  comments: Comment[];
+};
+
+export const CommentList: React.FC<Props> = ({ comments }) => (
+  <div className="CommentList">
+    {comments.map(comment => (
+      <CommentInfo key={comment.id} comment={comment} />
+    ))}
+  </div>
 );

src/components/PostInfo/PostInfo.tsx

@@ -1,5 +1,41 @@
 import React from 'react';
 
-export const PostInfo: React.FC = () => (
-  <>Put the post here</>
-);
+import { Post } from '../../types/Post';
+import { CommentList } from '../CommentList';
+import { UserInfo } from '../UserInfo';
+import './PostInfo.scss';
+
+type Props = {
+  post: Post;
+};
+
+export const PostInfo: React.FC<Props> = ({ post }) => {
+  const {
+    title,
+    body,
+    user,
+    comments,
+  } = post;
+
+  return (
+    <div className="PostInfo">
+      <div className="PostInfo__header">
+        <h3 className="PostInfo__title">{title}</h3>
+
+        {user && (
+          <UserInfo user={user} />
+        )}
+      </div>
+
+      <p className="PostInfo__body">
+        {body}
+      </p>
+
+      <hr />
+
+      {comments.length
+        ? <CommentList comments={comments} />
+        : <b data-cy="NoCommentsMessage">No comments yet</b>}
+    </div>
+  );
+};

src/components/PostList/PostList.tsx

@@ -1,5 +1,16 @@
 import React from 'react';
 
-export const PostList: React.FC = () => (
-  <>Put the list here</>
+import { Post } from '../../types/Post';
+import { PostInfo } from '../PostInfo';
+
+type Props = {
+  posts: Post[];
+};
+
+export const PostList: React.FC<Props> = ({ posts }) => (
+  <div className="PostList">
+    {posts.map(post => (
+      <PostInfo key={post.id} post={post} />
+    ))}
+  </div>
 );

src/components/UserInfo/UserInfo.tsx

@@ -1,5 +1,17 @@
 import React from 'react';
+import { User } from '../../types/User';
+import './UserInfo.scss';
 
-export const UserInfo: React.FC = () => (
-  <>Put the user here</>
+type Props = {
+  user: User;
+};
+
+export const UserInfo: React.FC<Props> = ({ user }) => (
+  <p>
+    {' Posted by  '}
+
+    <a className="UserInfo" href={`mailto:${user.email}`}>
+      {user.name}
+    </a>
+  </p>
 );

src/types/Comment.ts

@@ -0,0 +1,7 @@
+export interface Comment {
+  postId: number,
+  id: number,
+  name: string
+  email: string,
+  body: string,
+}

src/types/Post.ts

@@ -0,0 +1,11 @@
+import { User } from './User';
+import { Comment } from './Comment';
+
+export interface Post {
+  userId: number
+  id: number
+  title: string,
+  body: string,
+  user: User | null,
+  comments: Comment[],
+}

src/types/User.ts

@@ -0,0 +1,6 @@
+export interface User {
+  id: number,
+  name: string,
+  username: string,
+  email: string,
+}