+
+ {comment.name}
+
+
+
+
+
+ {comment.body}
+
+
-
-
-
- (null);
-
-
+export const App = () => {
+ const [userSelectedId, setUserSelectedId] = useState
- ([]);
+ const [postSelected, setPostSelected] = useState(null);
-
No user selected
+ const [postsByUser, setPostsByUser] = useState
- Something went wrong!
-
+ useEffect(() => {
+ if (!userSelectedId) {
+ return;
+ }
+
+ setPostSelected(null);
+ setIsLoadind(true);
+ const getPostsByUser = async () => {
+ try {
+ const postsUser = await postsService.getPosts(userSelectedId);
+
+ setPostSelected(null);
+ setPostsByUser(postsUser);
+ } catch (error) {
+ setIsError(true);
+ setPostsByUser([]);
+ } finally {
+ setIsLoadind(false);
+ }
+ };
-
- No posts yet
+ getPostsByUser();
+ }, [userSelectedId]);
+
+ const showMessageAboutNotPosts =
+ !postsByUser.length && userSelectedId && !isLoading && !isError;
+
+ return (
+ setIsActiveListUsers(false)}>
+
-);
+
+ );
+};
diff --git a/src/api/comments.ts b/src/api/comments.ts
new file mode 100644
index 000000000..8d18e1420
--- /dev/null
+++ b/src/api/comments.ts
@@ -0,0 +1,20 @@
+import { client } from '../utils/fetchClient';
+import { Comment } from '../types/Comment';
+
+const url = `/comments`;
+
+export const getComments = (postId: number) => {
+ return client.get(`${url}?postId=${postId}`);
+};
+
+export const createComment = (comment: Omit) => {
+ return client.post(`${url}`, comment);
+};
+
+export const editComment = (comment: Comment) => {
+ return client.patch(`${url}/${comment.id}`, comment);
+};
+
+export const deleteComment = (commentId: number) => {
+ return client.delete(`${url}/${commentId}`);
+};
diff --git a/src/api/posts.ts b/src/api/posts.ts
new file mode 100644
index 000000000..3e8ebd750
--- /dev/null
+++ b/src/api/posts.ts
@@ -0,0 +1,20 @@
+import { client } from '../utils/fetchClient';
+import { Post } from '../types/Post';
+
+const url = `/posts`;
+
+export const getPosts = (userId: number) => {
+ return client.get(`${url}?userId=${userId}`);
+};
+
+export const createPost = (post: Omit) => {
+ return client.post(`${url}`, post);
+};
+
+export const editPost = (post: Post) => {
+ return client.patch(`${url}/${post.id}`, post);
+};
+
+export const deletePost = (postId: number) => {
+ return client.delete(`${url}/${postId}`);
+};
diff --git a/src/api/users.ts b/src/api/users.ts
new file mode 100644
index 000000000..fb0f0dea4
--- /dev/null
+++ b/src/api/users.ts
@@ -0,0 +1,20 @@
+import { client } from '../utils/fetchClient';
+import { User } from '../types/User';
+
+const url = `/users`;
+
+export const getUsers = () => {
+ return client.get(`${url}`);
+};
+
+export const createUser = (user: Omit) => {
+ return client.post(`${url}`, user);
+};
+
+export const editUser = (user: User) => {
+ return client.patch(`${url}/${user.id}`, user);
+};
+
+export const deleteUser = (userId: number) => {
+ return client.delete(`${url}/${userId}`);
+};
diff --git a/src/components/Comment.tsx b/src/components/Comment.tsx
new file mode 100644
index 000000000..338fdf2f8
--- /dev/null
+++ b/src/components/Comment.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import { Comment as CommentItem } from '../types/Comment';
+
+type Props = {
+ comment: CommentItem;
+ handleDeleteComment: (commentId: number) => void;
+};
+
+const Comment: React.FC = props => {
+ const { comment, handleDeleteComment } = props;
+
+ return (
+
+
+ );
+};
+
+export default React.memo(Comment);
diff --git a/src/components/NewCommentForm.tsx b/src/components/NewCommentForm.tsx
index 73a8a0b45..aac445d57 100644
--- a/src/components/NewCommentForm.tsx
+++ b/src/components/NewCommentForm.tsx
@@ -1,8 +1,94 @@
-import React from 'react';
+import React, { Dispatch, SetStateAction, useState } from 'react';
+import * as commentsService from '../api/comments';
+import cn from 'classnames';
+import { Comment } from '../types/Comment';
+
+type Props = {
+ postId: number;
+ addNewComment: (comment: Comment) => void;
+ setIsError: (isError: boolean) => void;
+ setIsAddingComment: Dispatch>;
+};
+
+export const NewCommentForm: React.FC = props => {
+ const { postId, addNewComment, setIsError, setIsAddingComment } = props;
+ const [name, setName] = useState('');
+ const [isNameError, setIsNameError] = useState(false);
+
+ const [email, setEmail] = useState('');
+ const [isEmailError, setIsEmailError] = useState(false);
+
+ const [commentText, setCommentText] = useState('');
+ const [isCommentError, setIsCommentError] = useState(false);
+
+ const [isLoading, setIsLoading] = useState(false);
+
+ const reset = () => {
+ setIsNameError(false);
+ setIsEmailError(false);
+ setIsCommentError(false);
+ setName('');
+ setEmail('');
+ setCommentText('');
+ setIsLoading(false);
+ };
+
+ const validateform = () => {
+ setIsNameError(!name.length);
+ setIsEmailError(!email.length);
+ setIsCommentError(!commentText.length);
+
+ return !name.length || !email.length || !commentText.length;
+ };
+
+ const handleAddComment = async (event: React.FormEvent) => {
+ event.preventDefault();
+
+ if (validateform()) {
+ return;
+ }
+
+ try {
+ setIsLoading(true);
+ const newComment = await commentsService.createComment({
+ postId,
+ name,
+ email,
+ body: commentText,
+ });
+
+ setIsError(false);
+ addNewComment(newComment);
+
+ setCommentText('');
+ } catch (error) {
+ setIsError(true);
+ setIsAddingComment(false);
+ reset();
+ } finally {
+ setIsLoading(false);
+ }
+ };
+
+ const handleAddName = (event: React.ChangeEvent) => {
+ setIsNameError(false);
+ setName(event.target.value);
+ };
+
+ const handleAddEmail = (event: React.ChangeEvent) => {
+ setIsEmailError(false);
+ setEmail(event.target.value);
+ };
+
+ const handleAddingComment = (
+ event: React.ChangeEvent,
+ ) => {
+ setIsCommentError(false);
+ setCommentText(event.target.value);
+ };
-export const NewCommentForm: React.FC = () => {
return (
-
+
-
+
-
+
-
+
+
-
+ {!userSelectedId && !isLoading && (
+
No user selected
+ )} + + {isLoading &&
+ Something went wrong!
+
+ )}
+
+ {showMessageAboutNotPosts && (
+
+ No posts yet
+
+ )}
+
+ {!!postsByUser.length && (
+
-
-
-
+ {postSelected && (
+
+
+ )}