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..27df67071c 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -2,105 +2,44 @@ 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 { Post } from './types/Post'; +import { IDGenericFunc } from './types/IDGenericFunc'; +import { PostList } from './components/PostList'; + +function getById(array: T[], id: number) { + return array.find(element => element.id === id) || null; +} + +function getPostList() { + const posts = postsFromServer.map(post => ({ + ...post, + user: getById(usersFromServer, post.userId), + comments: [], + })); + + commentsFromServer.forEach(comment => { + const post = getById(posts, comment.postId); + const resultComment = { + ...comment, + post, + }; + + post?.comments.push(resultComment); + }); + + return posts; +} + +const postList: Post[] = getPostList(); 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..68fb969851 100644 --- a/src/components/CommentInfo/CommentInfo.tsx +++ b/src/components/CommentInfo/CommentInfo.tsx @@ -1,3 +1,25 @@ -import React from 'react'; +type Props = { + comment: { + name: string; + email: string; + body: string; + }; +}; -export const CommentInfo: React.FC = () => <>Put the comment here; +export const CommentInfo = ({ comment: { name, email, body } }: Props) => { + 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..28a0131a8c 100644 --- a/src/components/CommentList/CommentList.tsx +++ b/src/components/CommentList/CommentList.tsx @@ -1,3 +1,18 @@ import React from 'react'; +import { Comment } from '../../types/Comment'; +import { CommentInfo } from '../CommentInfo'; +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..21e12e1496 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 { UserInfo } from '../UserInfo'; +import { CommentList } from '../CommentList'; +import './PostInfo.scss'; -export const PostInfo: React.FC = () => <>Put the post here; +type Props = { + post: Post; +}; + +export const PostInfo = ({ post: { title, body, user, comments } }: Props) => { + const commentsElement = comments.length ? ( + + ) : ( + No comments yet + ); + + return ( +
+
+

{title}

+ +

+ {' Posted by '} + + {user && } +

+
+ +

{body}

+ +
+ + {commentsElement} +
+ ); +}; diff --git a/src/components/PostList/PostList.tsx b/src/components/PostList/PostList.tsx index d7bc7aa5fa..90d8011900 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 = { + posts: Post[]; +}; + +export const PostList: React.FC = ({ posts }) => { + return ( +
+ {posts.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..c3f52f48a2 100644 --- a/src/components/UserInfo/UserInfo.tsx +++ b/src/components/UserInfo/UserInfo.tsx @@ -1,3 +1,15 @@ 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: { email, name } }) => { + return ( + + {name} + + ); +}; diff --git a/src/types/Comment.ts b/src/types/Comment.ts new file mode 100644 index 0000000000..14df6303f3 --- /dev/null +++ b/src/types/Comment.ts @@ -0,0 +1,7 @@ +export interface Comment { + postId: number; + id: number; + name: string; + email: string; + body: string; +} diff --git a/src/types/IDGenericFunc.ts b/src/types/IDGenericFunc.ts new file mode 100644 index 0000000000..37699b7448 --- /dev/null +++ b/src/types/IDGenericFunc.ts @@ -0,0 +1,3 @@ +export interface IDGenericFunc { + id: number; +} diff --git a/src/types/Post.ts b/src/types/Post.ts new file mode 100644 index 0000000000..d34e530c88 --- /dev/null +++ b/src/types/Post.ts @@ -0,0 +1,11 @@ +import { User } from './User'; +import { Comment } from './Comment'; + +export interface Post { + userId: number; + id: number; + title: string; + body: string; + user: User | null; + comments: Comment[]; +} diff --git a/src/types/User.ts b/src/types/User.ts new file mode 100644 index 0000000000..1f6908b55a --- /dev/null +++ b/src/types/User.ts @@ -0,0 +1,6 @@ +export interface User { + id: number; + name: string; + username: string; + email: string; +}