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

add solution #1203

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

add solution #1203

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
47ddf40
add solution
an-marryKyslenko Nov 24, 2024
0c6210d
handle error
an-marryKyslenko Nov 25, 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
141 changes: 104 additions & 37 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,53 +8,120 @@ import { PostsList } from './components/PostsList';
import { PostDetails } from './components/PostDetails';
import { UserSelector } from './components/UserSelector';
import { Loader } from './components/Loader';
import { User } from './types/User';
import { useEffect, useState } from 'react';
import { Post } from './types/Post';
import { getPosts } from './api/api';

export const App = () => (
<main className="section">
<div className="container">
<div className="tile is-ancestor">
<div className="tile is-parent">
<div className="tile is-child box is-success">
<div className="block">
<UserSelector />
</div>
export const App = () => {
const [selectedUser, setSelectedUser] = useState<User | null>(null);
const [isLoading, setIsLoading] = useState(false);
const [isError, setIsError] = useState(false);
const [posts, setPosts] = useState<Post[]>([]);
const [openedPost, setOpenedPost] = useState<Post | null>(null);

<div className="block" data-cy="MainContent">
<p data-cy="NoSelectedUser">No user selected</p>
const selectUser = (user: User) => {
setOpenedPost(null);
setPosts([]);
setIsLoading(true);
setSelectedUser(user);
};

<Loader />
useEffect(() => {
if (selectedUser) {
getPosts(selectedUser.id)
.then(result => {
const results = result.map(post => ({
id: post.id,
userId: post.userId,
title: post.title,
body: post.body,
}));

<div
className="notification is-danger"
data-cy="PostsLoadingError"
>
Something went wrong!
</div>
setPosts(results);
})
.catch(() => {
setIsError(true);
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Consider resetting the isError state after a certain period or when a new user is selected. This will improve user experience by clearing the error message once the issue is resolved or a new action is taken.

// setTimeout(() => setIsError(false), 3000)
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This line is commented out. If the intention is to reset the error state after a delay, consider uncommenting it or implementing a similar mechanism to ensure the error message does not persist indefinitely.

})
.finally(() => {
setIsLoading(false);
});
}
}, [selectedUser]);

const chosePost = (post: Post | null) => {
setOpenedPost(post);
};

<div className="notification is-warning" data-cy="NoPostsYet">
No posts yet
return (
<main className="section">
<div className="container">
<div className="tile is-ancestor">
<div className="tile is-parent">
<div className="tile is-child box is-success">
<div className="block">
<UserSelector onSelectUser={selectUser} />
</div>

<PostsList />
<div className="block" data-cy="MainContent">
{!selectedUser && (
<p data-cy="NoSelectedUser">No user selected</p>
)}

{isLoading ? (
<Loader />
) : (
<>
{isError && (
<div
className="notification is-danger"
data-cy="PostsLoadingError"
>
Something went wrong!
</div>
)}

{posts.length === 0 && selectedUser && !isError && (
<div
className="notification is-warning"
data-cy="NoPostsYet"
>
No posts yet
</div>
)}

{posts.length > 0 && (
<PostsList
posts={posts}
onOpenSideBar={chosePost}
openedPost={openedPost}
/>
)}
</>
)}
</div>
</div>
</div>
</div>

<div
data-cy="Sidebar"
className={classNames(
'tile',
'is-parent',
'is-8-desktop',
'Sidebar',
'Sidebar--open',
)}
>
<div className="tile is-child box is-success ">
<PostDetails />
<div
data-cy="Sidebar"
className={classNames(
'tile',
'is-parent',
'is-8-desktop',
'Sidebar',
{
'Sidebar--open': openedPost,
},
)}
>
<div className="tile is-child box is-success ">
{openedPost && <PostDetails post={openedPost} />}
</div>
</div>
</div>
</div>
</div>
</main>
);
</main>
);
};
24 changes: 24 additions & 0 deletions src/api/api.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import { Comment, CommentData } from '../types/Comment';
import { Post } from '../types/Post';
import { User } from '../types/User';
import { client } from '../utils/fetchClient';

export const getUsers = () => {
return client.get<User[]>('/users');
};

export const getPosts = (userId: number) => {
return client.get<Post[]>(`/posts?userId=${userId}`);
};

export const getComments = (postId: number) => {
return client.get<Comment[]>(`/comments?postId=${postId}`);
};

export const deleteComment = (commentId: number) => {
return client.delete(`/comments/${commentId}`);
};
Comment on lines +18 to +20
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The deleteComment function lacks error handling. Consider adding a .catch() block to handle potential errors that may occur during the API call. This will help in providing feedback to the user if the deletion fails.


export const createComment = (data: CommentData) => {
return client.post<Comment>('/comments', data);
};
Comment on lines +22 to +24
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The createComment function also lacks error handling. Similar to deleteComment, consider adding a .catch() block to manage errors that may arise during the comment creation process.

157 changes: 129 additions & 28 deletions src/components/NewCommentForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,76 @@
import React from 'react';
import React, { FormEvent, useState } from 'react';
import { Comment, CommentData } from '../types/Comment';
import classNames from 'classnames';
import { createComment } from '../api/api';

type Props = {
postId: number;
addComment: (comment: Comment) => void;
};

export const NewCommentForm: React.FC<Props> = ({ postId, addComment }) => {
const [comment, setComment] = useState<CommentData>({
email: '',
body: '',
name: '',
postId,
});
const [isNameError, setIsNameError] = useState(false);
const [isEmailError, setIsEmailError] = useState(false);
const [isBodyError, setIsBodyError] = useState(false);
const [isLoading, setIsLoading] = useState(false);

const clearAllError = () => {
setIsLoading(false);
setIsBodyError(false);
setIsNameError(false);
setIsEmailError(false);
};

const submitComment = (e: FormEvent<HTMLFormElement>) => {
e.preventDefault();

if (!comment.name) {
setIsNameError(true);
}

if (!comment.email) {
setIsEmailError(true);
}

if (!comment.body) {
setIsBodyError(true);
}

if (!comment.name || !comment.email || !comment.body) {
return;
}

setIsLoading(true);

createComment(comment)
.then(result => {
addComment({ ...comment, id: result.id });
})
.catch()
.finally(() => {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The catch block is empty. Consider adding error handling logic here to manage API call failures, such as setting an error state or displaying an error message to the user.

clearAllError();
setComment(prev => ({ ...prev, body: '' }));
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The clearAllError function is called in the finally block, which resets all error states, including validation errors. This might not be the desired behavior if the form submission fails due to validation errors. Consider separating the reset of submission-related errors from validation errors.

});
};

const reset = () => {
clearAllError();
setComment({
email: '',
body: '',
name: '',
postId,
});
};

export const NewCommentForm: React.FC = () => {
return (
<form data-cy="NewCommentForm">
<form data-cy="NewCommentForm" onSubmit={submitComment} onReset={reset}>
<div className="field" data-cy="NameField">
<label className="label" htmlFor="comment-author-name">
Author Name
Expand All @@ -14,24 +82,34 @@ export const NewCommentForm: React.FC = () => {
name="name"
id="comment-author-name"
placeholder="Name Surname"
className="input is-danger"
className={classNames('input', {
'is-danger': isNameError && !comment.name,
})}
value={comment.name}
onChange={e =>
setComment(prev => ({ ...prev, name: e.target.value }))
}
/>

<span className="icon is-small is-left">
<i className="fas fa-user" />
</span>

<span
className="icon is-small is-right has-text-danger"
data-cy="ErrorIcon"
>
<i className="fas fa-exclamation-triangle" />
</span>
{isNameError && !comment.name && (
<span
className="icon is-small is-right has-text-danger"
data-cy="ErrorIcon"
>
<i className="fas fa-exclamation-triangle" />
</span>
)}
</div>

<p className="help is-danger" data-cy="ErrorMessage">
Name is required
</p>
{isNameError && !comment.name && (
<p className="help is-danger" data-cy="ErrorMessage">
Name is required
</p>
)}
</div>

<div className="field" data-cy="EmailField">
Expand All @@ -45,24 +123,34 @@ export const NewCommentForm: React.FC = () => {
name="email"
id="comment-author-email"
placeholder="[email protected]"
className="input is-danger"
className={classNames('input', {
'is-danger': isEmailError && !comment.email,
})}
value={comment.email}
onChange={e =>
setComment(prev => ({ ...prev, email: e.target.value }))
}
/>

<span className="icon is-small is-left">
<i className="fas fa-envelope" />
</span>

<span
className="icon is-small is-right has-text-danger"
data-cy="ErrorIcon"
>
<i className="fas fa-exclamation-triangle" />
</span>
{isEmailError && !comment.email && (
<span
className="icon is-small is-right has-text-danger"
data-cy="ErrorIcon"
>
<i className="fas fa-exclamation-triangle" />
</span>
)}
</div>

<p className="help is-danger" data-cy="ErrorMessage">
Email is required
</p>
{isEmailError && !comment.email && (
<p className="help is-danger" data-cy="ErrorMessage">
Email is required
</p>
)}
</div>

<div className="field" data-cy="BodyField">
Expand All @@ -75,18 +163,31 @@ export const NewCommentForm: React.FC = () => {
id="comment-body"
name="body"
placeholder="Type comment here"
className="textarea is-danger"
className={classNames('textarea', {
'is-danger': isBodyError && !comment.body,
})}
value={comment.body}
onChange={e =>
setComment(prev => ({ ...prev, body: e.target.value }))
}
/>
</div>

<p className="help is-danger" data-cy="ErrorMessage">
Enter some text
</p>
{isBodyError && !comment.body && (
<p className="help is-danger" data-cy="ErrorMessage">
Enter some text
</p>
)}
</div>

<div className="field is-grouped">
<div className="control">
<button type="submit" className="button is-link is-loading">
<button
type="submit"
className={classNames('button is-link', {
'is-loading': isLoading,
})}
>
Add
</button>
</div>
Expand Down
Loading
Loading