Merge pull request #6403 from weseek/support/ts-fc-DeleteCommentModal

support: DeleteCommentModal change to TS FC

packages/app/src/components/PageComment.tsx

@@ -17,7 +17,7 @@ import { useSWRxPageComment } from '../stores/comment';
 import { Comment } from './PageComment/Comment';
 import { CommentEditor } from './PageComment/CommentEditor';
 import { CommentEditorLazyRenderer } from './PageComment/CommentEditorLazyRenderer';
-import DeleteCommentModal from './PageComment/DeleteCommentModal';
+import { DeleteCommentModal } from './PageComment/DeleteCommentModal';
 import { ReplyComments } from './PageComment/ReplyComments';
 
 type Props = {

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

@@ -1,70 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import {
-  Button, Modal, ModalHeader, ModalBody, ModalFooter,
-} from 'reactstrap';
-
-import { format } from 'date-fns';
-
-import { UserPicture } from '@growi/ui';
-import Username from '../User/Username';
-
-export default class DeleteCommentModal extends React.Component {
-
-  /*
-   * the threshold for omitting body
-   */
-  static get OMIT_BODY_THRES() { return 400 }
-
-  UNSAFE_componentWillMount() {
-  }
-
-  render() {
-    if (this.props.comment === undefined) {
-      return <div></div>;
-    }
-
-    const comment = this.props.comment;
-    const commentDate = format(new Date(comment.createdAt), 'yyyy/MM/dd HH:mm');
-
-    // generate body
-    let commentBody = comment.comment;
-    if (commentBody.length > DeleteCommentModal.OMIT_BODY_THRES) { // omit
-      commentBody = `${commentBody.substr(0, DeleteCommentModal.OMIT_BODY_THRES)}...`;
-    }
-    commentBody = <span style={{ whiteSpace: 'pre-wrap' }}>{commentBody}</span>;
-
-    return (
-      <Modal isOpen={this.props.isShown} toggle={this.props.cancel} className="page-comment-delete-modal">
-        <ModalHeader tag="h4" toggle={this.props.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">{commentBody}</p>
-        </ModalBody>
-        <ModalFooter>
-          <span className="text-danger">{this.props.errorMessage}</span>&nbsp;
-          <Button onClick={this.props.cancel}>Cancel</Button>
-          <Button color="danger" onClick={this.props.confirmedToDelete}>
-            <i className="icon icon-fire"></i>
-            Delete
-          </Button>
-        </ModalFooter>
-      </Modal>
-    );
-  }
-
-}
-
-DeleteCommentModal.propTypes = {
-  isShown: PropTypes.bool.isRequired,
-  comment: PropTypes.object,
-  errorMessage: PropTypes.string,
-  cancel: PropTypes.func.isRequired, // for cancel evnet handling
-  confirmedToDelete: PropTypes.func.isRequired, // for confirmed event handling
-};

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

@@ -0,0 +1,64 @@
+import React from 'react';
+
+import { UserPicture } from '@growi/ui';
+import { format } from 'date-fns';
+import {
+  Button, Modal, ModalHeader, ModalBody, ModalFooter,
+} from 'reactstrap';
+
+import { ICommentHasId } from '../../interfaces/comment';
+import Username from '../User/Username';
+
+
+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 {
+    isShown, comment, errorMessage, cancel, confirmedToDelete,
+  } = props;
+
+  /*
+   * the threshold for omitting body
+   */
+  const OMIT_BODY_THRES = 400;
+
+  const commentDate = format(new Date(comment.createdAt), 'yyyy/MM/dd HH:mm');
+
+  // 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>;
+
+  return (
+    <Modal isOpen={isShown} toggle={cancel} className="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/components/PageContentFooter.module.scss

@@ -0,0 +1,5 @@
+// TODO: Should Soft Coding see: https://github.com/weseek/growi/pull/6404
+.page-content-footer-skelton :global {
+  width: 300px;
+  height: 20px;
+}

packages/app/src/components/PageContentFooter.tsx

@@ -6,10 +6,12 @@ import { useSWRxCurrentPage } from '~/stores/page';
 
 import { Skelton } from './Skelton';
 
+import styles from './PageContentFooter.module.scss';
+
 export const PageContentFooter = memo((): JSX.Element => {
 
   const AuthorInfo = dynamic(() => import('./Navbar/AuthorInfo'),
-    { ssr: false, loading: () => <Skelton width={300} height={20} additionalClass={'mb-3'} /> });
+    { ssr: false, loading: () => <Skelton additionalClass={`${styles['page-content-footer-skelton']} mb-3`} /> });
 
   const { data: page } = useSWRxCurrentPage();