From acc74d7c6911c0840f919bbc65b78bab1f306286 Mon Sep 17 00:00:00 2001 From: Mateusz Cieplak Date: Wed, 5 Mar 2025 16:57:05 +0100 Subject: [PATCH] Task solution --- README.md | 2 +- src/App.scss | 21 ---- src/App.tsx | 112 ++++---------------- src/components/CommentInfo/CommentInfo.tsx | 19 +++- src/components/CommentList/CommentList.scss | 7 ++ src/components/CommentList/CommentList.tsx | 25 ++++- src/components/PostInfo/PostInfo.scss | 16 +++ src/components/PostInfo/PostInfo.tsx | 23 +++- src/components/PostList/PostList.tsx | 12 ++- src/components/Types/Comments.ts | 7 ++ src/components/Types/Posts.ts | 11 ++ src/components/Types/Users.ts | 5 + src/components/UserInfo/UserInfo.scss | 3 + src/components/UserInfo/UserInfo.tsx | 10 +- 14 files changed, 153 insertions(+), 120 deletions(-) create mode 100644 src/components/Types/Comments.ts create mode 100644 src/components/Types/Posts.ts create mode 100644 src/components/Types/Users.ts diff --git a/README.md b/README.md index b1a2b34341..7dd515177c 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://MateuszCieplak.github.io/react_static-list-of-posts/) and add it to the PR description. diff --git a/src/App.scss b/src/App.scss index 98bb3956c3..7f11224263 100644 --- a/src/App.scss +++ b/src/App.scss @@ -6,27 +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; -} - .CommentList { display: flex; flex-direction: column; diff --git a/src/App.tsx b/src/App.tsx index 6ccd7807c2..f1cd582fbb 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -2,105 +2,31 @@ 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 { Post } from './components/Types/Posts'; +import { User } from './components/Types/Users'; +import { PostList } from './components/PostList'; + +function getUser(userId: number): User { + const foundUser = usersFromServer.find(user => user.id === userId); + + return foundUser || null; +} + +export const posts: Post[] = postsFromServer.map(post => ({ + ...post, + user: getUser(post.userId), + comments: commentsFromServer.filter(comment => comment.postId === 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/CommentInfo/CommentInfo.tsx b/src/components/CommentInfo/CommentInfo.tsx index 4471a7b9a3..349be7f907 100644 --- a/src/components/CommentInfo/CommentInfo.tsx +++ b/src/components/CommentInfo/CommentInfo.tsx @@ -1,3 +1,20 @@ import React from 'react'; +import { Comment } from '../Types/Comments'; -export const CommentInfo: React.FC = () => <>Put the comment here; +export const CommentInfo: React.FC<{ comment: Comment }> = ({ comment }) => { + return ( +
+
+ {comment.name} + + {' by '} + + + {comment.email} + +
+ +
{comment.body}
+
+ ); +}; diff --git a/src/components/CommentList/CommentList.scss b/src/components/CommentList/CommentList.scss index f1b40ee00e..934ec5e54a 100644 --- a/src/components/CommentList/CommentList.scss +++ b/src/components/CommentList/CommentList.scss @@ -1 +1,8 @@ // 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..e7072f4905 100644 --- a/src/components/CommentList/CommentList.tsx +++ b/src/components/CommentList/CommentList.tsx @@ -1,3 +1,26 @@ +/* eslint-disable max-len */ import React from 'react'; +import '../CommentList/CommentList.scss'; -export const CommentList: React.FC = () => <>Put the list here; +import { Comment } from '../Types/Comments'; +import { CommentInfo } from '../CommentInfo'; + +export const CommentList: React.FC<{ comments: Comment[] }> = ({ + comments, +}) => { + return ( +
+ {comments.length > 0 ? ( + comments.map(comment => ( + + )) + ) : ( + <> +
+ + No comments yet + + )} +
+ ); +}; diff --git a/src/components/PostInfo/PostInfo.scss b/src/components/PostInfo/PostInfo.scss index f1b40ee00e..54d73198e5 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; + } +} diff --git a/src/components/PostInfo/PostInfo.tsx b/src/components/PostInfo/PostInfo.tsx index 90220ae5e1..8489353f30 100644 --- a/src/components/PostInfo/PostInfo.tsx +++ b/src/components/PostInfo/PostInfo.tsx @@ -1,3 +1,24 @@ import React from 'react'; +import '../PostInfo/PostInfo.scss'; -export const PostInfo: React.FC = () => <>Put the post here; +import { Post } from '../Types/Posts'; +import { CommentList } from '../CommentList'; +import { UserInfo } from '../UserInfo'; + +export const PostInfo: React.FC<{ post: Post }> = ({ post }) => { + return ( + <> +
+
+

{post.title}

+

+ {' Posted by '} + +

+
+

{post.body}

+ +
+ + ); +}; diff --git a/src/components/PostList/PostList.tsx b/src/components/PostList/PostList.tsx index d7bc7aa5fa..688126a00e 100644 --- a/src/components/PostList/PostList.tsx +++ b/src/components/PostList/PostList.tsx @@ -1,3 +1,13 @@ import React from 'react'; +import { Post } from '../Types/Posts'; +import { PostInfo } from '../PostInfo'; -export const PostList: React.FC = () => <>Put the list here; +export const PostList: React.FC<{ posts: Post[] }> = ({ posts }) => { + return ( + <> + {posts.map(post => ( + + ))} + + ); +}; diff --git a/src/components/Types/Comments.ts b/src/components/Types/Comments.ts new file mode 100644 index 0000000000..14df6303f3 --- /dev/null +++ b/src/components/Types/Comments.ts @@ -0,0 +1,7 @@ +export interface Comment { + postId: number; + id: number; + name: string; + email: string; + body: string; +} diff --git a/src/components/Types/Posts.ts b/src/components/Types/Posts.ts new file mode 100644 index 0000000000..fe803dd852 --- /dev/null +++ b/src/components/Types/Posts.ts @@ -0,0 +1,11 @@ +import { User } from './Users'; +import { Comment } from './Comments'; + +export interface Post { + userId: number; + id: number; + title: string; + body: string; + user: User; + comments: Comment[]; +} diff --git a/src/components/Types/Users.ts b/src/components/Types/Users.ts new file mode 100644 index 0000000000..6eafe74c1a --- /dev/null +++ b/src/components/Types/Users.ts @@ -0,0 +1,5 @@ +export interface User { + id: number; + name: string; + email: string; +} diff --git a/src/components/UserInfo/UserInfo.scss b/src/components/UserInfo/UserInfo.scss index f1b40ee00e..2483588df9 100644 --- a/src/components/UserInfo/UserInfo.scss +++ b/src/components/UserInfo/UserInfo.scss @@ -1 +1,4 @@ // add styles here +.UserInfo { + font-weight: bold; +} diff --git a/src/components/UserInfo/UserInfo.tsx b/src/components/UserInfo/UserInfo.tsx index 0435cbfa67..a6f0f4d9e2 100644 --- a/src/components/UserInfo/UserInfo.tsx +++ b/src/components/UserInfo/UserInfo.tsx @@ -1,3 +1,11 @@ import React from 'react'; +import '../UserInfo/UserInfo.scss'; +import { User } from '../Types/Users'; -export const UserInfo: React.FC = () => <>Put the user here; +export const UserInfo: React.FC<{ user: User }> = ({ user }) => { + return ( + + {user.name} + + ); +};