From 0896702b3ffc245a5afb4eb409f89f506e285896 Mon Sep 17 00:00:00 2001
From: Oleksiy Uchaev <corob.dir@gmail.com>
Date: Sat, 20 Jan 2024 12:23:26 +0200
Subject: [PATCH] NoCommentMessege moved in separate component, changed render
 logic

---
 src/components/Comments/NoteEmpty.tsx   | 10 ++++++++++
 src/components/Comments/PostDetails.tsx | 17 ++---------------
 2 files changed, 12 insertions(+), 15 deletions(-)
 create mode 100644 src/components/Comments/NoteEmpty.tsx

diff --git a/src/components/Comments/NoteEmpty.tsx b/src/components/Comments/NoteEmpty.tsx
new file mode 100644
index 000000000..f851be134
--- /dev/null
+++ b/src/components/Comments/NoteEmpty.tsx
@@ -0,0 +1,10 @@
+export const NoteEmpty: React.FC = () => {
+  return (
+    <p
+      className="title is-4"
+      data-cy="NoCommentsMessage"
+    >
+      No comments yet
+    </p>
+  );
+};
diff --git a/src/components/Comments/PostDetails.tsx b/src/components/Comments/PostDetails.tsx
index cc1b5593c..f594926ec 100644
--- a/src/components/Comments/PostDetails.tsx
+++ b/src/components/Comments/PostDetails.tsx
@@ -1,5 +1,4 @@
 import React, { useContext } from 'react';
-import classNames from 'classnames';
 import { MainContext } from '../MainContext';
 import { CommentsList } from './CommentsList';
 import { Loader } from '../Notices/Loader/Loader';
@@ -8,11 +7,11 @@ import { Notification } from '../Notices/Notification';
 import { Error } from '../../types/Message';
 import { NewCommentForm } from '../Form/NewCommentForm';
 import { AddButton } from './AddButton';
+import { NoteEmpty } from './NoteEmpty';
 
 export const PostDetails: React.FC = () => {
   const {
     isForm,
-    comments,
     loadType,
     currentPost,
     notification,
@@ -35,19 +34,7 @@ export const PostDetails: React.FC = () => {
 
           {notification === Error.getComments
             ? <Notification />
-            : (
-              <p
-                className={classNames('title is-4',
-                  { 'is-active': comments.length },
-                  {
-                    'is-hidden': !comments.length
-                    || loadType === Load.Comments,
-                  })}
-                data-cy="NoCommentsMessage"
-              >
-                No comments yet
-              </p>
-            )}
+            : loadType === Load.None && <NoteEmpty />}
 
           <CommentsList />
           <AddButton />