-
Notifications
You must be signed in to change notification settings - Fork 1.3k
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.
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
solution #1013
base: master
Are you sure you want to change the base?
solution #1013
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good job 👍
Let's improve your code
src/components/NewCommentForm.tsx
Outdated
className="input is-danger" | ||
className={cn('input', { 'is-danger': hasNameError })} | ||
value={inputName} | ||
onChange={event => handleChangeName(event)} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
onChange={event => handleChangeName(event)} | |
onChange={handleChangeName} |
src/components/PostDetails.tsx
Outdated
aria-label="delete" | ||
{!error && Boolean(comments.length) | ||
&& !isLoadingComments | ||
&& comments.map(comment => ( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Use a destruction for comment
src/components/PostsList.tsx
Outdated
{openPostId === post.id | ||
? 'Close' | ||
: 'Open'} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
{openPostId === post.id | |
? 'Close' | |
: 'Open'} | |
{openPostId === post.id ? 'Close' : 'Open'} |
src/components/UserSelector.tsx
Outdated
{!selectedUser | ||
? ( | ||
<span>Choose a user</span> | ||
) | ||
: ( | ||
<span>{selectedUser?.name}</span> | ||
)} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This check can be placed inside the span tag
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
src/App.tsx
Outdated
{(!isLoadingPosts | ||
&& posts.length > 0 | ||
&& selectedUser | ||
&& !errorPosts) | ||
&& ( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Long expression better move to variable with meaningful variable naming
src/components/PostsList.tsx
Outdated
<td data-cy="PostId">{post.id}</td> | ||
|
||
<td data-cy="PostTitle"> | ||
{post.title} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Destructure post
src/components/PostsList.tsx
Outdated
|
||
<tbody> | ||
{posts.map(post => ( | ||
<tr |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Better move it to separate component Post
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
not fixed
src/components/UserSelector.tsx
Outdated
<a | ||
key={user.id} | ||
href={`#user-${user.id}`} | ||
className="dropdown-item" | ||
onClick={() => updateUserAndPosts(user)} | ||
> | ||
{user.name} | ||
</a> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Destructure user
and move this code to common component User
const [posts, setPosts] = useState<Post[]>([]); | ||
const [comments, setComments] = useState<Comment[]>([]); | ||
const [selectedUser, setSelectedUser] = useState<User | null>(null); | ||
const [selectedPost, setSelectedPost] = useState<Post | null>(null); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm curious why do we need selectedPost
when we have openPostId
? Isn't it about the same selected/opened post?
src/components/NewCommentForm.tsx
Outdated
const [hasNameError, setHasNameError] = useState(false); | ||
const [hasMailError, setHasMailError] = useState(false); | ||
const [hasTextareaError, setHasTextareaError] = useState(false); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
no need to store these in the state. These values are derived from above ones
const [hasNameError, setHasNameError] = useState(false); | ||
const [hasMailError, setHasMailError] = useState(false); | ||
const [hasTextareaError, setHasTextareaError] = useState(false); | ||
const [isAdding, setIsAdding] = useState(false); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
the same for this one
src/components/PostDetails.tsx
Outdated
{!error | ||
&& Boolean(comments.length) | ||
&& comments | ||
&& !isLoadingComments |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
better move this to a variable
src/components/PostDetails.tsx
Outdated
{!error && Boolean(comments.length) | ||
&& !isLoadingComments |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
same here
src/components/PostsList.tsx
Outdated
|
||
<tbody> | ||
{posts.map(post => ( | ||
<tr |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
not fixed
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good work!!!
[DEMO]https://Absolution26.github.io/react_dynamic-list-of-posts/