some improves

mate-academy · Nov 10, 2024 · 09d7e23 · 09d7e23
1 parent f8aa243
commit 09d7e23
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 26 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -78,9 +78,9 @@ export const App = () => {
                   <p data-cy="NoSelectedUser">No user selected</p>
                 )}
 
-                {isPostsLoading && <Loader />}
+                {isPostsLoading && !currentError && <Loader />}
 
-                {currentError === Errors.PostsLoading && isPostsLoading && (
+                {currentError === Errors.PostsLoading && (
                   <div
                     className="notification is-danger"
                     data-cy="PostsLoadingError"

diff --git a/src/components/NewCommentForm.tsx b/src/components/NewCommentForm.tsx
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { newComment } from '../api/newComment';
 import { Comment } from '../types/Comment';
 import classNames from 'classnames';
+import { Errors } from '../types/Errors';
 
 type Props = {
   postId: number;
@@ -16,6 +17,7 @@ export const NewCommentForm: React.FC<Props> = ({ postId, setComments }) => {
   const [isNameError, setIsNameError] = useState(false);
   const [isEmailError, setIsEmailError] = useState(false);
   const [isBodyError, setIsBodyError] = useState(false);
+  const [currentError, setCurrentError] = useState<Errors | null>(null);
 
   const resetForm = (reason: 'submit' | 'clear') => {
     if (reason === 'clear') {
@@ -75,47 +77,63 @@ export const NewCommentForm: React.FC<Props> = ({ postId, setComments }) => {
   };
 
   const validateForm = () => {
-    validateName(currentName);
-    validateEmail(currentEmail);
-    validateCommentBody(currentBody);
+    const nameValid = validateName(currentName);
+    const emailValid = validateEmail(currentEmail);
+    const bodyValid = validateCommentBody(currentBody);
+
+    return nameValid && emailValid && bodyValid;
   };
 
   const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
 
-    validateForm();
-
-    if (
-      validateName(currentName) &&
-      validateEmail(currentEmail) &&
-      validateCommentBody(currentBody)
-    ) {
+    if (validateForm()) {
       setIsAddingComment(true);
     }
   };
 
   useEffect(() => {
-    if (!isAddingComment || isNameError || isEmailError || isBodyError) {
+    if (!isAddingComment) {
       return;
     }
 
+    setCurrentError(null);
+
     newComment({
       name: currentName,
       email: currentEmail,
       body: currentBody,
       postId: postId,
-    }).then((data: unknown) => {
-      const dataAsComment = data as Comment;
-
-      setComments(prevComments => [...prevComments, dataAsComment]);
-      resetForm('submit');
-      setIsAddingComment(false);
-    });
+    })
+      .then((data: unknown) => {
+        const dataAsComment = data as Comment;
+
+        if (!dataAsComment || !dataAsComment.id) {
+          setCurrentError(Errors.CommentCreating);
+          setIsAddingComment(false);
+
+          return;
+        }
+
+        setComments(prevComments => [...prevComments, dataAsComment]);
+        resetForm('submit');
+        setIsAddingComment(false);
+      })
+      .catch(() => {
+        setCurrentError(Errors.CommentCreating);
+        setIsAddingComment(false);
+      });
   }, [isAddingComment]);
 
   return (
     <form data-cy="NewCommentForm" onSubmit={handleSubmit}>
       <div className="field" data-cy="NameField">
+        {currentError === Errors.CommentCreating && (
+          <div className="notification is-danger" data-cy="CommentsError">
+            Something went wrong while creating a new comment
+          </div>
+        )}
+
         <label className="label" htmlFor="comment-author-name">
           Author Name
         </label>

diff --git a/src/components/PostDetails.tsx b/src/components/PostDetails.tsx
@@ -24,24 +24,48 @@ export const PostDetails: React.FC<Props> = ({
   const [currentError, setCurrentError] = useState<Errors | null>(null);
 
   const handleDeleteComment = (comment: Comment) => {
+    setCurrentError(null);
     setComments(comments.filter(c => c.id !== comment.id));
 
-    deleteComment(comment.id).catch(() => {
-      setComments([...comments, comment]);
+    const restoreDeletedComment = () => {
+      setComments(prevComments => [...prevComments, comment]);
       setCurrentError(Errors.CommentDeleting);
-    });
+    };
+
+    deleteComment(comment.id)
+      .then((response: unknown) => {
+        if (response && typeof response === 'object' && 'error' in response) {
+          restoreDeletedComment();
+        }
+      })
+      .catch(() => {
+        restoreDeletedComment();
+      });
   };
 
   useEffect(() => {
     if (!post) {
       return;
     }
 
+    setCurrentError(null);
     setIsCommentsLoading(true);
     setComments([]);
 
     getComments(id)
-      .then(setComments)
+      .then(response => {
+        if (Array.isArray(response) && response.length > 0) {
+          setComments(response);
+        }
+
+        if (!Array.isArray(response)) {
+          setCurrentError(Errors.CommentsLoading);
+        }
+
+        if (Array.isArray(response) && response.length === 0) {
+          setCurrentError(Errors.NoComments);
+        }
+      })
       .catch(() => setCurrentError(Errors.CommentsLoading))
       .finally(() => {
         setIsCommentsLoading(false);
@@ -60,13 +84,13 @@ export const PostDetails: React.FC<Props> = ({
         <div className="block">
           {isCommentsLoading && <Loader />}
 
-          {currentError === Errors.CommentsLoading && !isCommentsLoading && (
+          {currentError === Errors.CommentsLoading && (
             <div className="notification is-danger" data-cy="CommentsError">
               Something went wrong
             </div>
           )}
 
-          {comments.length === 0 && !isCommentsLoading && (
+          {currentError === Errors.NoComments && (
             <p className="title is-4" data-cy="NoCommentsMessage">
               No comments yet
             </p>
@@ -102,6 +126,11 @@ export const PostDetails: React.FC<Props> = ({
                   </div>
                 </article>
               ))}
+              {currentError === Errors.CommentDeleting && (
+                <div className="notification is-danger" data-cy="CommentsError">
+                  Something went wrong while deleting a comment
+                </div>
+              )}
             </>
           )}
 

diff --git a/src/types/Errors.ts b/src/types/Errors.ts
@@ -4,5 +4,6 @@ export enum Errors {
   NoPosts = 'NoPosts',
   CommentsLoading = 'CommentsLoading',
   NoComments = 'NoComments',
+  CommentCreating = 'CommentCreating',
   CommentDeleting = 'CommentDeleting',
 }