From f555df9d95fa5cb757283a0f742d4937e33fad79 Mon Sep 17 00:00:00 2001 From: Maryna Karpova Date: Mon, 25 Mar 2024 17:31:30 +0100 Subject: [PATCH] try to see tests --- .lh/README.md.json | 14 +- .lh/src/components/CommentList/index.ts.json | 30 +++- .lh/src/components/PostInfo/PostInfo.tsx.json | 146 +++++++++++++++++- .lh/src/components/PostList/index.ts.json | 42 ++++- README.md | 6 +- src/App.tsx | 139 +++++------------ src/components/CommentInfo/CommentInfo.tsx | 20 ++- src/components/CommentList/CommentList.tsx | 16 +- src/components/CommentList/index.ts | 8 - src/components/PostInfo/PostInfo.tsx | 26 +++- src/components/PostInfo/index.ts | 4 + src/components/PostList/PostList.tsx | 16 +- src/components/UserInfo/UserInfo.tsx | 18 ++- 13 files changed, 362 insertions(+), 123 deletions(-) diff --git a/.lh/README.md.json b/.lh/README.md.json index 3533aefab3..4b6856bd0a 100644 --- a/.lh/README.md.json +++ b/.lh/README.md.json @@ -3,7 +3,7 @@ "activeCommit": 0, "commits": [ { - "activePatchIndex": 1, + "activePatchIndex": 4, "patches": [ { "date": 1711188626014, @@ -12,6 +12,18 @@ { "date": 1711189090540, "content": "Index: \n===================================================================\n--- \n+++ \n@@ -4,9 +4,9 @@\n \n This task is similar to [Static List of TODOs](https://github.com/mate-academy/react_static-list-of-todos#react-static-list-of-todos), but you should do everything yourself:\n \n \n-- create all required types in `./src/types/`;\n+\n - prepare `posts` by adding a `user` and `comments` to each `post` (each comment has a `postId`);\n - split the `App` into components based on given CSS blocks;\n - styles from `App.scss` should be moved to separate files, as well. E.g.: `PostList.scss`;\n - `List` components should take an array of corresponding objects and render one `Info` component per object;\n" + }, + { + "date": 1711370233731, + "content": "Index: \n===================================================================\n--- \n+++ \n@@ -3,10 +3,10 @@\n > [React + Typescript cheat sheet](https://mate-academy.github.io/fe-program/js/extra/react-typescript)\n \n This task is similar to [Static List of TODOs](https://github.com/mate-academy/react_static-list-of-todos#react-static-list-of-todos), but you should do everything yourself:\n \n-\n-\n+- don't change classes in the given markup (tests use them); -->\n+\n- - +- don't change classes in the given markup (tests use them); --> +- create all required types in `./src/types/`; - prepare `posts` by adding a `user` and `comments` to each `post` (each comment has a `postId`); - split the `App` into components based on given CSS blocks; - styles from `App.scss` should be moved to separate files, as well. E.g.: `PostList.scss`; @@ -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://marinatea.github.io/react_static-list-of-posts/) and add it to the PR description. diff --git a/src/App.tsx b/src/App.tsx index 2e6c1f8ec5..881aac2514 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -5,106 +5,39 @@ import './components/PostInfo/PostInfo.scss'; import './components/PostList/PostList.scss'; import './components/UserInfo/UserInfo.scss'; import './App.scss'; - -// import postsFromServer from './api/posts'; -// import commentsFromServer from './api/comments'; -// import usersFromServer from './api/users'; - -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 -
-
-
-
-
-
-); +import { PostList } from './components/PostList/PostList'; +import { Post } from './components/PostInfo/index'; +import { User } from './components/UserInfo/index'; +import { Comment } from './components/CommentInfo/index'; + +import postsFromServer from './api/posts'; +import commentsFromServer from './api/comments'; +import usersFromServer from './api/users'; + +const preparePosts = () => { + return postsFromServer.map(post => { + const postUser: User | undefined = usersFromServer.find( + user => user.id === post.userId, + ); + const postComments: Comment[] = commentsFromServer.filter( + comment => comment.postId === post.id, + ); + + return { + ...post, + user: postUser || { id: 0, name: '', email: '', username: '' }, + comments: postComments, + }; + }); +}; + +export const App: React.FC = () => { + const posts: Post[] = preparePosts(); + + return ( +
+

Static list of posts

+ +
+ ); +}; diff --git a/src/components/CommentInfo/CommentInfo.tsx b/src/components/CommentInfo/CommentInfo.tsx index 4471a7b9a3..2d20935963 100644 --- a/src/components/CommentInfo/CommentInfo.tsx +++ b/src/components/CommentInfo/CommentInfo.tsx @@ -1,3 +1,21 @@ import React from 'react'; +import { Comment } from './index'; -export const CommentInfo: React.FC = () => <>Put the comment here; +type CommentInfoProps = { + comment: Comment; +}; + +export const CommentInfo: React.FC = ({ comment }) => { + return ( +
+
+ {comment.name} + {' by '} + + {comment.email} + +
+
{comment.body}
+
+ ); +}; diff --git a/src/components/CommentList/CommentList.tsx b/src/components/CommentList/CommentList.tsx index 8cc7d72e14..618fe04ade 100644 --- a/src/components/CommentList/CommentList.tsx +++ b/src/components/CommentList/CommentList.tsx @@ -1,3 +1,17 @@ import React from 'react'; +import { Comment } from '../CommentInfo/index'; +import { CommentInfo } from '../CommentInfo'; -export const CommentList: React.FC = () => <>Put the list here; +type CommentListProps = { + comments: Comment[]; +}; + +export const CommentList: React.FC = ({ comments }) => { + return ( +
+ {comments.map(comment => ( + + ))} +
+ ); +}; diff --git a/src/components/CommentList/index.ts b/src/components/CommentList/index.ts index caeb2f47b5..dd026e09d6 100644 --- a/src/components/CommentList/index.ts +++ b/src/components/CommentList/index.ts @@ -1,9 +1 @@ export * from './CommentList'; - -export interface Comment { - postId: number; - id: number; - name: string; - email: string; - body: string; -} diff --git a/src/components/PostInfo/PostInfo.tsx b/src/components/PostInfo/PostInfo.tsx index 90220ae5e1..938a9aa0fd 100644 --- a/src/components/PostInfo/PostInfo.tsx +++ b/src/components/PostInfo/PostInfo.tsx @@ -1,3 +1,27 @@ import React from 'react'; +import { Post } from '../PostInfo/index'; +import { CommentList } from '../CommentList'; +import { UserInfo } from '../UserInfo'; -export const PostInfo: React.FC = () => <>Put the post here; +type PostInfoProps = { + post: Post; +}; + +export const PostInfo: React.FC = ({ post }) => { + return ( +
+
+

{post.title}

+

+ Posted by +

+
+

{post.body}

+ {post.comments.length > 0 ? ( + + ) : ( +

No comments yet.

+ )} +
+ ); +}; diff --git a/src/components/PostInfo/index.ts b/src/components/PostInfo/index.ts index fdf0290d58..256b41c7ef 100644 --- a/src/components/PostInfo/index.ts +++ b/src/components/PostInfo/index.ts @@ -1,8 +1,12 @@ export * from './PostInfo'; +import { Comment } from '../CommentInfo/index'; +import { User } from '../UserInfo/index'; export interface Post { userId: number; id: number; title: string; body: string; + user: User; + comments: Comment[]; } diff --git a/src/components/PostList/PostList.tsx b/src/components/PostList/PostList.tsx index d7bc7aa5fa..1e2dc0ecff 100644 --- a/src/components/PostList/PostList.tsx +++ b/src/components/PostList/PostList.tsx @@ -1,3 +1,17 @@ import React from 'react'; +import { Post } from '../PostInfo'; +import { PostInfo } from '../PostInfo'; -export const PostList: React.FC = () => <>Put the list here; +type PostListProps = { + posts: Post[]; +}; + +export const PostList: React.FC = ({ posts }) => { + return ( +
+ {posts.map(post => ( + + ))} +
+ ); +}; diff --git a/src/components/UserInfo/UserInfo.tsx b/src/components/UserInfo/UserInfo.tsx index 0435cbfa67..0a9c8a775e 100644 --- a/src/components/UserInfo/UserInfo.tsx +++ b/src/components/UserInfo/UserInfo.tsx @@ -1,3 +1,19 @@ import React from 'react'; +import { User } from './index'; -export const UserInfo: React.FC = () => <>Put the user here; +type UserInfoProps = { + user: User; +}; + +export const UserInfo: React.FC = ({ user }) => { + return ( +
+

ID: {user.id}

+

Name: {user.name}

+

Username: {user.username}

+

+ Email: {user.email} +

+
+ ); +};