NoCommentMessege moved in separate component, changed render logic

mate-academy · Jan 20, 2024 · 0896702 · 0896702
1 parent 53f93ce
commit 0896702
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 15 deletions.
diff --git a/src/components/Comments/NoteEmpty.tsx 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
@@ -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 />