From fba4fba1311b20671ca2c440b33799cfc285f8c1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Wojciech=20Przy=C5=82uski?= Date: Fri, 13 Sep 2024 08:52:29 +0200 Subject: [PATCH 01/11] chore: initial setup for exersise --- README.md | 2 +- package-lock.json | 9 +++++---- package.json | 2 +- src/index.tsx | 1 + tsconfig.json | 1 + 5 files changed, 9 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index b1a2b34341..4f8d2d6a72 100644 --- a/README.md +++ b/README.md @@ -17,4 +17,4 @@ This task is similar to [Static List of TODOs](https://github.com/mate-academy/r - Implement a solution following the [React task guideline](https://github.com/mate-academy/react_task-guideline#react-tasks-guideline). - Use the [React TypeScript cheat sheet](https://mate-academy.github.io/fe-program/js/extra/react-typescript). - 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/) and add it to the PR description. +- Replace `` with your Github username in the [DEMO LINK](https://przwojwwp.github.io/react_static-list-of-posts/) and add it to the PR description. diff --git a/package-lock.json b/package-lock.json index 4339654af2..057739669e 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": "^1.9.12", "@mate-academy/students-ts-config": "*", "@mate-academy/stylelint-config": "*", "@types/node": "^20.14.10", @@ -1170,10 +1170,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": "1.9.12", + "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-1.9.12.tgz", + "integrity": "sha512-/OcmxMa34lYLFlGx7Ig926W1U1qjrnXbjFJ2TzUcDaLmED+A5se652NcWwGOidXRuMAOYLPU2jNYBEkKyXrFJA==", "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 8f0875aee2..01d185fd65 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": "^1.9.12", "@mate-academy/students-ts-config": "*", "@mate-academy/stylelint-config": "*", "@types/node": "^20.14.10", diff --git a/src/index.tsx b/src/index.tsx index 50470f1508..6e2bc93e7f 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,4 +1,5 @@ import { createRoot } from 'react-dom/client'; import { App } from './App'; +import React from 'react'; createRoot(document.getElementById('root') as HTMLElement).render(); diff --git a/tsconfig.json b/tsconfig.json index cfb168bb26..778406f15e 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -4,6 +4,7 @@ "src" ], "compilerOptions": { + "jsx": "react", "sourceMap": false, "types": ["node", "cypress"] } From 6d68ee15f6b3a0bdc75db92a40a93fdff13893a5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Wojciech=20Przy=C5=82uski?= Date: Fri, 13 Sep 2024 11:28:49 +0200 Subject: [PATCH 02/11] feat: create PostList component and render posts with map method in it --- src/App.tsx | 124 ++++++--------------------- src/components/PostList/PostList.tsx | 54 +++++++++++- src/types/Comment.ts | 7 ++ src/types/Post.ts | 11 +++ src/types/User.ts | 6 ++ 5 files changed, 105 insertions(+), 97 deletions(-) create mode 100644 src/types/Comment.ts create mode 100644 src/types/Post.ts create mode 100644 src/types/User.ts diff --git a/src/App.tsx b/src/App.tsx index 6ccd7807c2..fd4b8d0d80 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -2,105 +2,37 @@ import React from 'react'; import './App.scss'; -// 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 { User } from './types/User'; +import { Comment } from './types/Comment'; +import { Post } from './types/Post'; +import { PostList } from './components/PostList'; + +function getUser(userId: number): User | null { + const foundUser = usersFromServer.find(user => user.id === userId); + + return foundUser || null; +} + +function getComments(postId: number): Comment[] | null { + const foundComments = commentsFromServer.filter( + comment => comment.postId === postId, + ); + + return foundComments || null; +} + +const posts: Post[] = postsFromServer.map(post => ({ + ...post, + user: getUser(post.userId), + comments: getComments(post.id), +})); 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 -
- -
-
-

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/PostList/PostList.tsx b/src/components/PostList/PostList.tsx index d7bc7aa5fa..232d13af67 100644 --- a/src/components/PostList/PostList.tsx +++ b/src/components/PostList/PostList.tsx @@ -1,3 +1,55 @@ import React from 'react'; +import { Post } from '../../types/Post'; -export const PostList: React.FC = () => <>Put the list here; +export const PostList: React.FC<{ postsList: Post[] }> = ({ postsList }) => { + return ( +
+ {postsList.map(post => ( +
+
+

{post.title}

+ +

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

+
+ +

{post.body}

+ +
+ + {post.comments ? ( +
+ {post.comments.map(comment => ( +
+
+ + {comment.name} + + + {' by '} + + + {comment.email} + +
+ +
{comment.body}
+
+ ))} +
+ ) : ( + No comments yet + )} +
+ ))} +
+ ); +}; diff --git a/src/types/Comment.ts b/src/types/Comment.ts new file mode 100644 index 0000000000..54ee4fac31 --- /dev/null +++ b/src/types/Comment.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..48204f58a2 --- /dev/null +++ b/src/types/Post.ts @@ -0,0 +1,11 @@ +import { User } from './User'; +import { Comment } from './Comment'; + +export type Post = { + userId: number; + id: number; + title: string; + body: string; + user: User | null; + comments: Comment[] | null; +}; 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; +}; From 577fdf982152385b60b3c5d0eba2def65339a4e2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Wojciech=20Przy=C5=82uski?= Date: Fri, 13 Sep 2024 11:47:56 +0200 Subject: [PATCH 03/11] feat: create PostInfo component --- src/App.tsx | 2 +- src/components/PostInfo/PostInfo.tsx | 48 ++++++++++++++++++++++++- src/components/PostList/PostList.tsx | 52 ++++------------------------ 3 files changed, 54 insertions(+), 48 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index fd4b8d0d80..cc7a841c4f 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -33,6 +33,6 @@ const posts: Post[] = postsFromServer.map(post => ({ export const App: React.FC = () => (

Static list of posts

- +
); diff --git a/src/components/PostInfo/PostInfo.tsx b/src/components/PostInfo/PostInfo.tsx index 90220ae5e1..107e105fa3 100644 --- a/src/components/PostInfo/PostInfo.tsx +++ b/src/components/PostInfo/PostInfo.tsx @@ -1,3 +1,49 @@ import React from 'react'; +import { Post } from '../../types/Post'; -export const PostInfo: React.FC = () => <>Put the post here; +export const PostInfo: React.FC<{ post: Post }> = ({ post }) => { + return ( +
+
+

{post.title}

+ +

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

+
+ +

{post.body}

+ +
+ + {post.comments ? ( +
+ {post.comments.map(comment => ( +
+
+ {comment.name} + + {' by '} + + + {comment.email} + +
+ +
{comment.body}
+
+ ))} +
+ ) : ( + No comments yet + )} +
+ ); +}; diff --git a/src/components/PostList/PostList.tsx b/src/components/PostList/PostList.tsx index 232d13af67..2f790057da 100644 --- a/src/components/PostList/PostList.tsx +++ b/src/components/PostList/PostList.tsx @@ -1,54 +1,14 @@ import React from 'react'; import { Post } from '../../types/Post'; +import { PostInfo } from '../PostInfo'; -export const PostList: React.FC<{ postsList: Post[] }> = ({ postsList }) => { +export const PostList: React.FC<{ postListPosts: Post[] }> = ({ + postListPosts, +}) => { return (
- {postsList.map(post => ( -
-
-

{post.title}

- -

- {' Posted by '} - - - {post.user?.name} - -

-
- -

{post.body}

- -
- - {post.comments ? ( -
- {post.comments.map(comment => ( -
-
- - {comment.name} - - - {' by '} - - - {comment.email} - -
- -
{comment.body}
-
- ))} -
- ) : ( - No comments yet - )} -
+ {postListPosts.map(post => ( + ))}
); From c32f3f78335c089faa858060081fd23e14c74b30 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Wojciech=20Przy=C5=82uski?= Date: Fri, 13 Sep 2024 11:51:26 +0200 Subject: [PATCH 04/11] refactor: extract component PostInfo styles into separate file --- src/App.scss | 17 ----------------- src/components/PostInfo/PostInfo.scss | 17 ++++++++++++++++- src/components/PostInfo/PostInfo.tsx | 1 + 3 files changed, 17 insertions(+), 18 deletions(-) diff --git a/src/App.scss b/src/App.scss index 98bb3956c3..ef0859f088 100644 --- a/src/App.scss +++ b/src/App.scss @@ -6,23 +6,6 @@ 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; } 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 107e105fa3..02371d58e1 100644 --- a/src/components/PostInfo/PostInfo.tsx +++ b/src/components/PostInfo/PostInfo.tsx @@ -1,5 +1,6 @@ import React from 'react'; import { Post } from '../../types/Post'; +import './PostInfo.scss'; export const PostInfo: React.FC<{ post: Post }> = ({ post }) => { return ( From 1eb6f6de0537f72e322fe4a777ec87bf6dcf1fac Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Wojciech=20Przy=C5=82uski?= Date: Fri, 13 Sep 2024 13:07:01 +0200 Subject: [PATCH 05/11] refactor: extract CommentList from PostInfo --- src/components/CommentList/CommentList.tsx | 25 +++++++++++++++- src/components/PostInfo/PostInfo.tsx | 34 ++++++---------------- src/components/PostList/PostList.tsx | 2 +- 3 files changed, 34 insertions(+), 27 deletions(-) diff --git a/src/components/CommentList/CommentList.tsx b/src/components/CommentList/CommentList.tsx index 8cc7d72e14..c00418833e 100644 --- a/src/components/CommentList/CommentList.tsx +++ b/src/components/CommentList/CommentList.tsx @@ -1,3 +1,26 @@ import React from 'react'; +import { Comment } from '../../types/Comment'; -export const CommentList: React.FC = () => <>Put the list here; +export const CommentList: React.FC<{ commentListComments: Comment[] }> = ({ + commentListComments, +}) => { + return ( +
+ {commentListComments.map(comment => ( +
+
+ {comment.name} + + {' by '} + + + {comment.email} + +
+ +
{comment.body}
+
+ ))} +
+ ); +}; diff --git a/src/components/PostInfo/PostInfo.tsx b/src/components/PostInfo/PostInfo.tsx index 02371d58e1..2b17a76290 100644 --- a/src/components/PostInfo/PostInfo.tsx +++ b/src/components/PostInfo/PostInfo.tsx @@ -1,47 +1,31 @@ import React from 'react'; import { Post } from '../../types/Post'; import './PostInfo.scss'; +import { CommentList } from '../CommentList'; -export const PostInfo: React.FC<{ post: Post }> = ({ post }) => { +export const PostInfo: React.FC<{ postInfoPost: Post }> = ({ + postInfoPost: { title, user, body, comments }, +}) => { return (
-

{post.title}

+

{title}

{' Posted by '} - {post.user?.name} + {user?.name}

-

{post.body}

+

{body}

- {post.comments ? ( -
- {post.comments.map(comment => ( -
-
- {comment.name} - - {' by '} - - - {comment.email} - -
- -
{comment.body}
-
- ))} -
+ {comments ? ( + ) : ( No comments yet )} diff --git a/src/components/PostList/PostList.tsx b/src/components/PostList/PostList.tsx index 2f790057da..027fb90b40 100644 --- a/src/components/PostList/PostList.tsx +++ b/src/components/PostList/PostList.tsx @@ -8,7 +8,7 @@ export const PostList: React.FC<{ postListPosts: Post[] }> = ({ return (
{postListPosts.map(post => ( - + ))}
); From 5fe11874e8135b1f4ac1a6141512082191d0564a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Wojciech=20Przy=C5=82uski?= Date: Fri, 13 Sep 2024 13:09:05 +0200 Subject: [PATCH 06/11] refactor: change CommentList styles directory --- src/App.scss | 7 ------- src/components/CommentList/CommentList.scss | 8 +++++++- src/components/CommentList/CommentList.tsx | 1 + 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/App.scss b/src/App.scss index ef0859f088..d08575197e 100644 --- a/src/App.scss +++ b/src/App.scss @@ -10,10 +10,3 @@ iframe { font-weight: bold; } -.CommentList { - display: flex; - flex-direction: column; - gap: 0.7em; - background-color: #eee; - padding: 1em; -} 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 c00418833e..b0383feea8 100644 --- a/src/components/CommentList/CommentList.tsx +++ b/src/components/CommentList/CommentList.tsx @@ -1,5 +1,6 @@ import React from 'react'; import { Comment } from '../../types/Comment'; +import './CommentList.scss'; export const CommentList: React.FC<{ commentListComments: Comment[] }> = ({ commentListComments, From 10acd9ded56b8e2fee49605e9721bf84702f148d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Wojciech=20Przy=C5=82uski?= Date: Fri, 13 Sep 2024 13:18:48 +0200 Subject: [PATCH 07/11] refactor: Comment List to destructure coment properties in map --- src/App.scss | 1 - src/components/CommentList/CommentList.tsx | 12 ++++++------ 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/src/App.scss b/src/App.scss index d08575197e..f18a85a030 100644 --- a/src/App.scss +++ b/src/App.scss @@ -9,4 +9,3 @@ iframe { .UserInfo { font-weight: bold; } - diff --git a/src/components/CommentList/CommentList.tsx b/src/components/CommentList/CommentList.tsx index b0383feea8..28dc4bbed3 100644 --- a/src/components/CommentList/CommentList.tsx +++ b/src/components/CommentList/CommentList.tsx @@ -7,19 +7,19 @@ export const CommentList: React.FC<{ commentListComments: Comment[] }> = ({ }) => { return (
- {commentListComments.map(comment => ( -
+ {commentListComments.map(({ id, name, email, body }) => ( +
- {comment.name} + {name} {' by '} - - {comment.email} + + {email}
-
{comment.body}
+
{body}
))}
From 51010b084d51e64586300354559781da29b7ac86 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Wojciech=20Przy=C5=82uski?= Date: Fri, 13 Sep 2024 13:27:37 +0200 Subject: [PATCH 08/11] refactor: create CommentInfo component --- src/components/CommentInfo/CommentInfo.tsx | 21 ++++++++++++++++++++- src/components/CommentList/CommentList.tsx | 17 +++-------------- 2 files changed, 23 insertions(+), 15 deletions(-) diff --git a/src/components/CommentInfo/CommentInfo.tsx b/src/components/CommentInfo/CommentInfo.tsx index 4471a7b9a3..f1e062daa6 100644 --- a/src/components/CommentInfo/CommentInfo.tsx +++ b/src/components/CommentInfo/CommentInfo.tsx @@ -1,3 +1,22 @@ import React from 'react'; +import { Comment } from '../../types/Comment'; -export const CommentInfo: React.FC = () => <>Put the comment here; +export const CommentInfo: React.FC<{ commentInfoComment: Comment }> = ({ + commentInfoComment: { name, email, body }, +}) => { + return ( +
+
+ {name} + + {' by '} + + + {email} + +
+ +
{body}
+
+ ); +}; diff --git a/src/components/CommentList/CommentList.tsx b/src/components/CommentList/CommentList.tsx index 28dc4bbed3..3099f27427 100644 --- a/src/components/CommentList/CommentList.tsx +++ b/src/components/CommentList/CommentList.tsx @@ -1,26 +1,15 @@ import React from 'react'; import { Comment } from '../../types/Comment'; import './CommentList.scss'; +import { CommentInfo } from '../CommentInfo'; export const CommentList: React.FC<{ commentListComments: Comment[] }> = ({ commentListComments, }) => { return (
- {commentListComments.map(({ id, name, email, body }) => ( -
-
- {name} - - {' by '} - - - {email} - -
- -
{body}
-
+ {commentListComments.map(comment => ( + ))}
); From 430aca200c6ba9dba5dbcf8a5afb3ec8646bc0a5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Wojciech=20Przy=C5=82uski?= Date: Fri, 13 Sep 2024 13:36:31 +0200 Subject: [PATCH 09/11] refactor: extract UserInfo component from PostInfo --- src/components/CommentInfo/CommentInfo.tsx | 1 + src/components/PostInfo/PostInfo.tsx | 5 ++--- src/components/UserInfo/UserInfo.tsx | 11 ++++++++++- 3 files changed, 13 insertions(+), 4 deletions(-) diff --git a/src/components/CommentInfo/CommentInfo.tsx b/src/components/CommentInfo/CommentInfo.tsx index f1e062daa6..5abc6141cc 100644 --- a/src/components/CommentInfo/CommentInfo.tsx +++ b/src/components/CommentInfo/CommentInfo.tsx @@ -1,5 +1,6 @@ import React from 'react'; import { Comment } from '../../types/Comment'; +import './CommentInfo.scss'; export const CommentInfo: React.FC<{ commentInfoComment: Comment }> = ({ commentInfoComment: { name, email, body }, diff --git a/src/components/PostInfo/PostInfo.tsx b/src/components/PostInfo/PostInfo.tsx index 2b17a76290..763475a091 100644 --- a/src/components/PostInfo/PostInfo.tsx +++ b/src/components/PostInfo/PostInfo.tsx @@ -2,6 +2,7 @@ import React from 'react'; import { Post } from '../../types/Post'; import './PostInfo.scss'; import { CommentList } from '../CommentList'; +import { UserInfo } from '../UserInfo'; export const PostInfo: React.FC<{ postInfoPost: Post }> = ({ postInfoPost: { title, user, body, comments }, @@ -14,9 +15,7 @@ export const PostInfo: React.FC<{ postInfoPost: Post }> = ({

{' Posted by '} - - {user?.name} - + {user?.name && }

diff --git a/src/components/UserInfo/UserInfo.tsx b/src/components/UserInfo/UserInfo.tsx index 0435cbfa67..01669d0c54 100644 --- a/src/components/UserInfo/UserInfo.tsx +++ b/src/components/UserInfo/UserInfo.tsx @@ -1,3 +1,12 @@ import React from 'react'; +import { User } from '../../types/User'; -export const UserInfo: React.FC = () => <>Put the user here; +export const UserInfo: React.FC<{ userInfoUser: User }> = ({ + userInfoUser, +}) => { + return ( + + {userInfoUser?.name} + + ); +}; From dcea34daa2fd63ab901e0de28508872f922e2918 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Wojciech=20Przy=C5=82uski?= Date: Fri, 13 Sep 2024 13:37:49 +0200 Subject: [PATCH 10/11] refactor: extract UserInfo styles in to separate file --- src/App.scss | 4 ---- src/components/UserInfo/UserInfo.scss | 4 +++- src/components/UserInfo/UserInfo.tsx | 1 + 3 files changed, 4 insertions(+), 5 deletions(-) diff --git a/src/App.scss b/src/App.scss index f18a85a030..6436509521 100644 --- a/src/App.scss +++ b/src/App.scss @@ -5,7 +5,3 @@ iframe { .App__title { text-align: center; } - -.UserInfo { - font-weight: bold; -} 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 01669d0c54..c7aae3fa40 100644 --- a/src/components/UserInfo/UserInfo.tsx +++ b/src/components/UserInfo/UserInfo.tsx @@ -1,5 +1,6 @@ import React from 'react'; import { User } from '../../types/User'; +import './UserInfo.scss'; export const UserInfo: React.FC<{ userInfoUser: User }> = ({ userInfoUser, From f2a8074367d72cfcf6730cc5b67cf7ea721fb0b3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Wojciech=20Przy=C5=82uski?= Date: Fri, 13 Sep 2024 14:14:50 +0200 Subject: [PATCH 11/11] refactor: adapting prop names for testing --- src/App.tsx | 4 ++-- src/components/CommentInfo/CommentInfo.tsx | 4 ++-- src/components/CommentList/CommentList.tsx | 8 ++++---- src/components/PostInfo/PostInfo.tsx | 10 +++++----- src/components/PostList/PostList.tsx | 2 +- src/components/UserInfo/UserInfo.tsx | 8 +++----- src/types/Post.ts | 2 +- 7 files changed, 18 insertions(+), 20 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index cc7a841c4f..7390f9038d 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -16,12 +16,12 @@ function getUser(userId: number): User | null { return foundUser || null; } -function getComments(postId: number): Comment[] | null { +function getComments(postId: number): Comment[] { const foundComments = commentsFromServer.filter( comment => comment.postId === postId, ); - return foundComments || null; + return foundComments; } const posts: Post[] = postsFromServer.map(post => ({ diff --git a/src/components/CommentInfo/CommentInfo.tsx b/src/components/CommentInfo/CommentInfo.tsx index 5abc6141cc..9b3634ebc7 100644 --- a/src/components/CommentInfo/CommentInfo.tsx +++ b/src/components/CommentInfo/CommentInfo.tsx @@ -2,8 +2,8 @@ import React from 'react'; import { Comment } from '../../types/Comment'; import './CommentInfo.scss'; -export const CommentInfo: React.FC<{ commentInfoComment: Comment }> = ({ - commentInfoComment: { name, email, body }, +export const CommentInfo: React.FC<{ comment: Comment }> = ({ + comment: { name, email, body }, }) => { return (
diff --git a/src/components/CommentList/CommentList.tsx b/src/components/CommentList/CommentList.tsx index 3099f27427..edc4341fd7 100644 --- a/src/components/CommentList/CommentList.tsx +++ b/src/components/CommentList/CommentList.tsx @@ -3,13 +3,13 @@ import { Comment } from '../../types/Comment'; import './CommentList.scss'; import { CommentInfo } from '../CommentInfo'; -export const CommentList: React.FC<{ commentListComments: Comment[] }> = ({ - commentListComments, +export const CommentList: React.FC<{ comments: Comment[] }> = ({ + comments, }) => { return (
- {commentListComments.map(comment => ( - + {comments.map(comment => ( + ))}
); diff --git a/src/components/PostInfo/PostInfo.tsx b/src/components/PostInfo/PostInfo.tsx index 763475a091..e269b62250 100644 --- a/src/components/PostInfo/PostInfo.tsx +++ b/src/components/PostInfo/PostInfo.tsx @@ -4,8 +4,8 @@ import './PostInfo.scss'; import { CommentList } from '../CommentList'; import { UserInfo } from '../UserInfo'; -export const PostInfo: React.FC<{ postInfoPost: Post }> = ({ - postInfoPost: { title, user, body, comments }, +export const PostInfo: React.FC<{ post: Post }> = ({ + post: { title, user, body, comments }, }) => { return (
@@ -15,7 +15,7 @@ export const PostInfo: React.FC<{ postInfoPost: Post }> = ({

{' Posted by '} - {user?.name && } + {user?.name && }

@@ -23,8 +23,8 @@ export const PostInfo: React.FC<{ postInfoPost: Post }> = ({
- {comments ? ( - + {comments && comments.length > 0 ? ( + ) : ( No comments yet )} diff --git a/src/components/PostList/PostList.tsx b/src/components/PostList/PostList.tsx index 027fb90b40..2f790057da 100644 --- a/src/components/PostList/PostList.tsx +++ b/src/components/PostList/PostList.tsx @@ -8,7 +8,7 @@ export const PostList: React.FC<{ postListPosts: Post[] }> = ({ return (
{postListPosts.map(post => ( - + ))}
); diff --git a/src/components/UserInfo/UserInfo.tsx b/src/components/UserInfo/UserInfo.tsx index c7aae3fa40..71805c9de9 100644 --- a/src/components/UserInfo/UserInfo.tsx +++ b/src/components/UserInfo/UserInfo.tsx @@ -2,12 +2,10 @@ import React from 'react'; import { User } from '../../types/User'; import './UserInfo.scss'; -export const UserInfo: React.FC<{ userInfoUser: User }> = ({ - userInfoUser, -}) => { +export const UserInfo: React.FC<{ user: User }> = ({ user }) => { return ( - - {userInfoUser?.name} + + {user?.name} ); }; diff --git a/src/types/Post.ts b/src/types/Post.ts index 48204f58a2..433cb01b0e 100644 --- a/src/types/Post.ts +++ b/src/types/Post.ts @@ -7,5 +7,5 @@ export type Post = { title: string; body: string; user: User | null; - comments: Comment[] | null; + comments: Comment[]; };