Skip to content

Commit 621a5de

Browse files
veneracodeveneracode
committed
solution
1 parent 9de0191 commit 621a5de

File tree

9 files changed

+129
-101
lines changed

9 files changed

+129
-101
lines changed

‎src/App.jsx

+15-96
Original file line numberDiff line numberDiff line change
@@ -1,104 +1,23 @@
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';
7+
8+
function getUserById(userId) {
9+
return usersFromServer.find(user => user.id === userId) || null;
10+
}
11+
12+
export const posts = postsFromServer.map(post => ({
13+
...post ,
14+
comments: commentsFromServer.filter(comment => comment.postId === post.id),
15+
user: getUserById(post.userId),
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/components/CommentInfo/CommentInfo.jsx

+23-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,23 @@
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
10+
className="CommentInfo__email"
11+
href={`mailto:${comment.email}`}
12+
>
13+
{comment.email}
14+
</a>
15+
</div>
16+
17+
<div className="CommentInfo__body">
18+
{comment.body}
19+
</div>
20+
</div>
21+
)
22+
}
23+

‎src/components/CommentList/CommentList.jsx

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

‎src/components/CommentList/CommentList.scss

+7
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

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

‎src/components/PostInfo/PostInfo.scss

+16
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

+11-1
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 key = {post.id} post = {post} />
8+
))}
9+
</div>
10+
)
11+
}

‎src/components/UserInfo/UserInfo.jsx

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

‎src/components/UserInfo/UserInfo.scss

+3
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)