clean code

packages/app/src/components/PageComment/DeleteCommentModal.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 
-import { Nullable } from '@growi/core';
 import { UserPicture } from '@growi/ui';
 import { format } from 'date-fns';
 import {
@@ -15,7 +14,7 @@ import styles from './DeleteCommentModal.module.scss';
 
 export type DeleteCommentModalProps = {
   isShown: boolean,
-  comment: Nullable<ICommentHasId>,
+  comment: ICommentHasId | null,
   errorMessage: string,
   cancelToDelete: () => void,
   confirmeToDelete: () => void,
@@ -27,50 +26,67 @@ export const DeleteCommentModal = (props: DeleteCommentModalProps): JSX.Element
     isShown, comment, errorMessage, cancelToDelete, confirmeToDelete,
   } = props;
 
-  if (comment == null || isShown === false) {
+  const HeaderContent = () => {
+    if (comment == null || isShown === false) {
+      return <></>;
+    }
+
     return (
-      <Modal isOpen={isShown} toggle={cancelToDelete} className={`${styles['page-comment-delete-modal']}`}>
-        <ModalHeader tag="h4" toggle={cancelToDelete} className="bg-danger text-light">
-        </ModalHeader>
-        <ModalBody>
-        </ModalBody>
-        <ModalFooter>
-        </ModalFooter>
-      </Modal>
+      <span>
+        <i className="icon-fw icon-fire"></i>
+        Delete comment?
+      </span>
     );
-  }
-
-  // the threshold for omitting body
-  const OMIT_BODY_THRES = 400;
+  };
 
-  const commentDate = format(new Date(comment.createdAt), 'yyyy/MM/dd HH:mm');
+  const BodyContent = () => {
+    if (comment == null || isShown === false) {
+      return <></>;
+    }
 
-  // generate body
-  let commentBody = comment.comment;
-  if (commentBody.length > OMIT_BODY_THRES) { // omit
-    commentBody = `${commentBody.substr(0, OMIT_BODY_THRES)}...`;
-  }
-  const commentBodyElement = <span style={{ whiteSpace: 'pre-wrap' }}>{commentBody}</span>;
+    const OMIT_BODY_THRES = 400;
+    const commentDate = format(new Date(comment.createdAt), 'yyyy/MM/dd HH:mm');
+    let commentBody = comment.comment;
+    if (commentBody.length > OMIT_BODY_THRES) { // omit
+      commentBody = `${commentBody.substr(0, OMIT_BODY_THRES)}...`;
+    }
+    const commentBodyElement = <span style={{ whiteSpace: 'pre-wrap' }}>{commentBody}</span>;
 
-  return (
-    <Modal isOpen={isShown} toggle={cancelToDelete} className={`${styles['page-comment-delete-modal']}`}>
-      <ModalHeader tag="h4" toggle={cancelToDelete} className="bg-danger text-light">
-        <span>
-          <i className="icon-fw icon-fire"></i>
-          Delete comment?
-        </span>
-      </ModalHeader>
-      <ModalBody>
+    return (
+      <>
         <UserPicture user={comment.creator} size="xs" /> <strong><Username user={comment.creator}></Username></strong> wrote on {commentDate}:
         <p className="card well comment-body mt-2 p-2">{commentBodyElement}</p>
-      </ModalBody>
-      <ModalFooter>
+      </>
+    );
+  };
+
+  const FooterContent = () => {
+    if (comment == null || isShown === false) {
+      return <></>;
+    }
+
+    return (
+      <>
         <span className="text-danger">{errorMessage}</span>&nbsp;
         <Button onClick={cancelToDelete}>Cancel</Button>
         <Button color="danger" onClick={confirmeToDelete}>
           <i className="icon icon-fire"></i>
           Delete
         </Button>
+      </>
+    );
+  };
+
+  return (
+    <Modal isOpen={isShown} toggle={cancelToDelete} className={`${styles['page-comment-delete-modal']}`}>
+      <ModalHeader tag="h4" toggle={cancelToDelete} className="bg-danger text-light">
+        <HeaderContent/>
+      </ModalHeader>
+      <ModalBody>
+        <BodyContent />
+      </ModalBody>
+      <ModalFooter>
+        <FooterContent />
       </ModalFooter>
     </Modal>
   );