adjust

src/client/js/components/PageComment/Comment.jsx

@@ -3,8 +3,10 @@ import PropTypes from 'prop-types';
 
 import { format, formatDistanceStrict } from 'date-fns';
 
+import Button from 'react-bootstrap/es/Button';
 import Tooltip from 'react-bootstrap/es/Tooltip';
 import OverlayTrigger from 'react-bootstrap/es/OverlayTrigger';
+import Collapse from 'react-bootstrap/es/Collapse';
 
 import AppContainer from '../../services/AppContainer';
 import PageContainer from '../../services/PageContainer';
@@ -15,7 +17,6 @@ import UserPicture from '../User/UserPicture';
 import Username from '../User/Username';
 import CommentEditor from './CommentEditor';
 import CommentControl from './CommentControl';
-import ReplyComments from './ReplyComments';
 
 /**
  *
@@ -32,6 +33,7 @@ class Comment extends React.PureComponent {
 
     this.state = {
       html: '',
+      isOlderRepliesShown: false,
       isReEdit: false,
     };
 
@@ -143,6 +145,14 @@ class Comment extends React.PureComponent {
     );
   }
 
+  toggleOlderReplies() {
+    this.setState((prevState) => {
+      return {
+        showOlderReplies: !prevState.showOlderReplies,
+      };
+    });
+  }
+
   async renderHtml() {
 
     const { growiRenderer, appContainer } = this.props;
@@ -162,6 +172,71 @@ class Comment extends React.PureComponent {
     await interceptorManager.process('postRenderCommentHtml', context);
   }
 
+  renderReply(reply) {
+    return (
+      <div key={reply._id} className="page-comment-reply">
+        <CommentWrapper
+          comment={reply}
+          deleteBtnClicked={this.props.deleteBtnClicked}
+          growiRenderer={this.props.growiRenderer}
+        />
+      </div>
+    );
+  }
+
+  renderReplies() {
+    const layoutType = this.props.appContainer.getConfig().layoutType;
+    const isBaloonStyle = layoutType.match(/crowi-plus|growi|kibela/);
+
+    let replyList = this.props.replyList;
+    if (!isBaloonStyle) {
+      replyList = replyList.slice().reverse();
+    }
+
+    const areThereHiddenReplies = replyList.length > 2;
+
+    const { isOlderRepliesShown } = this.state;
+    const toggleButtonIconName = isOlderRepliesShown ? 'icon-arrow-up' : 'icon-options-vertical';
+    const toggleButtonIcon = <i className={`icon-fw ${toggleButtonIconName}`}></i>;
+    const toggleButtonLabel = isOlderRepliesShown ? '' : 'more';
+    const toggleButton = (
+      <Button
+        bsStyle="link"
+        className="page-comments-list-toggle-older"
+        onClick={() => { this.setState({ isOlderRepliesShown: !isOlderRepliesShown }) }}
+      >
+        {toggleButtonIcon} {toggleButtonLabel}
+      </Button>
+    );
+
+    const shownReplies = replyList.slice(replyList.length - 2, replyList.length);
+    const hiddenReplies = replyList.slice(0, replyList.length - 2);
+
+    const hiddenElements = hiddenReplies.map((reply) => {
+      return this.renderReply(reply);
+    });
+
+    const shownElements = shownReplies.map((reply) => {
+      return this.renderReply(reply);
+    });
+
+    return (
+      <React.Fragment>
+        {areThereHiddenReplies && (
+          <div className="page-comments-hidden-replies">
+            <Collapse in={this.state.isOlderRepliesShown}>
+              <div>{hiddenElements}</div>
+            </Collapse>
+            <div className="text-center">{toggleButton}</div>
+          </div>
+        )}
+
+        {shownElements}
+      </React.Fragment>
+    );
+  }
+
+
   render() {
     const comment = this.props.comment;
     const commentId = comment._id;
@@ -215,21 +290,20 @@ class Comment extends React.PureComponent {
                 <OverlayTrigger overlay={commentDateTooltip} placement="bottom">
                   <span><a href={`#${commentId}`}>{commentDate}</a></span>
                 </OverlayTrigger>
-                { isEdited && (
-                  <OverlayTrigger overlay={editedDateTooltip} placement="bottom">
-                    <span>&nbsp;(edited)</span>
-                  </OverlayTrigger>
-                ) }
+                {isEdited && (
+                <OverlayTrigger overlay={editedDateTooltip} placement="bottom">
+                  <span>&nbsp;(edited)</span>
+                </OverlayTrigger>
+                  )}
                 <span className="ml-2"><a className={revisionLavelClassName} href={revHref}>{revFirst8Letters}</a></span>
               </div>
-              { this.checkPermissionToControlComment()
+              {this.checkPermissionToControlComment()
                   && <CommentControl onClickDeleteBtn={this.deleteBtnClickedHandler} onClickEditBtn={this.editBtnClickedHandler} />}
             </div>
           </div>
-        )
-      }
-
-        <ReplyComments {...this.props} />
+          )
+        }
+        {this.renderReplies()}
 
       </React.Fragment>
     );

src/client/js/components/PageComment/ReplyComments.jsx

@@ -1,95 +0,0 @@
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-
-import Button from 'react-bootstrap/es/Button';
-import Collapse from 'react-bootstrap/es/Collapse';
-
-import AppContainer from '../../services/AppContainer';
-import PageContainer from '../../services/PageContainer';
-
-import { createSubscribedElement } from '../UnstatedUtils';
-
-const ReplyComments = (props) => {
-  const [isOlderRepliesShown, setIsOlderRepliesShown] = useState(false);
-
-  const toggleOlderReplies = () => {
-    setIsOlderRepliesShown(!isOlderRepliesShown);
-  };
-
-  const renderReply = (reply) => {
-    return (
-      <div key={reply._id} className="page-comment-reply">
-        {/* <Comment
-          comment={reply}
-          editBtnClicked={props.confirmToEditComment}
-          deleteBtnClicked={props.confirmToDeleteComment}
-          growiRenderer={props.growiRenderer}
-        /> */}
-      </div>
-    );
-  };
-  const layoutType = props.appContainer.getConfig().layoutType;
-  const isBaloonStyle = layoutType.match(/crowi-plus|growi|kibela/);
-
-  let { replyList } = props;
-  if (!isBaloonStyle) {
-    replyList = replyList.slice().reverse();
-  }
-
-  const areThereHiddenReplies = replyList.length > 2;
-
-  const toggleButtonIconName = isOlderRepliesShown ? 'icon-arrow-up' : 'icon-options-vertical';
-  const toggleButtonIcon = <i className={`icon-fw ${toggleButtonIconName}`}></i>;
-  const toggleButtonLabel = isOlderRepliesShown ? '' : 'more';
-
-  const shownReplies = replyList.slice(replyList.length - 2, replyList.length);
-  const hiddenReplies = replyList.slice(0, replyList.length - 2);
-
-  const hiddenElements = hiddenReplies.map((reply) => {
-    return renderReply(reply);
-  });
-
-  const shownElements = shownReplies.map((reply) => {
-    return renderReply(reply);
-  });
-
-  return (
-    <React.Fragment>
-      {areThereHiddenReplies && (
-        <div className="page-comments-hidden-replies">
-          <Collapse in={isOlderRepliesShown}>
-            <div>{hiddenElements}</div>
-          </Collapse>
-          <div className="text-center">
-            <Button
-              bsStyle="link"
-              className="page-comments-list-toggle-older"
-              onClick={toggleOlderReplies}
-            >
-              {toggleButtonIcon} {toggleButtonLabel}
-            </Button>
-          </div>
-        </div>
-      )}
-
-      {shownElements}
-    </React.Fragment>
-  );
-};
-
-
-/**
- * Wrapper component for using unstated
- */
-const ReplyCommentsWrapper = (props) => {
-  return createSubscribedElement(ReplyComments, props, [AppContainer, PageContainer]);
-};
-
-ReplyComments.propTypes = {
-  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
-  pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
-
-  replyList: PropTypes.array.isRequired,
-};
-
-export default ReplyCommentsWrapper;