clean code

packages/app/src/components/PageComment.tsx

@@ -8,7 +8,6 @@ import { Button } from 'reactstrap';
 import { toastError } from '~/client/util/apiNotification';
 import { apiPost } from '~/client/util/apiv1-client';
 import { useCurrentPagePath } from '~/stores/context';
-import { useDeleteCommentModal } from '~/stores/modal';
 import { useSWRxCurrentPage } from '~/stores/page';
 import { useCommentPreviewOptions } from '~/stores/renderer';
 
@@ -41,7 +40,6 @@ export const PageComment: FC<PageCommentProps> = memo((props:PageCommentProps):
     pageId, highlightKeywords, isReadOnly, titleAlign, hideIfEmpty,
   } = props;
 
-  const { open: openDeleteCommentModal, close: closeDeleteCommentModal } = useDeleteCommentModal();
   const { data: comments, mutate } = useSWRxPageComment(pageId);
   const { data: rendererOptions } = useCommentPreviewOptions();
   const { data: currentPage } = useSWRxCurrentPage();
@@ -92,13 +90,13 @@ export const PageComment: FC<PageCommentProps> = memo((props:PageCommentProps):
 
   const onClickDeleteButton = useCallback((comment: ICommentHasId) => {
     setCommentToBeDeleted(comment);
-    openDeleteCommentModal();
-  }, [openDeleteCommentModal]);
+    setIsDeleteConfirmModalShown(true);
+  }, []);
 
   const onCancelDeleteComment = useCallback(() => {
     setCommentToBeDeleted(null);
-    closeDeleteCommentModal();
-  }, [closeDeleteCommentModal]);
+    setIsDeleteConfirmModalShown(false);
+  }, []);
 
   const onDeleteCommentAfterOperation = useCallback(() => {
     onCancelDeleteComment();
@@ -229,8 +227,10 @@ export const PageComment: FC<PageCommentProps> = memo((props:PageCommentProps):
       </div>
       {(!isReadOnly && commentToBeDeleted != null) && (
         <DeleteCommentModal
+          isShown={isDeleteConfirmModalShown}
           comment={commentToBeDeleted}
           errorMessage={errorMessageOnDelete}
+          cancel={onCancelDeleteComment}
           confirmedToDelete={onDeleteComment}
         />
       )}

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

@@ -1,13 +1,9 @@
-import React from 'react';
-
 import { UserPicture } from '@growi/ui';
 import { format } from 'date-fns';
 import {
   Button, Modal, ModalHeader, ModalBody, ModalFooter,
 } from 'reactstrap';
 
-import { useDeleteCommentModal } from '~/stores/modal';
-
 import { ICommentHasId } from '../../interfaces/comment';
 import Username from '../User/Username';
 
@@ -15,62 +11,56 @@ import styles from './DeleteCommentModal.module.scss';
 
 
 type DeleteCommentModalProps = {
+  isShown: boolean,
   comment: ICommentHasId,
   errorMessage: string,
+  cancel: () => void, // for cancel evnet handling
   confirmedToDelete: () => void, // for confirmed event handling
 }
 
 export const DeleteCommentModal = (props: DeleteCommentModalProps): JSX.Element => {
 
   const {
-    confirmedToDelete,
+    isShown, comment, errorMessage, cancel, confirmedToDelete,
   } = props;
 
-  const { data: status, close } = useDeleteCommentModal();
-
-  if (status == null || status.comment == null) {
-    return <></>;
-  }
-
-  /*
-   * the threshold for omitting body
-   */
+  // the threshold for omitting body
   const OMIT_BODY_THRES = 400;
 
-  const commentDate = format(new Date(status.comment.createdAt), 'yyyy/MM/dd HH:mm');
+  const commentDate = format(new Date(comment.createdAt), 'yyyy/MM/dd HH:mm');
 
   // generate body
-  let commentBody = status.comment.comment;
+  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>;
 
+  if (isShown == null) {
+    return <></>;
+  }
+
   return (
-    <>
-      { status != null && (
-        <Modal isOpen={status.isOpened} toggle={close} className={`${styles['page-comment-delete-modal']}`}>
-          <ModalHeader tag="h4" toggle={close} className="bg-danger text-light">
-            <span>
-              <i className="icon-fw icon-fire"></i>
-              Delete comment?
-            </span>
-          </ModalHeader>
-          <ModalBody>
-            <UserPicture user={status.comment.creator} size="xs" /> <strong><Username user={status.comment.creator}></Username></strong> wrote on {commentDate}:
-            <p className="card well comment-body mt-2 p-2">{commentBodyElement}</p>
-          </ModalBody>
-          <ModalFooter>
-            <span className="text-danger">{status.errorMessage}</span>&nbsp;
-            <Button onClick={close}>Cancel</Button>
-            <Button color="danger" onClick={confirmedToDelete}>
-              <i className="icon icon-fire"></i>
-              Delete
-            </Button>
-          </ModalFooter>
-        </Modal>
-      )}
-    </>
+    <Modal isOpen={isShown} toggle={cancel} className={`${styles['page-comment-delete-modal']}`}>
+      <ModalHeader tag="h4" toggle={cancel} className="bg-danger text-light">
+        <span>
+          <i className="icon-fw icon-fire"></i>
+          Delete comment?
+        </span>
+      </ModalHeader>
+      <ModalBody>
+        <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>
+        <span className="text-danger">{errorMessage}</span>&nbsp;
+        <Button onClick={cancel}>Cancel</Button>
+        <Button color="danger" onClick={confirmedToDelete}>
+          <i className="icon icon-fire"></i>
+          Delete
+        </Button>
+      </ModalFooter>
+    </Modal>
   );
 
 };

packages/app/src/stores/modal.tsx

@@ -440,49 +440,3 @@ export const useShortcutsModal = (): SWRResponse<ShortcutsModalStatus, Error> &
     },
   };
 };
-
-/*
-  * DeleteCommentModal
-  */
-export type IDeleteCommentModal = {
-  comment: string,
-  errorMessage: string,
-}
-
-export type IDeleteCommentModalOption = {
-  onDeleteComment?: () => void,
-}
-
-type DeleteCommentModalStatus = {
-  isOpened: boolean,
-  comment?: ICommentHasId,
-  errorMessage?: IDeleteCommentModal,
-  opts?: IDeleteCommentModalOption,
-}
-
-type DeleteCommentModalUtils = {
-  open(
-    comment?: ICommentHasId,
-    errorMessage?: IDeleteCommentModal,
-    opts?: IDeleteCommentModalOption,
-  ): Promise<DeleteCommentModalStatus | undefined>,
-  close(): Promise<DeleteCommentModalStatus | undefined>,
-}
-
-export const useDeleteCommentModal = (status?: DeleteCommentModalStatus): SWRResponse<DeleteCommentModalStatus, Error> & DeleteCommentModalUtils => {
-  const initialStatus: DeleteCommentModalStatus = {
-    isOpened: false,
-  };
-  const swrResponse = useStaticSWR<DeleteCommentModalStatus, Error>('deleteCommentModal', status, { fallbackData: initialStatus });
-  return {
-    ...swrResponse,
-    open: (
-        comment?: ICommentHasId,
-        errorMessage?: IDeleteCommentModal,
-        opts?: IDeleteCommentModalOption,
-    ) => swrResponse.mutate({
-      isOpened: true, comment, errorMessage, opts,
-    }),
-    close: () => swrResponse.mutate({ isOpened: false }),
-  };
-};