Develop #919
Develop #919
Conversation
… logic in PostDetails
| import React, { useState } from 'react'; | ||
| import { Comment } from '../../types/Comment'; | ||
|
|
||
| type CC = { |
There was a problem hiding this comment.
What does it mean - CC?
Do not abbreviate variable names to unreadable ones
| {modalUser ? ( | ||
| <> | ||
| {isLoad ? <Loader /> : ( | ||
| <> | ||
| {isError ? ( | ||
| <div | ||
| className="notification is-danger" | ||
| data-cy="PostsLoadingError" | ||
| > | ||
| Something went wrong! | ||
| </div> | ||
| ) : ( | ||
| <> | ||
| {posts.length ? ( | ||
| <PostsList posts={posts} /> | ||
| ) : ( | ||
| <div | ||
| className="notification is-warning" | ||
| data-cy="NoPostsYet" | ||
| > | ||
| No posts yet | ||
| </div> | ||
| )} | ||
| </> | ||
| )} | ||
| </> | ||
| )} | ||
| </> | ||
| ) : ( | ||
| <p data-cy="NoSelectedUser"> | ||
| No user selected | ||
| </p> | ||
| )} |
There was a problem hiding this comment.
Everything works fine now, but such a large nestedness is hard to read and maintain in the future.
Try to break it down into smaller components
| import React, { useState } from 'react'; | ||
| import { Post } from '../../types/Post'; | ||
|
|
||
| type MPC = { |
There was a problem hiding this comment.
Do not abbreviate variable names to unreadable ones
| import React, { useState } from 'react'; | ||
| import { User } from '../../types/User'; | ||
|
|
||
| type MUC = { |
There was a problem hiding this comment.
Do not abbreviate variable names to unreadable ones
src/components/NewCommentForm.tsx
Outdated
| const { comments, setComments } = useContext(CommentsContext); | ||
| const { modalPost } = useContext(ModalPostContext); | ||
|
|
||
| const errorCondition = (key: keyof CommentData) => { |
There was a problem hiding this comment.
| const errorCondition = (key: keyof CommentData) => { | |
| const checkForErrors = (key: keyof CommentData) => { |
src/components/NewCommentForm.tsx
Outdated
| } | ||
| }; | ||
|
|
||
| const handleReset = (event: React.FormEvent<HTMLFormElement>) => { |
src/components/NewCommentForm.tsx
Outdated
| setFormFields(DEFAULT_FIELDS); | ||
| }; | ||
|
|
||
| const handleFieldChange = ( |
There was a problem hiding this comment.
| const handleFieldChange = ( | |
| const handleFormFieldChange = ( |
| const handleFieldChange = ( | |
| const handleInputChange = ( |
| const showLoad = isLoad && !isError && !posts.length; | ||
| const showError = !isLoad && isError && !posts.length; | ||
| const showPostList = !isLoad && !isError && !!posts.length; | ||
| const showNoPostsYet = !isLoad && !isError && !posts.length; |
There was a problem hiding this comment.
Functions are usually named from the verb, and you have variables.
In addition, you do similar checks in another place, so it can be transferred to a separate helper, where data can be passed as an argument, compared in the middle of the helper and return a Boolean result, and reused in two places.
| const handleDeleteComment = () => { | ||
| setComments(comments.filter(({ id: comId }) => comId !== id)); | ||
|
|
||
| deleteCommentById(id); |
There was a problem hiding this comment.
In case of error, the user doesn't know anything about it and think that they successfully deleted the comment 🤷♂️
| setIsError(false); | ||
| setIsLoad(true); | ||
| if (modalUser) { | ||
| (async () => { | ||
| try { | ||
| const serverPosts = await getPostsByUserId(modalUser.id); | ||
|
|
||
| setPosts(serverPosts); | ||
| } catch { | ||
| setIsError(true); | ||
| } finally { | ||
| setIsLoad(false); | ||
| } | ||
| })(); | ||
| } |
There was a problem hiding this comment.
| setIsError(false); | |
| setIsLoad(true); | |
| if (modalUser) { | |
| (async () => { | |
| try { | |
| const serverPosts = await getPostsByUserId(modalUser.id); | |
| setPosts(serverPosts); | |
| } catch { | |
| setIsError(true); | |
| } finally { | |
| setIsLoad(false); | |
| } | |
| })(); | |
| } | |
| if (modalUser) { | |
| setIsError(false); | |
| setIsLoad(true); | |
| (async () => { | |
| try { | |
| const serverPosts = await getPostsByUserId(modalUser.id); | |
| setPosts(serverPosts); | |
| } catch { | |
| setIsError(true); | |
| } finally { | |
| setIsLoad(false); | |
| } | |
| })(); | |
| } |
If no modalUser you still set is load to true
| 'is-danger': checkForErrors('name'), | ||
| })} | ||
| value={formFields.name} | ||
| onChange={event => handleFormFieldChange(event, 'name')} |
There was a problem hiding this comment.
Hint, you can get the input name from event.target
const handleFormFieldChange = (
event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
) => {
const { name, value } = event.target;
setFormFields(prevState => ({ ...prevState, [key]: value }));
};
DEMO LINK
Something wrong with tests, please proceed to review the demo link.