Skip to content

Commit 09eace7

Browse files
sasha777Wsasha777W
committed
add react post
1 parent 9de0191 commit 09eace7

File tree

10 files changed

+118
-130
lines changed

10 files changed

+118
-130
lines changed

‎src/App.jsx

Lines changed: 19 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -1,104 +1,27 @@
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 postsFromServer from './api/posts.json';
4+
import commentsFromServer from './api/comments.json';
5+
import usersFromServer from './api/users.json';
6+
import { PostList } from './components/PostList/PostList';
67

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>
39-
40-
<p>
41-
{' Posted by '}
8+
function getUserById(userId) {
9+
return usersFromServer.find(user => user.id === userId) || null;
10+
}
4211

43-
<a className="UserInfo" href="mailto:[email protected]">
44-
Patricia Lebsack
45-
</a>
46-
</p>
47-
</div>
12+
function getCommentsByPostId(postId) {
13+
return commentsFromServer.filter(comment => comment.postId === postId);
14+
}
4815

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

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

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

‎src/components/CommentList/CommentList.jsx

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,12 @@
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+
return (
6+
<div className="CommentList">
7+
{comments.map(comment => (
8+
<CommentInfo comment={comment} key={comment.id} />
9+
))}
10+
</div>
11+
);
12+
};

‎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: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,22 @@
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+
return (
7+
<div className="PostInfo">
8+
<div className="PostInfo__header">
9+
<h3 className="PostInfo__title">{post.title}</h3>
10+
<UserInfo user={post.user} />
11+
</div>
12+
13+
<p className="PostInfo__body">{post.body}</p>
14+
15+
{post.comments.length ? (
16+
<CommentList comments={post.comments} />
17+
) : (
18+
<b data-cy="NoCommentsMessage">No comments yet</b>
19+
)}
20+
</div>
21+
);
22+
};

‎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: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,11 @@
1-
export const PostList = () => <>Put the list here</>;
1+
import { PostInfo } from '../PostInfo/PostInfo';
2+
3+
export const PostList = ({ posts }) => {
4+
return (
5+
<div className="PostList">
6+
{posts.map(post => (
7+
<PostInfo post={post} key={post.id} />
8+
))}
9+
</div>
10+
);
11+
};

‎src/components/UserInfo/UserInfo.jsx

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

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)