diff --git a/README.md b/README.md index fde130de80..8d997bd4a3 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://TommasoGiacopini.github.io/react_static-list-of-posts/) and add it to the PR description. diff --git a/package.json b/package.json index 16f537c036..7ac06e1318 100755 --- a/package.json +++ b/package.json @@ -18,7 +18,7 @@ "@mate-academy/cypress-tools": "^1.0.4", "@mate-academy/eslint-config-react": "*", "@mate-academy/eslint-config-react-typescript": "*", - "@mate-academy/scripts": "^1.2.8", + "@mate-academy/scripts": "^1.2.12", "@mate-academy/students-ts-config": "*", "@mate-academy/stylelint-config": "*", "@types/node": "^17.0.23", diff --git a/src/App.tsx b/src/App.tsx index a068b02fb5..c24eb90b9d 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,109 +1,34 @@ -import React from 'react'; - +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 { Comment } from './types/Comment'; +import { PostList } from './components/PostList'; 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 -
+function getUserById(userId: number): User | null { + const foundUser = usersFromServer.find(user => user.id === userId); -
-
-

- doloremque illum aliquid sunt -

+ return foundUser || null; +} -

- {' Posted by '} +function getCommentsById(postId: number): Comment[] { + const foundComments = commentsFromServer + .filter(comment => comment.postId === postId); - - Patricia Lebsack - -

-
+ return foundComments; +} -

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

+export const posts: Post[] = postsFromServer.map(post => ({ + ...post, + user: getUserById(post.userId), + comments: getCommentsById(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 - -
- -
- 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 -
-
-
-
-
+export const App: React.FC = () => ( +
+

Static list of posts

+
); diff --git a/src/components/CommentInfo/CommentInfo.tsx b/src/components/CommentInfo/CommentInfo.tsx index 4343b8410c..dd4cc3da44 100644 --- a/src/components/CommentInfo/CommentInfo.tsx +++ b/src/components/CommentInfo/CommentInfo.tsx @@ -1,5 +1,34 @@ -import React from 'react'; +import { Comment } from '../../types/Comment'; -export const CommentInfo: React.FC = () => ( - <>Put the comment here -); +type Props = { + comment: Comment; +}; + +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 ead6a64da7..1e4cee4bb5 100644 --- a/src/components/CommentList/CommentList.tsx +++ b/src/components/CommentList/CommentList.tsx @@ -1,5 +1,16 @@ 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 }) => ( +
+ {comments.map(comment => ( + + ))} +
); diff --git a/src/components/PostInfo/PostInfo.tsx b/src/components/PostInfo/PostInfo.tsx index 421b94cb7b..7ab69ad32d 100644 --- a/src/components/PostInfo/PostInfo.tsx +++ b/src/components/PostInfo/PostInfo.tsx @@ -1,5 +1,41 @@ import React from 'react'; -export const PostInfo: React.FC = () => ( - <>Put the post here -); +import { Post } from '../../types/Post'; +import { CommentList } from '../CommentList'; +import { UserInfo } from '../UserInfo'; +import './PostInfo.scss'; + +type Props = { + post: Post; +}; + +export const PostInfo: React.FC = ({ post }) => { + const { + title, + body, + user, + comments, + } = post; + + return ( +
+
+

{title}

+ + {user && ( + + )} +
+ +

+ {body} +

+ +
+ + {comments.length + ? + : No comments yet} +
+ ); +}; diff --git a/src/components/PostList/PostList.tsx b/src/components/PostList/PostList.tsx index b5318a2735..b291745b0e 100644 --- a/src/components/PostList/PostList.tsx +++ b/src/components/PostList/PostList.tsx @@ -1,5 +1,16 @@ import React from 'react'; -export const PostList: React.FC = () => ( - <>Put the list here +import { Post } from '../../types/Post'; +import { PostInfo } from '../PostInfo'; + +type Props = { + posts: Post[]; +}; + +export const PostList: React.FC = ({ posts }) => ( +
+ {posts.map(post => ( + + ))} +
); diff --git a/src/components/UserInfo/UserInfo.tsx b/src/components/UserInfo/UserInfo.tsx index 89faeae3c9..d0d2eec746 100644 --- a/src/components/UserInfo/UserInfo.tsx +++ b/src/components/UserInfo/UserInfo.tsx @@ -1,5 +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 }) => ( +

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

); diff --git a/src/types/Comment.ts b/src/types/Comment.ts new file mode 100644 index 0000000000..bc86cbf333 --- /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/Post.ts b/src/types/Post.ts new file mode 100644 index 0000000000..09172f16fa --- /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..4d8e55bc27 --- /dev/null +++ b/src/types/User.ts @@ -0,0 +1,6 @@ +export interface User { + id: number, + name: string, + username: string, + email: string, +}