diff --git a/README.md b/README.md index ab3abde5..3f01fd8e 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://Zaransoftline.github.io/react_static-list-of-posts-js/) and add it to the PR description. diff --git a/package-lock.json b/package-lock.json index 77c7a5e6..ba66a5fa 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,7 @@ "license": "GPL-3.0", "dependencies": { "@fortawesome/fontawesome-free": "^6.5.2", + "@rollup/rollup-win32-x64-msvc": "^4.34.8", "bulma": "^1.0.1", "classnames": "^2.5.1", "react": "^18.3.1", @@ -18,7 +19,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,9 +764,9 @@ } }, "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, "dependencies": { "@octokit/rest": "^17.11.2", @@ -1479,6 +1480,32 @@ "url": "https://opencollective.com/unts" } }, + "node_modules/@rollup/rollup-android-arm-eabi": { + "version": "4.18.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.18.1.tgz", + "integrity": "sha512-lncuC4aHicncmbORnx+dUaAgzee9cm/PbIqgWz1PpXuwc+sa1Ct83tnqUDy/GFKleLiN7ZIeytM6KJ4cAn1SxA==", + "cpu": [ + "arm" + ], + "dev": true, + "optional": true, + "os": [ + "android" + ] + }, + "node_modules/@rollup/rollup-android-arm64": { + "version": "4.18.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.18.1.tgz", + "integrity": "sha512-F/tkdw0WSs4ojqz5Ovrw5r9odqzFjb5LIgHdHZG65dFI1lWTWRVy32KDJLKRISHgJvqUeUhdIvy43fX41znyDg==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "android" + ] + }, "node_modules/@rollup/rollup-darwin-arm64": { "version": "4.18.1", "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.18.1.tgz", @@ -1492,6 +1519,173 @@ "darwin" ] }, + "node_modules/@rollup/rollup-darwin-x64": { + "version": "4.18.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.18.1.tgz", + "integrity": "sha512-IgpzXKauRe1Tafcej9STjSSuG0Ghu/xGYH+qG6JwsAUxXrnkvNHcq/NL6nz1+jzvWAnQkuAJ4uIwGB48K9OCGA==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "darwin" + ] + }, + "node_modules/@rollup/rollup-linux-arm-gnueabihf": { + "version": "4.18.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.18.1.tgz", + "integrity": "sha512-P9bSiAUnSSM7EmyRK+e5wgpqai86QOSv8BwvkGjLwYuOpaeomiZWifEos517CwbG+aZl1T4clSE1YqqH2JRs+g==", + "cpu": [ + "arm" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-arm-musleabihf": { + "version": "4.18.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.18.1.tgz", + "integrity": "sha512-5RnjpACoxtS+aWOI1dURKno11d7krfpGDEn19jI8BuWmSBbUC4ytIADfROM1FZrFhQPSoP+KEa3NlEScznBTyQ==", + "cpu": [ + "arm" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-arm64-gnu": { + "version": "4.18.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.18.1.tgz", + "integrity": "sha512-8mwmGD668m8WaGbthrEYZ9CBmPug2QPGWxhJxh/vCgBjro5o96gL04WLlg5BA233OCWLqERy4YUzX3bJGXaJgQ==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-arm64-musl": { + "version": "4.18.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.18.1.tgz", + "integrity": "sha512-dJX9u4r4bqInMGOAQoGYdwDP8lQiisWb9et+T84l2WXk41yEej8v2iGKodmdKimT8cTAYt0jFb+UEBxnPkbXEQ==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-powerpc64le-gnu": { + "version": "4.18.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.18.1.tgz", + "integrity": "sha512-V72cXdTl4EI0x6FNmho4D502sy7ed+LuVW6Ym8aI6DRQ9hQZdp5sj0a2usYOlqvFBNKQnLQGwmYnujo2HvjCxQ==", + "cpu": [ + "ppc64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-riscv64-gnu": { + "version": "4.18.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.18.1.tgz", + "integrity": "sha512-f+pJih7sxoKmbjghrM2RkWo2WHUW8UbfxIQiWo5yeCaCM0TveMEuAzKJte4QskBp1TIinpnRcxkquY+4WuY/tg==", + "cpu": [ + "riscv64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-s390x-gnu": { + "version": "4.18.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.18.1.tgz", + "integrity": "sha512-qb1hMMT3Fr/Qz1OKovCuUM11MUNLUuHeBC2DPPAWUYYUAOFWaxInaTwTQmc7Fl5La7DShTEpmYwgdt2hG+4TEg==", + "cpu": [ + "s390x" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-x64-gnu": { + "version": "4.18.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.18.1.tgz", + "integrity": "sha512-7O5u/p6oKUFYjRbZkL2FLbwsyoJAjyeXHCU3O4ndvzg2OFO2GinFPSJFGbiwFDaCFc+k7gs9CF243PwdPQFh5g==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-x64-musl": { + "version": "4.18.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.18.1.tgz", + "integrity": "sha512-pDLkYITdYrH/9Cv/Vlj8HppDuLMDUBmgsM0+N+xLtFd18aXgM9Nyqupb/Uw+HeidhfYg2lD6CXvz6CjoVOaKjQ==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-win32-arm64-msvc": { + "version": "4.18.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.18.1.tgz", + "integrity": "sha512-W2ZNI323O/8pJdBGil1oCauuCzmVd9lDmWBBqxYZcOqWD6aWqJtVBQ1dFrF4dYpZPks6F+xCZHfzG5hYlSHZ6g==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ] + }, + "node_modules/@rollup/rollup-win32-ia32-msvc": { + "version": "4.18.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.18.1.tgz", + "integrity": "sha512-ELfEX1/+eGZYMaCIbK4jqLxO1gyTSOIlZr6pbC4SRYFaSIDVKOnZNMdoZ+ON0mrFDp4+H5MhwNC1H/AhE3zQLg==", + "cpu": [ + "ia32" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ] + }, + "node_modules/@rollup/rollup-win32-x64-msvc": { + "version": "4.34.8", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.34.8.tgz", + "integrity": "sha512-U0FaE5O1BCpZSeE6gBl3c5ObhePQSfk9vDRToMmTkbhCOgW4jqvtS5LGyQ76L1fH8sM0keRp4uDTsbjiUyjk0g==", + "cpu": [ + "x64" + ], + "os": [ + "win32" + ] + }, "node_modules/@sinonjs/commons": { "version": "1.8.6", "resolved": "https://registry.npmjs.org/@sinonjs/commons/-/commons-1.8.6.tgz", @@ -8298,6 +8492,19 @@ "fsevents": "~2.3.2" } }, + "node_modules/rollup/node_modules/@rollup/rollup-win32-x64-msvc": { + "version": "4.18.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.18.1.tgz", + "integrity": "sha512-yjk2MAkQmoaPYCSu35RLJ62+dz358nE83VfTePJRp8CG7aMg25mEJYpXFiD+NcevhX8LxD5OP5tktPXnXN7GDw==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ] + }, "node_modules/run-parallel": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz", diff --git a/package.json b/package.json index b4034f08..3e347a9a 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,7 @@ "license": "GPL-3.0", "dependencies": { "@fortawesome/fontawesome-free": "^6.5.2", + "@rollup/rollup-win32-x64-msvc": "^4.34.8", "bulma": "^1.0.1", "classnames": "^2.5.1", "react": "^18.3.1", @@ -14,7 +15,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..e5493c42 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,104 +1,27 @@ import './App.scss'; +import { PostList } from './components/PostList/PostList'; -// 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'; + +function getUserById(userId) { + return usersFromServer.find(user => user.id === userId) || null; +} +function getCommentsById(postId) { + return commentsFromServer.filter((comment) => comment.postId === postId) || null; +} + +export const posts = postsFromServer.map(post => ({ + ...post, + user: getUserById(post.userId), + comments: getCommentsById(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/App.scss b/src/App.scss index 98bb3956..a8b09606 100644 --- a/src/App.scss +++ b/src/App.scss @@ -6,31 +6,4 @@ iframe { 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 f99e2778..f6fd1537 100644 --- a/src/components/CommentInfo/CommentInfo.jsx +++ b/src/components/CommentInfo/CommentInfo.jsx @@ -1 +1,21 @@ -export const CommentInfo = () => <>Put the comment here; +export const CommentInfo = ({ comment }) => { + return ( +
+
+ + {comment.name} + + + {' by '} + + + {comment.email} + +
+ +
+ {comment.body} +
+
+ ); +}; diff --git a/src/components/CommentList/CommentList.jsx b/src/components/CommentList/CommentList.jsx index 263dfbc7..a7ad12a0 100644 --- a/src/components/CommentList/CommentList.jsx +++ b/src/components/CommentList/CommentList.jsx @@ -1 +1,12 @@ -export const CommentList = () => <>Put the list here; +import './CommentList.scss' +import { CommentInfo } from "../CommentInfo/CommentInfo"; + +export const CommentList = ({ comments }) => { + return ( +
+ {comments.map(comment => ( + + ))} +
+ ) +}; diff --git a/src/components/CommentList/CommentList.scss b/src/components/CommentList/CommentList.scss index f1b40ee0..61f26e5b 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; + } + \ No newline at end of file diff --git a/src/components/PostInfo/PostInfo.jsx b/src/components/PostInfo/PostInfo.jsx index eb3efb78..39077eaa 100644 --- a/src/components/PostInfo/PostInfo.jsx +++ b/src/components/PostInfo/PostInfo.jsx @@ -1 +1,25 @@ -export const PostInfo = () => <>Put the post here; +import './PostInfo.scss'; +import { UserInfo } from '../UserInfo/UserInfo'; +import { CommentList } from '../CommentList/CommentList'; + +export const PostInfo = ({ post }) => { + return ( +
+
+

{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 f1b40ee0..d64b8e33 100644 --- a/src/components/PostInfo/PostInfo.scss +++ b/src/components/PostInfo/PostInfo.scss @@ -1 +1,17 @@ // 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; + } + } \ No newline at end of file diff --git a/src/components/PostList/PostList.jsx b/src/components/PostList/PostList.jsx index 4487a96c..4f3926f5 100644 --- a/src/components/PostList/PostList.jsx +++ b/src/components/PostList/PostList.jsx @@ -1 +1,11 @@ -export const PostList = () => <>Put the list here; +import { PostInfo } from "../PostInfo/PostInfo"; + +export const PostList = ({ posts }) => { + return ( +
+ {posts.map(post => ( + + ))} +
+ ); +}; diff --git a/src/components/UserInfo/UserInfo.jsx b/src/components/UserInfo/UserInfo.jsx index 6264e2f7..1bed368d 100644 --- a/src/components/UserInfo/UserInfo.jsx +++ b/src/components/UserInfo/UserInfo.jsx @@ -1 +1,13 @@ -export const UserInfo = () => <>Put the user here; +import './UserInfo.scss'; + +export const UserInfo = ({ user }) => { + return ( +

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

+ ) +}; diff --git a/src/components/UserInfo/UserInfo.scss b/src/components/UserInfo/UserInfo.scss index f1b40ee0..97cf9727 100644 --- a/src/components/UserInfo/UserInfo.scss +++ b/src/components/UserInfo/UserInfo.scss @@ -1 +1,4 @@ // add styles here +.UserInfo { + font-weight: bold; + } \ No newline at end of file