Skip to content

Commit ac2d656

Browse files
OlifanOlifan
committed
add solution
1 parent 9de0191 commit ac2d656

File tree

11 files changed

+113
-130
lines changed

11 files changed

+113
-130
lines changed

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,4 +13,4 @@ This task is similar to [Static List of TODOs](https://github.com/mate-academy/r
1313
- Install Prettier Extention and use this [VSCode settings](https://mate-academy.github.io/fe-program/tools/vscode/settings.json) to enable format on save.
1414
- Implement a solution following the [React task guideline](https://github.com/mate-academy/react_task-guideline#react-tasks-guideline).
1515
- 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.
16+
- Replace `<your_account>` with your Github username in the [DEMO LINK](https://olifan.github.io/react_static-list-of-posts-js/) and add it to the PR description.

‎src/App.jsx

Lines changed: 19 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -1,104 +1,28 @@
11
import './App.scss';
22

3-
// import postsFromServer from './api/posts.json';
4-
// import commentsFromServer from './api/comments.json';
5-
// import usersFromServer from './api/users.json';
3+
import commentsFromServer from './api/comments.json';
4+
import postsFromServer from './api/posts.json';
5+
import usersFromServer from './api/users.json';
66

7-
export const App = () => (
8-
<section className="App">
9-
<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>
7+
import { PostList } from './components/PostList/PostList';
398

40-
<p>
41-
{' Posted by '}
9+
function getCommentsByPostId(postId) {
10+
return commentsFromServer.filter(comment => comment.postId === postId);
11+
}
4212

43-
<a className="UserInfo" href="mailto:[email protected]">
44-
Patricia Lebsack
45-
</a>
46-
</p>
47-
</div>
13+
function getUserById(userId) {
14+
return usersFromServer.find(user => user.id === userId) || null;
15+
}
4816

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>
17+
export const preparedPosts = postsFromServer.map(post => ({
18+
...post,
19+
user: getUserById(post.userId),
20+
comments: getCommentsByPostId(post.id),
21+
}));
5422

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>
23+
export const App = () => (
24+
<section className="App">
25+
<h1 className="App__title">Static list of posts</h1>
26+
<PostList posts={preparedPosts} />
10327
</section>
10428
);

‎src/App.scss

Lines changed: 0 additions & 29 deletions
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

Lines changed: 15 additions & 1 deletion
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

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

‎src/components/CommentList/CommentList.scss

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

‎src/components/PostInfo/PostInfo.jsx

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

‎src/components/PostInfo/PostInfo.scss

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

‎src/components/PostList/PostList.jsx

Lines changed: 9 additions & 1 deletion
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 key={post.id} post={post} />
7+
))}
8+
</div>
9+
);

‎src/components/UserInfo/UserInfo.jsx

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,7 @@
1-
export const UserInfo = () => <>Put the user here</>;
1+
import './UserInfo.scss';
2+
3+
export const UserInfo = ({ user }) => (
4+
<a className="UserInfo" href={`mailto:${user.email}`}>
5+
{user.name}
6+
</a>
7+
);

‎src/components/UserInfo/UserInfo.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,4 @@
11
// add styles here
2+
.UserInfo {
3+
font-weight: bold;
4+
}

0 commit comments

Comments
 (0)