From 61f14ea27493478d69ced3b0b895bfd7ca79fe63 Mon Sep 17 00:00:00 2001 From: marushchak Date: Tue, 11 Feb 2025 13:07:02 +0200 Subject: [PATCH 1/2] for chack --- src/App.jsx | 117 ++++----------------- src/components/CommentInfo/CommentInfo.jsx | 13 ++- src/components/CommentList/CommentList.jsx | 12 ++- src/components/PostInfo/PostInfo.jsx | 12 ++- src/components/PostList/PostList.jsx | 38 ++++++- src/components/UserInfo/UserInfo.jsx | 9 +- 6 files changed, 100 insertions(+), 101 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 22ae1b9c0..4f2879ef4 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,104 +1,29 @@ import './App.scss'; -// import postsFromServer from './api/posts.json'; -// import commentsFromServer from './api/comments.json'; -// import usersFromServer from './api/users.json'; +import postsFromServer from './api/posts.json'; +import commentsFromServer from './api/comments.json'; +import usersFromServer from './api/users.json'; +import { PostList } from './components/PostList/PostList'; + +function getUserById(userId) { + return usersFromServer.find(user => user.id === userId) || null; +} + +function getCommentById(postId) { + return ( + commentsFromServer.filter(comment => comment.postId === postId) || null + ); +} + +export const posts = postsFromServer.map(post => ({ + ...post, + user: getUserById(post.userId), + comments: getCommentById(post.id), +})); export const App = () => (

Static list of posts

- -
-
-
-

qui est esse

- -

- {' Posted by '} - - - Leanne Graham - -

-
- -

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

- -
- - No comments yet -
- -
-
-

doloremque illum aliquid sunt

- -

- {' Posted by '} - - - Patricia Lebsack - -

-
- -

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

- -
-
-
- pariatur omnis in - - {' by '} - - - Telly_Lynch@karl.co.uk - -
- -
- 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 -
-
- -
-
- - odio adipisci rerum aut animi - - - {' by '} - - - Nikita@garfield.biz - -
- -
- 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 -
-
-
-
-
+
); diff --git a/src/components/CommentInfo/CommentInfo.jsx b/src/components/CommentInfo/CommentInfo.jsx index f99e27787..56ff61473 100644 --- a/src/components/CommentInfo/CommentInfo.jsx +++ b/src/components/CommentInfo/CommentInfo.jsx @@ -1 +1,12 @@ -export const CommentInfo = () => <>Put the comment here; +export const CommentInfo = ({ comment }) => { + <> +
+ {comment.name} + by + + {comment.email} + +
+
{comment.body}
+ ; +}; diff --git a/src/components/CommentList/CommentList.jsx b/src/components/CommentList/CommentList.jsx index 263dfbc73..1f7089fac 100644 --- a/src/components/CommentList/CommentList.jsx +++ b/src/components/CommentList/CommentList.jsx @@ -1 +1,11 @@ -export const CommentList = () => <>Put the list here; +import { CommentInfo } from '../CommentInfo'; + +export const CommentList = ({ comments }) => ( +
+ {comments.map(comment => ( +
+ +
+ ))} +
+); diff --git a/src/components/PostInfo/PostInfo.jsx b/src/components/PostInfo/PostInfo.jsx index eb3efb784..fddbbb806 100644 --- a/src/components/PostInfo/PostInfo.jsx +++ b/src/components/PostInfo/PostInfo.jsx @@ -1 +1,11 @@ -export const PostInfo = () => <>Put the post here; +import { UserInfo } from '../UserInfo'; + +export const PostInfo = ({ post }) => ( + <> +
+

{post.title}

+ +
+

{post.body}

+ +); diff --git a/src/components/PostList/PostList.jsx b/src/components/PostList/PostList.jsx index 4487a96c9..c969ea46c 100644 --- a/src/components/PostList/PostList.jsx +++ b/src/components/PostList/PostList.jsx @@ -1 +1,37 @@ -export const PostList = () => <>Put the list here; +import { CommentList } from '../CommentList'; +import { PostInfo } from '../PostInfo'; + +export const PostList = ({ posts }) => ( +
+ {/*
+
+

qui est esse

+ +

+ {' Posted by '} + + + Leanne Graham + +

+
+ +

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

+ +
+ + No comments yet +
*/} + + {posts.map(post => ( +
+ + +
+ ))} +
+); diff --git a/src/components/UserInfo/UserInfo.jsx b/src/components/UserInfo/UserInfo.jsx index 6264e2f7e..de6a502ea 100644 --- a/src/components/UserInfo/UserInfo.jsx +++ b/src/components/UserInfo/UserInfo.jsx @@ -1 +1,8 @@ -export const UserInfo = () => <>Put the user here; +export const UserInfo = ({ user }) => ( +

+ Posted by + + {user.name} + +

+); From d633c4d8098d8cd82e3e735d0845e240907f9ef9 Mon Sep 17 00:00:00 2001 From: marushchak Date: Wed, 12 Feb 2025 12:15:14 +0200 Subject: [PATCH 2/2] solutiom --- README.md | 2 +- src/App.scss | 29 -------------------- src/components/CommentInfo/CommentInfo.jsx | 8 +++--- src/components/CommentList/CommentList.jsx | 6 ++--- src/components/CommentList/CommentList.scss | 8 ++++++ src/components/PostInfo/PostInfo.jsx | 12 +++++++-- src/components/PostInfo/PostInfo.scss | 17 ++++++++++++ src/components/PostList/PostList.jsx | 30 +-------------------- src/components/UserInfo/UserInfo.jsx | 2 ++ src/components/UserInfo/UserInfo.scss | 4 +++ 10 files changed, 50 insertions(+), 68 deletions(-) diff --git a/README.md b/README.md index ab3abde58..c021bebd2 100644 --- a/README.md +++ b/README.md @@ -13,4 +13,4 @@ This task is similar to [Static List of TODOs](https://github.com/mate-academy/r - Install Prettier Extention and use this [VSCode settings](https://mate-academy.github.io/fe-program/tools/vscode/settings.json) to enable format on save. - Implement a solution following the [React task guideline](https://github.com/mate-academy/react_task-guideline#react-tasks-guideline). - Open one more terminal and run tests with `npm test` to ensure your solution is correct. -- Replace `` with your Github username in the [DEMO LINK](https://.github.io/react_static-list-of-posts-js/) and add it to the PR description. +- Replace `` with your Github username in the [DEMO LINK](https://MarushchacM.github.io/react_static-list-of-posts-js/) and add it to the PR description. diff --git a/src/App.scss b/src/App.scss index 98bb3956c..643650952 100644 --- a/src/App.scss +++ b/src/App.scss @@ -5,32 +5,3 @@ iframe { .App__title { text-align: center; } - -.PostInfo { - margin: 10px auto; - width: 90%; - border: 1px solid #000; - border-radius: 8px; - background-color: lightgray; - padding: 1em; - - &__title { - margin: 0; - } - - &__header { - margin-bottom: 1em; - } -} - -.UserInfo { - font-weight: bold; -} - -.CommentList { - display: flex; - flex-direction: column; - gap: 0.7em; - background-color: #eee; - padding: 1em; -} diff --git a/src/components/CommentInfo/CommentInfo.jsx b/src/components/CommentInfo/CommentInfo.jsx index 56ff61473..a45e5f789 100644 --- a/src/components/CommentInfo/CommentInfo.jsx +++ b/src/components/CommentInfo/CommentInfo.jsx @@ -1,5 +1,5 @@ -export const CommentInfo = ({ comment }) => { - <> +export const CommentInfo = ({ comment }) => ( +
{comment.name} by @@ -8,5 +8,5 @@ export const CommentInfo = ({ comment }) => {
{comment.body}
- ; -}; +
+); diff --git a/src/components/CommentList/CommentList.jsx b/src/components/CommentList/CommentList.jsx index 1f7089fac..6446bc02f 100644 --- a/src/components/CommentList/CommentList.jsx +++ b/src/components/CommentList/CommentList.jsx @@ -1,11 +1,11 @@ +import './CommentList.scss'; + import { CommentInfo } from '../CommentInfo'; export const CommentList = ({ comments }) => (
{comments.map(comment => ( -
- -
+ ))}
); diff --git a/src/components/CommentList/CommentList.scss b/src/components/CommentList/CommentList.scss index f1b40ee00..a63f9fe2b 100644 --- a/src/components/CommentList/CommentList.scss +++ b/src/components/CommentList/CommentList.scss @@ -1 +1,9 @@ // add styles here + +.CommentList { + display: flex; + flex-direction: column; + gap: 0.7em; + background-color: #eee; + padding: 1em; +} diff --git a/src/components/PostInfo/PostInfo.jsx b/src/components/PostInfo/PostInfo.jsx index fddbbb806..8cc0fca22 100644 --- a/src/components/PostInfo/PostInfo.jsx +++ b/src/components/PostInfo/PostInfo.jsx @@ -1,11 +1,19 @@ +import './PostInfo.scss'; + import { UserInfo } from '../UserInfo'; +import { CommentList } from '../CommentList'; export const PostInfo = ({ post }) => ( - <> +

{post.title}

{post.body}

- + {post.comments.length > 0 ? ( + + ) : ( + No comments yet + )} +
); diff --git a/src/components/PostInfo/PostInfo.scss b/src/components/PostInfo/PostInfo.scss index f1b40ee00..92d35ac11 100644 --- a/src/components/PostInfo/PostInfo.scss +++ b/src/components/PostInfo/PostInfo.scss @@ -1 +1,18 @@ // add styles here + +.PostInfo { + margin: 10px auto; + width: 90%; + border: 1px solid #000; + border-radius: 8px; + background-color: lightgray; + padding: 1em; + + &__title { + margin: 0; + } + + &__header { + margin-bottom: 1em; + } +} diff --git a/src/components/PostList/PostList.jsx b/src/components/PostList/PostList.jsx index c969ea46c..799feb37c 100644 --- a/src/components/PostList/PostList.jsx +++ b/src/components/PostList/PostList.jsx @@ -1,37 +1,9 @@ -import { CommentList } from '../CommentList'; import { PostInfo } from '../PostInfo'; export const PostList = ({ posts }) => (
- {/*
-
-

qui est esse

- -

- {' Posted by '} - - - Leanne Graham - -

-
- -

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

- -
- - No comments yet -
*/} - {posts.map(post => ( -
- - -
+ ))}
); diff --git a/src/components/UserInfo/UserInfo.jsx b/src/components/UserInfo/UserInfo.jsx index de6a502ea..4f0d337a7 100644 --- a/src/components/UserInfo/UserInfo.jsx +++ b/src/components/UserInfo/UserInfo.jsx @@ -1,3 +1,5 @@ +import './UserInfo.scss'; + export const UserInfo = ({ user }) => (

Posted by diff --git a/src/components/UserInfo/UserInfo.scss b/src/components/UserInfo/UserInfo.scss index f1b40ee00..41404ec65 100644 --- a/src/components/UserInfo/UserInfo.scss +++ b/src/components/UserInfo/UserInfo.scss @@ -1 +1,5 @@ // add styles here + +.UserInfo { + font-weight: bold; +}