From 8d5f9007b077baecc7cdd9a5946de8e96a37d968 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rus=C5=82an=20Karaniewski?= Date: Tue, 9 Jul 2024 09:32:09 +0200 Subject: [PATCH 1/2] My solution --- package-lock.json | 170 +++++++------------- package.json | 2 +- src/App.scss | 29 ---- src/App.tsx | 117 +++----------- src/components/CommentInfo/CommentInfo.scss | 1 - src/components/CommentInfo/CommentInfo.tsx | 22 ++- src/components/CommentList/CommentList.scss | 8 +- src/components/CommentList/CommentList.tsx | 17 +- src/components/PostInfo/PostInfo.scss | 17 +- src/components/PostInfo/PostInfo.tsx | 35 +++- src/components/PostList/PostList.scss | 1 - src/components/PostList/PostList.tsx | 16 +- src/components/UserInfo/UserInfo.scss | 4 +- src/components/UserInfo/UserInfo.tsx | 16 +- src/types/User.ts | 6 + src/types/comments.ts | 7 + src/types/post.ts | 11 ++ 17 files changed, 237 insertions(+), 242 deletions(-) delete mode 100644 src/components/CommentInfo/CommentInfo.scss delete mode 100644 src/components/PostList/PostList.scss create mode 100644 src/types/User.ts create mode 100644 src/types/comments.ts create mode 100644 src/types/post.ts diff --git a/package-lock.json b/package-lock.json index a6ce808f30..a7fcf491c3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1671,19 +1671,6 @@ "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz", "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==" }, - "color-convert": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", - "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", - "requires": { - "color-name": "~1.1.4" - } - }, - "color-name": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" - }, "string-width": { "version": "5.1.2", "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz", @@ -1694,36 +1681,6 @@ "strip-ansi": "^7.0.1" } }, - "string-width-cjs": { - "version": "npm:string-width@4.2.3", - "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", - "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", - "requires": { - "emoji-regex": "^8.0.0", - "is-fullwidth-code-point": "^3.0.0", - "strip-ansi": "^6.0.1" - }, - "dependencies": { - "ansi-regex": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", - "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==" - }, - "emoji-regex": { - "version": "8.0.0", - "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", - "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==" - }, - "strip-ansi": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", - "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", - "requires": { - "ansi-regex": "^5.0.1" - } - } - } - }, "strip-ansi": { "version": "7.1.0", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz", @@ -1732,21 +1689,6 @@ "ansi-regex": "^6.0.1" } }, - "strip-ansi-cjs": { - "version": "npm:strip-ansi@6.0.1", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", - "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", - "requires": { - "ansi-regex": "^5.0.1" - }, - "dependencies": { - "ansi-regex": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", - "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==" - } - } - }, "wrap-ansi": { "version": "8.1.0", "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz", @@ -1756,54 +1698,6 @@ "string-width": "^5.0.1", "strip-ansi": "^7.0.1" } - }, - "wrap-ansi-cjs": { - "version": "npm:wrap-ansi@7.0.0", - "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz", - "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==", - "requires": { - "ansi-styles": "^4.0.0", - "string-width": "^4.1.0", - "strip-ansi": "^6.0.0" - }, - "dependencies": { - "ansi-regex": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", - "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==" - }, - "ansi-styles": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", - "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", - "requires": { - "color-convert": "^2.0.1" - } - }, - "emoji-regex": { - "version": "8.0.0", - "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", - "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==" - }, - "string-width": { - "version": "4.2.3", - "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", - "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", - "requires": { - "emoji-regex": "^8.0.0", - "is-fullwidth-code-point": "^3.0.0", - "strip-ansi": "^6.0.1" - } - }, - "strip-ansi": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", - "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", - "requires": { - "ansi-regex": "^5.0.1" - } - } - } } } }, @@ -14333,6 +14227,23 @@ } } }, + "string-width-cjs": { + "version": "npm:string-width@4.2.3", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", + "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", + "requires": { + "emoji-regex": "^8.0.0", + "is-fullwidth-code-point": "^3.0.0", + "strip-ansi": "^6.0.1" + }, + "dependencies": { + "emoji-regex": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", + "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==" + } + } + }, "string.prototype.matchall": { "version": "4.0.10", "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.10.tgz", @@ -14468,6 +14379,14 @@ "ansi-regex": "^5.0.1" } }, + "strip-ansi-cjs": { + "version": "npm:strip-ansi@6.0.1", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", + "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", + "requires": { + "ansi-regex": "^5.0.1" + } + }, "strip-bom": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz", @@ -14875,9 +14794,9 @@ }, "dependencies": { "tslib": { - "version": "2.6.2", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", - "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==", + "version": "2.6.3", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.3.tgz", + "integrity": "sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==", "dev": true } } @@ -16300,6 +16219,39 @@ } } }, + "wrap-ansi-cjs": { + "version": "npm:wrap-ansi@7.0.0", + "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz", + "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==", + "requires": { + "ansi-styles": "^4.0.0", + "string-width": "^4.1.0", + "strip-ansi": "^6.0.0" + }, + "dependencies": { + "ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "requires": { + "color-convert": "^2.0.1" + } + }, + "color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "requires": { + "color-name": "~1.1.4" + } + }, + "color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" + } + } + }, "wrappy": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", diff --git a/package.json b/package.json index 3db363a8c2..5b58fd4a4d 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,7 @@ "devDependencies": { "@babel/plugin-proposal-private-property-in-object": "^7.21.11", "@mate-academy/eslint-config-react-typescript": "latest", - "@mate-academy/scripts": "^1.7.9", + "@mate-academy/scripts": "^1.8.1", "@mate-academy/students-ts-config": "latest", "@mate-academy/stylelint-config": "latest", "@types/node": "^16.18.80", diff --git a/src/App.scss b/src/App.scss index 98bb3956c3..6436509521 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/App.tsx b/src/App.tsx index 6ccd7807c2..cdcb8afcdf 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,106 +1,37 @@ import React from 'react'; import './App.scss'; +import { PostList } from './components/PostList'; +import { Post } from './types/post'; -// import postsFromServer from './api/posts'; -// import commentsFromServer from './api/comments'; -// import usersFromServer from './api/users'; +import postsFromServer from './api/posts'; +import commentsFromServer from './api/comments'; +import usersFromServer from './api/users'; +import { Comment } from './types/comments'; +import { User } from './types/User'; -export const App: React.FC = () => ( -
-

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 -
+const getPostComments = (postId: number): Comment[] => { + const foundComments = commentsFromServer.filter(com => com.postId === postId); -
-
-

doloremque illum aliquid sunt

+ return foundComments; +}; -

- {' Posted by '} +const getPostUser = (userId: number): User => { + const foundUser = usersFromServer.find(user => user.id === userId)!; - - Patricia Lebsack - -

-
+ return foundUser; +}; -

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

+const postsList: Post[] = postsFromServer.map(post => ({ + ...post, + user: getPostUser(post.userId), + comments: getPostComments(post.id) || [], +})); -
-
-
- 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 - -
+export const App: React.FC = () => ( +
+

Static list of posts

-
- 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.scss b/src/components/CommentInfo/CommentInfo.scss deleted file mode 100644 index f1b40ee00e..0000000000 --- a/src/components/CommentInfo/CommentInfo.scss +++ /dev/null @@ -1 +0,0 @@ -// add styles here diff --git a/src/components/CommentInfo/CommentInfo.tsx b/src/components/CommentInfo/CommentInfo.tsx index 4471a7b9a3..3f1f831a89 100644 --- a/src/components/CommentInfo/CommentInfo.tsx +++ b/src/components/CommentInfo/CommentInfo.tsx @@ -1,3 +1,23 @@ import React from 'react'; +import { Comment } from '../../types/comments'; -export const CommentInfo: React.FC = () => <>Put the comment here; +type Props = { + comments: Comment; +}; + +export const CommentInfo: React.FC = ({ comments }) => { + const { name, email, body } = comments; + + return ( +
+
+ {name} + {' by '} + + {email} + +
+
{body}
+
+ ); +}; diff --git a/src/components/CommentList/CommentList.scss b/src/components/CommentList/CommentList.scss index f1b40ee00e..91c2ed5fbb 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/CommentList/CommentList.tsx b/src/components/CommentList/CommentList.tsx index 8cc7d72e14..cc1f9d0ab0 100644 --- a/src/components/CommentList/CommentList.tsx +++ b/src/components/CommentList/CommentList.tsx @@ -1,3 +1,18 @@ import React from 'react'; +import { CommentInfo } from '../CommentInfo'; +import { Comment } from '../../types/comments'; +import './CommentList.scss'; -export const CommentList: React.FC = () => <>Put the list here; +type Props = { + comments: Comment[]; +}; + +export const CommentList: React.FC = ({ comments }) => { + return ( +
+ {comments.map(comment => ( + + ))} +
+ ); +}; diff --git a/src/components/PostInfo/PostInfo.scss b/src/components/PostInfo/PostInfo.scss index f1b40ee00e..1ad49fd344 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/PostInfo/PostInfo.tsx b/src/components/PostInfo/PostInfo.tsx index 90220ae5e1..3568e9bacd 100644 --- a/src/components/PostInfo/PostInfo.tsx +++ b/src/components/PostInfo/PostInfo.tsx @@ -1,3 +1,36 @@ import React from 'react'; +import { Post } from '../../types/post'; +import { CommentList } from '../CommentList'; +import './PostInfo.scss'; +import { UserInfo } from '../UserInfo'; -export const PostInfo: React.FC = () => <>Put the post here; +type Props = { + post: Post; +}; + +const noComments: JSX.Element = ( + <> +
+ No comments yet + +); + +export const PostInfo: React.FC = ({ post }) => { + const { user, title, body, comments } = post; + const postetByText = `Posted by ${()}`; + + return ( +
+
+

{title}

+

{postetByText}

+
+

{body}

+ {comments?.length === 0 ? ( + noComments + ) : ( + + )} +
+ ); +}; diff --git a/src/components/PostList/PostList.scss b/src/components/PostList/PostList.scss deleted file mode 100644 index f1b40ee00e..0000000000 --- a/src/components/PostList/PostList.scss +++ /dev/null @@ -1 +0,0 @@ -// add styles here diff --git a/src/components/PostList/PostList.tsx b/src/components/PostList/PostList.tsx index d7bc7aa5fa..29ddbf0dbf 100644 --- a/src/components/PostList/PostList.tsx +++ b/src/components/PostList/PostList.tsx @@ -1,3 +1,17 @@ import React from 'react'; +import { Post } from '../../types/post'; +import { PostInfo } from '../PostInfo'; -export const PostList: React.FC = () => <>Put the list here; +type Props = { + postsList: Post[]; +}; + +export const PostList: React.FC = ({ postsList }) => { + return ( +
+ {postsList.map(post => ( + + ))} +
+ ); +}; diff --git a/src/components/UserInfo/UserInfo.scss b/src/components/UserInfo/UserInfo.scss index f1b40ee00e..5080de7cd7 100644 --- a/src/components/UserInfo/UserInfo.scss +++ b/src/components/UserInfo/UserInfo.scss @@ -1 +1,3 @@ -// add styles here +.UserInfo { + font-weight: bold; +} diff --git a/src/components/UserInfo/UserInfo.tsx b/src/components/UserInfo/UserInfo.tsx index 0435cbfa67..f57e5b36c6 100644 --- a/src/components/UserInfo/UserInfo.tsx +++ b/src/components/UserInfo/UserInfo.tsx @@ -1,3 +1,17 @@ import React from 'react'; +import { User } from '../../types/User'; +import './UserInfo.scss'; -export const UserInfo: React.FC = () => <>Put the user here; +type Props = { + user: User; +}; + +export const UserInfo: React.FC = ({ user }) => { + const { email, name } = user; + + return ( + + {name} + + ); +}; diff --git a/src/types/User.ts b/src/types/User.ts new file mode 100644 index 0000000000..f74409b994 --- /dev/null +++ b/src/types/User.ts @@ -0,0 +1,6 @@ +export type User = { + id: number; + name: string; + username: string; + email: string; +}; diff --git a/src/types/comments.ts b/src/types/comments.ts new file mode 100644 index 0000000000..54ee4fac31 --- /dev/null +++ b/src/types/comments.ts @@ -0,0 +1,7 @@ +export type Comment = { + postId: number; + id: number; + name: string; + email: string; + body: string; +}; diff --git a/src/types/post.ts b/src/types/post.ts new file mode 100644 index 0000000000..9ad957899c --- /dev/null +++ b/src/types/post.ts @@ -0,0 +1,11 @@ +import { Comment } from './comments'; +import { User } from './User'; + +export type Post = { + userId: number; + id: number; + title: string; + body: string; + comments: Comment[]; + user: User; +}; From 86434dc0d8c54d67bf88253ce1f890c8fb151076 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rus=C5=82an=20Karaniewski?= Date: Wed, 10 Jul 2024 11:25:59 +0200 Subject: [PATCH 2/2] Fixes after review --- src/App.tsx | 10 ++++------ src/components/CommentInfo/CommentInfo.tsx | 8 +++++--- src/components/CommentList/CommentList.tsx | 2 +- src/components/PostInfo/PostInfo.tsx | 3 +-- src/types/post.ts | 2 +- 5 files changed, 12 insertions(+), 13 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index cdcb8afcdf..7f737b5d70 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -11,15 +11,13 @@ import { Comment } from './types/comments'; import { User } from './types/User'; const getPostComments = (postId: number): Comment[] => { - const foundComments = commentsFromServer.filter(com => com.postId === postId); - - return foundComments; + return commentsFromServer.filter(com => com.postId === postId); }; -const getPostUser = (userId: number): User => { - const foundUser = usersFromServer.find(user => user.id === userId)!; +const getPostUser = (userId: number): User | null => { + const foundUser = usersFromServer.find(user => user.id === userId); - return foundUser; + return foundUser || null; }; const postsList: Post[] = postsFromServer.map(post => ({ diff --git a/src/components/CommentInfo/CommentInfo.tsx b/src/components/CommentInfo/CommentInfo.tsx index 3f1f831a89..fe96cf513d 100644 --- a/src/components/CommentInfo/CommentInfo.tsx +++ b/src/components/CommentInfo/CommentInfo.tsx @@ -2,21 +2,23 @@ import React from 'react'; import { Comment } from '../../types/comments'; type Props = { - comments: Comment; + comment: Comment; }; -export const CommentInfo: React.FC = ({ comments }) => { - const { name, email, body } = comments; +export const CommentInfo: React.FC = ({ comment }) => { + const { name, email, body } = comment; return (
{name} {' by '} + {email}
+
{body}
); diff --git a/src/components/CommentList/CommentList.tsx b/src/components/CommentList/CommentList.tsx index cc1f9d0ab0..252ed8248a 100644 --- a/src/components/CommentList/CommentList.tsx +++ b/src/components/CommentList/CommentList.tsx @@ -11,7 +11,7 @@ export const CommentList: React.FC = ({ comments }) => { return (
{comments.map(comment => ( - + ))}
); diff --git a/src/components/PostInfo/PostInfo.tsx b/src/components/PostInfo/PostInfo.tsx index 3568e9bacd..dc366cc038 100644 --- a/src/components/PostInfo/PostInfo.tsx +++ b/src/components/PostInfo/PostInfo.tsx @@ -17,13 +17,12 @@ const noComments: JSX.Element = ( export const PostInfo: React.FC = ({ post }) => { const { user, title, body, comments } = post; - const postetByText = `Posted by ${()}`; return (

{title}

-

{postetByText}

+

Posted by {user && }

{body}

{comments?.length === 0 ? ( diff --git a/src/types/post.ts b/src/types/post.ts index 9ad957899c..8d92acc92a 100644 --- a/src/types/post.ts +++ b/src/types/post.ts @@ -7,5 +7,5 @@ export type Post = { title: string; body: string; comments: Comment[]; - user: User; + user: User | null; };