Skip to content

Commit c908916

Browse files
Larysa1387Larysa1387
committed
implement PostList, CommentList, and UserInfo components
1 parent 9de0191 commit c908916

File tree

11 files changed

+109
-135
lines changed

11 files changed

+109
-135
lines changed

‎README.md

+2-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@ This task is similar to [Static List of TODOs](https://github.com/mate-academy/r
1010
- `Info` components should take one object and render its data.
1111

1212
## Instructions
13+
1314
- Install Prettier Extention and use this [VSCode settings](https://mate-academy.github.io/fe-program/tools/vscode/settings.json) to enable format on save.
1415
- Implement a solution following the [React task guideline](https://github.com/mate-academy/react_task-guideline#react-tasks-guideline).
1516
- Open one more terminal and run tests with `npm test` to ensure your solution is correct.
16-
- 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.
17+
- Replace `<your_account>` with your Github username in the [DEMO LINK](https://Larysa1387.github.io/react_static-list-of-posts-js/) and add it to the PR description.

‎src/App.jsx

+16-97
Original file line numberDiff line numberDiff line change
@@ -1,104 +1,23 @@
11
import './App.scss';
2-
3-
// import postsFromServer from './api/posts.json';
4-
// import commentsFromServer from './api/comments.json';
5-
// import usersFromServer from './api/users.json';
2+
import postsFromServer from './api/posts.json';
3+
import commentsFromServer from './api/comments.json';
4+
import usersFromServer from './api/users.json';
5+
import { PostList } from './components/PostList';
6+
7+
export const findUserById = userId =>
8+
usersFromServer.find(user => user.id === userId);
9+
export const findCommentsByPostId = postId =>
10+
commentsFromServer.filter(comment => comment.postId === postId);
11+
12+
export const posts = postsFromServer.map(post => ({
13+
...post,
14+
user: findUserById(post.userId),
15+
comments: findCommentsByPostId(post.id),
16+
}));
617

718
export const App = () => (
819
<section className="App">
920
<h1 className="App__title">Static list of posts</h1>
10-
11-
<div className="PostList">
12-
<div className="PostInfo">
13-
<div className="PostInfo__header">
14-
<h3 className="PostInfo__title">qui est esse</h3>
15-
16-
<p>
17-
{' Posted by '}
18-
19-
<a className="UserInfo" href="mailto:[email protected]">
20-
Leanne Graham
21-
</a>
22-
</p>
23-
</div>
24-
25-
<p className="PostInfo__body">
26-
est rerum tempore vitae sequi sint nihil reprehenderit dolor beatae ea
27-
dolores neque fugiat blanditiis voluptate porro vel nihil molestiae ut
28-
reiciendis qui aperiam non debitis possimus qui neque nisi nulla
29-
</p>
30-
31-
<hr />
32-
33-
<b data-cy="NoCommentsMessage">No comments yet</b>
34-
</div>
35-
36-
<div className="PostInfo">
37-
<div className="PostInfo__header">
38-
<h3 className="PostInfo__title">doloremque illum aliquid sunt</h3>
39-
40-
<p>
41-
{' Posted by '}
42-
43-
<a className="UserInfo" href="mailto:[email protected]">
44-
Patricia Lebsack
45-
</a>
46-
</p>
47-
</div>
48-
49-
<p className="PostInfo__body">
50-
deserunt eos nobis asperiores et hic est debitis repellat molestiae
51-
optio nihil ratione ut eos beatae quibusdam distinctio maiores earum
52-
voluptates et aut adipisci ea maiores voluptas maxime
53-
</p>
54-
55-
<div className="CommentList">
56-
<div className="CommentInfo">
57-
<div className="CommentInfo__title">
58-
<strong className="CommentInfo__name">pariatur omnis in</strong>
59-
60-
{' by '}
61-
62-
<a
63-
className="CommentInfo__email"
64-
href="mailto:[email protected]"
65-
>
66-
[email protected]
67-
</a>
68-
</div>
69-
70-
<div className="CommentInfo__body">
71-
dolorum voluptas laboriosam quisquam ab totam beatae et aut
72-
aliquid optio assumenda voluptas velit itaque quidem voluptatem
73-
tempore cupiditate in itaque sit molestiae minus dolores magni
74-
</div>
75-
</div>
76-
77-
<div className="CommentInfo">
78-
<div className="CommentInfo__title">
79-
<strong className="CommentInfo__name">
80-
odio adipisci rerum aut animi
81-
</strong>
82-
83-
{' by '}
84-
85-
<a
86-
className="CommentInfo__email"
87-
href="mailto:[email protected]"
88-
>
89-
[email protected]
90-
</a>
91-
</div>
92-
93-
<div className="CommentInfo__body">
94-
quia molestiae reprehenderit quasi aspernatur aut expedita
95-
occaecati aliquam eveniet laudantium omnis quibusdam delectus
96-
saepe quia accusamus maiores nam est cum et ducimus et vero
97-
voluptates excepturi deleniti ratione
98-
</div>
99-
</div>
100-
</div>
101-
</div>
102-
</div>
21+
<PostList posts={posts} />
10322
</section>
10423
);

‎src/App.scss

-29
Original file line numberDiff line numberDiff line change
@@ -5,32 +5,3 @@ iframe {
55
.App__title {
66
text-align: center;
77
}
8-
9-
.PostInfo {
10-
margin: 10px auto;
11-
width: 90%;
12-
border: 1px solid #000;
13-
border-radius: 8px;
14-
background-color: lightgray;
15-
padding: 1em;
16-
17-
&__title {
18-
margin: 0;
19-
}
20-
21-
&__header {
22-
margin-bottom: 1em;
23-
}
24-
}
25-
26-
.UserInfo {
27-
font-weight: bold;
28-
}
29-
30-
.CommentList {
31-
display: flex;
32-
flex-direction: column;
33-
gap: 0.7em;
34-
background-color: #eee;
35-
padding: 1em;
36-
}

‎src/components/CommentInfo/CommentInfo.jsx

+15-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,15 @@
1-
export const CommentInfo = () => <>Put the comment here</>;
1+
export const CommentInfo = ({ comment }) => (
2+
<div className="CommentInfo">
3+
<div className="CommentInfo__title">
4+
<strong className="CommentInfo__name">{comment.name}</strong>
5+
6+
{' by '}
7+
8+
<a className="CommentInfo__email" href={`mailto:${comment.email}`}>
9+
{comment.email}
10+
</a>
11+
</div>
12+
13+
<div className="CommentInfo__body">{comment.body}</div>
14+
</div>
15+
);

‎src/components/CommentList/CommentList.jsx

+11-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,11 @@
1-
export const CommentList = () => <>Put the list here</>;
1+
import './CommentList.scss';
2+
3+
import { CommentInfo } from '../CommentInfo/CommentInfo';
4+
5+
export const CommentList = ({ comments }) => (
6+
<div className="CommentList">
7+
{comments.map(comment => (
8+
<CommentInfo comment={comment} key={comment.id} />
9+
))}
10+
</div>
11+
);

‎src/components/CommentList/CommentList.scss

+7-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,7 @@
1-
// add styles here
1+
.CommentList {
2+
display: flex;
3+
flex-direction: column;
4+
gap: 0.7em;
5+
background-color: #eee;
6+
padding: 1em;
7+
}

‎src/components/PostInfo/PostInfo.jsx

+19-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,19 @@
1-
export const PostInfo = () => <>Put the post here</>;
1+
import './PostInfo.scss';
2+
import { CommentList } from '../CommentList/CommentList';
3+
import { UserInfo } from '../UserInfo/UserInfo';
4+
5+
export const PostInfo = ({ post }) => (
6+
<div className="PostInfo">
7+
<div className="PostInfo__header">
8+
<h3 className="PostInfo__title">{post.title}</h3>
9+
</div>
10+
<p className="PostInfo__body">{post.body}</p>
11+
<UserInfo user={post.user} />
12+
<hr />
13+
{post.comments.length === 0 ? (
14+
<b data-cy="NoCommentsMessage">No comments yet</b>
15+
) : (
16+
<CommentList comments={post.comments} />
17+
)}
18+
</div>
19+
);

‎src/components/PostInfo/PostInfo.scss

+16-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,16 @@
1-
// add styles here
1+
.PostInfo {
2+
margin: 10px auto;
3+
width: 90%;
4+
border: 1px solid #000;
5+
border-radius: 8px;
6+
background-color: lightgray;
7+
padding: 1em;
8+
9+
&__title {
10+
margin: 0;
11+
}
12+
13+
&__header {
14+
margin-bottom: 1em;
15+
}
16+
}

‎src/components/PostList/PostList.jsx

+9-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,9 @@
1-
export const PostList = () => <>Put the list here</>;
1+
import { PostInfo } from '../PostInfo/PostInfo';
2+
3+
export const PostList = ({ posts }) => (
4+
<div className="PostList">
5+
{posts.map(post => (
6+
<PostInfo post={post} key={post.id} />
7+
))}
8+
</div>
9+
);

‎src/components/UserInfo/UserInfo.jsx

+11-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,11 @@
1-
export const UserInfo = () => <>Put the user here</>;
1+
import './UserInfo.scss';
2+
3+
export const UserInfo = ({ user }) => (
4+
<p>
5+
{' Posted by '}
6+
7+
<a className="UserInfo" href={`mailto:${user.email}`}>
8+
{user.name}
9+
</a>
10+
</p>
11+
);

‎src/components/UserInfo/UserInfo.scss

+3-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
1-
// add styles here
1+
.UserInfo {
2+
font-weight: bold;
3+
}

0 commit comments

Comments
 (0)