Merge pull request #6402 from weseek/support/ts-fc-CommnetControl

support: CommnetControl change to TS and FC

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

@@ -14,7 +14,7 @@ import HistoryIcon from '../Icons/HistoryIcon';
 import RevisionRenderer from '../Page/RevisionRenderer';
 import Username from '../User/Username';
 
-import CommentControl from './CommentControl';
+import { CommentControl } from './CommentControl';
 import { CommentEditor } from './CommentEditor';
 
 type CommentProps = {

packages/app/src/components/PageComment/CommentControl.jsx → packages/app/src/components/PageComment/CommentControl.tsx

@@ -1,25 +1,21 @@
 import React from 'react';
 
-import PropTypes from 'prop-types';
+type CommentControlProps = {
+  onClickEditBtn: () => void,
+  onClickDeleteBtn: () => void,
+}
 
+export const CommentControl = (props: CommentControlProps): JSX.Element => {
+  const { onClickEditBtn, onClickDeleteBtn } = props;
 
-const CommentControl = (props) => {
   return (
     <div className="page-comment-control">
-      <button type="button" className="btn btn-link p-2" onClick={props.onClickEditBtn}>
+      <button type="button" className="btn btn-link p-2" onClick={onClickEditBtn}>
         <i className="ti ti-pencil"></i>
       </button>
-      <button type="button" className="btn btn-link p-2 mr-2" onClick={props.onClickDeleteBtn}>
+      <button type="button" className="btn btn-link p-2 mr-2" onClick={onClickDeleteBtn}>
         <i className="ti ti-close"></i>
       </button>
     </div>
   );
 };
-
-CommentControl.propTypes = {
-
-  onClickEditBtn: PropTypes.func.isRequired,
-  onClickDeleteBtn: PropTypes.func.isRequired,
-};
-
-export default CommentControl;