From a893f3da59a8079188919112b241ff76b9003cb8 Mon Sep 17 00:00:00 2001
From: Kateryna <moskkat40@gmail.com>
Date: Tue, 17 Dec 2024 19:23:34 +0100
Subject: [PATCH] fixed all test and mentor comments

---
 src/App.tsx                       |  4 +-
 src/components/NewCommentForm.tsx | 38 +++++++++-----
 src/components/PostDetails.tsx    | 85 +++++++++++++++----------------
 3 files changed, 68 insertions(+), 59 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 07bb5e78e..d03477acd 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -71,11 +71,13 @@ export const App = () => {
   const addComment = ({ name, email, body, postId }: Comment) => {
     setLoading('addComment');
 
-    servicesComments
+    return servicesComments
       .createComment({ name, email, body, postId })
       .then(newComment => {
         setComments(currentComments => [...currentComments, newComment]);
+        setIsError(false);
       })
+      .catch(() => setIsError(true))
       .finally(() => setLoading(''));
   };
 
diff --git a/src/components/NewCommentForm.tsx b/src/components/NewCommentForm.tsx
index 265058a79..5b10d982a 100644
--- a/src/components/NewCommentForm.tsx
+++ b/src/components/NewCommentForm.tsx
@@ -22,11 +22,14 @@ export const NewCommentForm: React.FC<Props> = ({
   const [body, setBody] = useState('');
   const [bodyError, setBodyError] = useState(false);
 
+  const [isReset, setIsReset] = useState(false);
+
   function reset() {
     setBody('');
   }
 
   function resetAllFields() {
+    setIsReset(true);
     setName('');
     setEmail('');
     setBody('');
@@ -50,15 +53,19 @@ export const NewCommentForm: React.FC<Props> = ({
   const handleSubmit = (event: React.MouseEvent<HTMLButtonElement>) => {
     event.preventDefault();
 
-    if (name.length === 0) {
+    const trimmedName = name.trim();
+    const trimmedEmail = email.trim();
+    const trimmedBody = body.trim();
+
+    if (name.length === 0 || !trimmedName) {
       setTitleError(true);
     }
 
-    if (email.length === 0) {
+    if (email.length === 0 || !trimmedEmail) {
       setEmailError(true);
     }
 
-    if (body.length === 0) {
+    if (body.length === 0 || !trimmedBody) {
       setBodyError(true);
     }
 
@@ -89,16 +96,17 @@ export const NewCommentForm: React.FC<Props> = ({
             value={name}
             id="comment-author-name"
             placeholder="Name Surname"
-            className={classNames('input', { 'is-danger': titleError })}
+            className={classNames('input', {
+              'is-danger': titleError && !isReset,
+            })}
             onChange={handleNameChange}
           />
-          {name}
 
           <span className="icon is-small is-left">
             <i className="fas fa-user" />
           </span>
 
-          {titleError && (
+          {titleError && !isReset && (
             <span
               className="icon is-small is-right has-text-danger"
               data-cy="ErrorIcon"
@@ -108,7 +116,7 @@ export const NewCommentForm: React.FC<Props> = ({
           )}
         </div>
 
-        {titleError && (
+        {titleError && !isReset && (
           <p className="help is-danger" data-cy="ErrorMessage">
             Name is required
           </p>
@@ -122,12 +130,14 @@ export const NewCommentForm: React.FC<Props> = ({
 
         <div className="control has-icons-left has-icons-right">
           <input
-            type="text"
+            type="email"
             name="email"
             id="comment-author-email"
             value={email}
             placeholder="email@test.com"
-            className={classNames('input', { 'is-danger': emailError })}
+            className={classNames('input', {
+              'is-danger': emailError && !isReset,
+            })}
             onChange={handleEmailChange}
           />
 
@@ -135,7 +145,7 @@ export const NewCommentForm: React.FC<Props> = ({
             <i className="fas fa-envelope" />
           </span>
 
-          {emailError && (
+          {emailError && !isReset && (
             <span
               className="icon is-small is-right has-text-danger"
               data-cy="ErrorIcon"
@@ -145,7 +155,7 @@ export const NewCommentForm: React.FC<Props> = ({
           )}
         </div>
 
-        {emailError && (
+        {emailError && !isReset && (
           <p className="help is-danger" data-cy="ErrorMessage">
             Email is required
           </p>
@@ -163,12 +173,14 @@ export const NewCommentForm: React.FC<Props> = ({
             name="body"
             value={body}
             placeholder="Type comment here"
-            className={classNames('textarea', { 'is-danger': bodyError })}
+            className={classNames('textarea', {
+              'is-danger': bodyError && !isReset,
+            })}
             onChange={handleBodyChange}
           />
         </div>
 
-        {bodyError && (
+        {bodyError && !isReset && (
           <p className="help is-danger" data-cy="ErrorMessage">
             Enter some text
           </p>
diff --git a/src/components/PostDetails.tsx b/src/components/PostDetails.tsx
index 5782dd996..5e546e4a2 100644
--- a/src/components/PostDetails.tsx
+++ b/src/components/PostDetails.tsx
@@ -49,57 +49,52 @@ export const PostDetails: React.FC<Props> = ({
 
           <p data-cy="PostBody">{currentPost.body}</p>
         </div>
-        {isError && (
-          <div className="notification is-danger" data-cy="CommentsError">
-            Something went wrong
-          </div>
-        )}
         {loadingComments && <Loader />}
-        {!loadingComments &&
-          (comments.length === 0 ? (
-            <>
-              <p className="title is-4" data-cy="NoCommentsMessage">
-                No comments yet
-              </p>
-            </>
-          ) : (
+        <div className="block">
+          {isError && (
+            <div className="notification is-danger" data-cy="CommentsError">
+              Something went wrong
+            </div>
+          )}
+          {!loadingComments && !isError && (
             <>
-              <div className="block">
+              {comments.length === 0 ? (
+                <p className="title is-4" data-cy="NoCommentsMessage">
+                  No comments yet
+                </p>
+              ) : (
                 <p className="title is-4">Comments:</p>
-                {comments.map(comment => (
-                  <>
-                    <article
-                      key={comment.id}
-                      className="message is-small"
-                      data-cy="Comment"
+              )}
+
+              {comments.map(comment => (
+                <article
+                  key={comment.id}
+                  className="message is-small"
+                  data-cy="Comment"
+                >
+                  <div className="message-header">
+                    <a href={`mailto:${comment.email}`} data-cy="CommentAuthor">
+                      {comment.name}
+                    </a>
+                    <button
+                      data-cy="CommentDelete"
+                      type="button"
+                      className="delete is-small"
+                      aria-label="delete"
+                      onClick={() => handleDeleteComment(comment.id)}
                     >
-                      <div className="message-header">
-                        <a
-                          href={`mailto:${comment.email}`}
-                          data-cy="CommentAuthor"
-                        >
-                          {comment.name}
-                        </a>
-                        <button
-                          data-cy="CommentDelete"
-                          type="button"
-                          className="delete is-small"
-                          aria-label="delete"
-                          onClick={() => handleDeleteComment(comment.id)}
-                        >
-                          delete button
-                        </button>
-                      </div>
+                      delete button
+                    </button>
+                  </div>
 
-                      <div className="message-body" data-cy="CommentBody">
-                        {comment.body}
-                      </div>
-                    </article>
-                  </>
-                ))}
-              </div>
+                  <div className="message-body" data-cy="CommentBody">
+                    {comment.body}
+                  </div>
+                </article>
+              ))}
             </>
-          ))}
+          )}
+        </div>
         {!loadingComments &&
           !isError &&
           (isWritePostButton ? (