Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

My solution #2013

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

My solution #2013

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8d5f900
My solution
Karanelus Jul 9, 2024
86434dc
Fixes after review
Karanelus Jul 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
170 changes: 61 additions & 109 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
"devDependencies": {
"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
"@mate-academy/eslint-config-react-typescript": "latest",
"@mate-academy/scripts": "^1.7.9",
"@mate-academy/scripts": "^1.8.1",
"@mate-academy/students-ts-config": "latest",
"@mate-academy/stylelint-config": "latest",
"@types/node": "^16.18.80",
Expand Down
29 changes: 0 additions & 29 deletions src/App.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
117 changes: 24 additions & 93 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,106 +1,37 @@
import React from 'react';

import './App.scss';
import { PostList } from './components/PostList';
import { Post } from './types/post';

// 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 { Comment } from './types/comments';
import { User } from './types/User';

export const App: React.FC = () => (
<section className="App">
<h1 className="App__title">Static list of posts</h1>

<div className="PostList">
<div className="PostInfo">
<div className="PostInfo__header">
<h3 className="PostInfo__title">qui est esse</h3>

<p>
{' Posted by '}

<a className="UserInfo" href="mailto:[email protected]">
Leanne Graham
</a>
</p>
</div>

<p className="PostInfo__body">
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
</p>

<hr />

<b data-cy="NoCommentsMessage">No comments yet</b>
</div>
const getPostComments = (postId: number): Comment[] => {
const foundComments = commentsFromServer.filter(com => com.postId === postId);

<div className="PostInfo">
<div className="PostInfo__header">
<h3 className="PostInfo__title">doloremque illum aliquid sunt</h3>
return foundComments;
};

<p>
{' Posted by '}
const getPostUser = (userId: number): User => {
const foundUser = usersFromServer.find(user => user.id === userId)!;

Check warning on line 20 in src/App.tsx

View workflow job for this annotation

GitHub Actions / run_linter (14.x) 

Forbidden non-null assertion

<a className="UserInfo" href="mailto:[email protected]">
Patricia Lebsack
</a>
</p>
</div>
return foundUser;
};

<p className="PostInfo__body">
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
</p>
const postsList: Post[] = postsFromServer.map(post => ({
...post,
user: getPostUser(post.userId),
comments: getPostComments(post.id) || [],
}));

<div className="CommentList">
<div className="CommentInfo">
<div className="CommentInfo__title">
<strong className="CommentInfo__name">pariatur omnis in</strong>

{' by '}

<a
className="CommentInfo__email"
href="mailto:[email protected]"
>
[email protected]
</a>
</div>

<div className="CommentInfo__body">
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
</div>
</div>

<div className="CommentInfo">
<div className="CommentInfo__title">
<strong className="CommentInfo__name">
odio adipisci rerum aut animi
</strong>

{' by '}

<a
className="CommentInfo__email"
href="mailto:[email protected]"
>
[email protected]
</a>
</div>
export const App: React.FC = () => (
<section className="App">
<h1 className="App__title">Static list of posts</h1>

<div className="CommentInfo__body">
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
</div>
</div>
</div>
</div>
</div>
<PostList postsList={postsList} />
</section>
);
Loading
Loading