From 1e5028ee171435e828525206adc1f663f220fb9b Mon Sep 17 00:00:00 2001 From: sansamiste <127095130+sansamiste@users.noreply.github.com> Date: Tue, 4 Mar 2025 16:30:48 +0200 Subject: [PATCH] solution --- package-lock.json | 9 +- package.json | 2 +- src/App.jsx | 113 ++++---------------- src/components/CommentInfo/CommentInfo.jsx | 16 ++- src/components/CommentList/CommentList.jsx | 14 ++- src/components/CommentList/CommentList.scss | 8 +- src/components/PostInfo/PostInfo.jsx | 19 +++- src/components/PostInfo/PostInfo.scss | 17 ++- src/components/PostList/PostList.jsx | 10 +- src/components/UserInfo/UserInfo.jsx | 10 +- src/components/UserInfo/UserInfo.scss | 4 +- 11 files changed, 114 insertions(+), 108 deletions(-) diff --git a/package-lock.json b/package-lock.json index 77c7a5e6..d6cedd58 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,7 +18,7 @@ }, "devDependencies": { "@cypress/react18": "^2.0.1", - "@mate-academy/scripts": "^1.8.5", + "@mate-academy/scripts": "^2.1.0", "@mate-academy/stylelint-config": "*", "@vitejs/plugin-react": "^4.3.1", "cypress": "^13.13.0", @@ -763,10 +763,11 @@ } }, "node_modules/@mate-academy/scripts": { - "version": "1.8.5", - "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-1.8.5.tgz", - "integrity": "sha512-mHRY2FkuoYCf5U0ahIukkaRo5LSZsxrTSgMJheFoyf3VXsTvfM9OfWcZIDIDB521kdPrScHHnRp+JRNjCfUO5A==", + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-2.1.0.tgz", + "integrity": "sha512-o2vuqsP6B3j8ncaDIdRPGLltg2l8MZRRyBkQRDnTRt5XpgE+oSPgW6k0UiDMBbAI3IHNfHNf3ydJPQhPs2aVIw==", "dev": true, + "license": "MIT", "dependencies": { "@octokit/rest": "^17.11.2", "@types/get-port": "^4.2.0", diff --git a/package.json b/package.json index b4034f08..fdaeb025 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,7 @@ }, "devDependencies": { "@cypress/react18": "^2.0.1", - "@mate-academy/scripts": "^1.8.5", + "@mate-academy/scripts": "^2.1.0", "@mate-academy/stylelint-config": "*", "@vitejs/plugin-react": "^4.3.1", "cypress": "^13.13.0", diff --git a/src/App.jsx b/src/App.jsx index 22ae1b9c..6608f113 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,104 +1,27 @@ import './App.scss'; +import postsFromServer from './api/posts.json'; +import commentsFromServer from './api/comments.json'; +import usersFromServer from './api/users.json'; +import { PostList } from './components/PostList'; -// import postsFromServer from './api/posts.json'; -// import commentsFromServer from './api/comments.json'; -// import usersFromServer from './api/users.json'; +function getUserById(userId) { + return usersFromServer.find(user => user.id === userId) || null; +} + +function getCommentById(postId) { + return commentsFromServer.filter(comment => comment.postId === postId); +} + +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 f99e2778..8192753f 100644 --- a/src/components/CommentInfo/CommentInfo.jsx +++ b/src/components/CommentInfo/CommentInfo.jsx @@ -1 +1,15 @@ -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 263dfbc7..36c347aa 100644 --- a/src/components/CommentList/CommentList.jsx +++ b/src/components/CommentList/CommentList.jsx @@ -1 +1,13 @@ -export const CommentList = () => <>Put the list here; +import { CommentInfo } from '../CommentInfo'; + +export const CommentList = ({ comments }) => ( +
+ {comments.length > 0 ? ( + comments.map(comment => ( + + )) + ) : ( + No comments yet + )} +
+); diff --git a/src/components/CommentList/CommentList.scss b/src/components/CommentList/CommentList.scss index f1b40ee0..91c2ed5f 100644 --- a/src/components/CommentList/CommentList.scss +++ b/src/components/CommentList/CommentList.scss @@ -1 +1,7 @@ -// 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 eb3efb78..d4da6af5 100644 --- a/src/components/PostInfo/PostInfo.jsx +++ b/src/components/PostInfo/PostInfo.jsx @@ -1 +1,18 @@ -export const PostInfo = () => <>Put the post here; +import { UserInfo } from '../UserInfo'; +import { CommentList } from '../CommentList'; + +export const PostInfo = ({ post }) => ( +
+
+

{post.title}

+ + +
+ +

{post.body}

+ +
+ + +
+); diff --git a/src/components/PostInfo/PostInfo.scss b/src/components/PostInfo/PostInfo.scss index f1b40ee0..1ad49fd3 100644 --- a/src/components/PostInfo/PostInfo.scss +++ b/src/components/PostInfo/PostInfo.scss @@ -1 +1,16 @@ -// 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 4487a96c..799feb37 100644 --- a/src/components/PostList/PostList.jsx +++ b/src/components/PostList/PostList.jsx @@ -1 +1,9 @@ -export const PostList = () => <>Put the list here; +import { PostInfo } from '../PostInfo'; + +export const PostList = ({ posts }) => ( +
+ {posts.map(post => ( + + ))} +
+); diff --git a/src/components/UserInfo/UserInfo.jsx b/src/components/UserInfo/UserInfo.jsx index 6264e2f7..b7948ddd 100644 --- a/src/components/UserInfo/UserInfo.jsx +++ b/src/components/UserInfo/UserInfo.jsx @@ -1 +1,9 @@ -export const UserInfo = () => <>Put the user here; +export const UserInfo = ({ user }) => ( +

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

+); diff --git a/src/components/UserInfo/UserInfo.scss b/src/components/UserInfo/UserInfo.scss index f1b40ee0..5080de7c 100644 --- a/src/components/UserInfo/UserInfo.scss +++ b/src/components/UserInfo/UserInfo.scss @@ -1 +1,3 @@ -// add styles here +.UserInfo { + font-weight: bold; +}