Merge pull request #6356 from weseek/support/create-ReplayComments

support: Create ReplayComments.tsx

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

@@ -1,118 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import { Collapse } from 'reactstrap';
-
-import AppContainer from '~/client/services/AppContainer';
-import PageContainer from '~/client/services/PageContainer';
-
-import Comment from './Comment';
-
-import { withUnstatedContainers } from '../UnstatedUtils';
-
-import { RendererOptions } from '~/services/renderer/renderer';
-
-class ReplayComments extends React.PureComponent {
-
-  constructor() {
-    super();
-
-    this.state = {
-      isOlderRepliesShown: false,
-    };
-
-    this.toggleOlderReplies = this.toggleOlderReplies.bind(this);
-  }
-
-  toggleOlderReplies() {
-    this.setState({ isOlderRepliesShown: !this.state.isOlderRepliesShown });
-  }
-
-  renderReply(reply) {
-    return (
-      <div key={reply._id} className="page-comment-reply ml-4 ml-sm-5 mr-3">
-        <Comment
-          comment={reply}
-          deleteBtnClicked={this.props.deleteBtnClicked}
-          rendererOptions={this.props.rendererOptions}
-          isReadOnly={this.props.isReadOnly}
-        />
-      </div>
-    );
-  }
-
-  render() {
-
-    const isAllReplyShown = this.props.appContainer.getConfig().isAllReplyShown || false;
-    const replyList = this.props.replyList;
-
-    if (isAllReplyShown) {
-      return (
-        <React.Fragment>
-          {replyList.map((reply) => {
-            return this.renderReply(reply);
-          })}
-        </React.Fragment>
-      );
-    }
-
-    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 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 isOpen={this.state.isOlderRepliesShown}>
-              <div>{hiddenElements}</div>
-            </Collapse>
-            <div className="text-center">
-              <button
-                type="button"
-                className="btn btn-link"
-                onClick={this.toggleOlderReplies}
-              >
-                {toggleButtonIcon} {toggleButtonLabel}
-              </button>
-            </div>
-          </div>
-        )}
-        {shownElements}
-
-      </React.Fragment>
-    );
-  }
-
-}
-
-/**
- * Wrapper component for using unstated
- */
-const ReplayCommentsWrapper = withUnstatedContainers(ReplayComments, [AppContainer, PageContainer]);
-
-ReplayComments.propTypes = {
-  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
-  pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
-
-  rendererOptions: PropTypes.instanceOf(RendererOptions).isRequired,
-  deleteBtnClicked: PropTypes.func.isRequired,
-  isReadOnly: PropTypes.bool.isRequired,
-  replyList: PropTypes.array,
-};
-
-export default ReplayCommentsWrapper;

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

@@ -0,0 +1,98 @@
+
+import React, { useState } from 'react';
+
+import { Collapse } from 'reactstrap';
+
+import { RendererOptions } from '~/services/renderer/renderer';
+
+import { ICommentHasId, ICommentHasIdList } from '../../interfaces/comment';
+import { useRendererConfig } from '../../stores/context';
+
+import { Comment } from './Comment';
+
+type ReplaycommentsProps = {
+  deleteBtnClicked: (comment: ICommentHasId) => void,
+  rendererOptions: RendererOptions,
+  isReadOnly: boolean,
+  replyList: ICommentHasIdList,
+  onComment: () => void,
+}
+
+export const ReplayComments = (props: ReplaycommentsProps): JSX.Element => {
+  const {
+    deleteBtnClicked, rendererOptions, isReadOnly, replyList, onComment,
+  } = props;
+  const { data: rendererConfig } = useRendererConfig();
+
+  const [isOlderRepliesShown, setIsOlderRepliesShown] = useState(false);
+
+  const renderReply = (reply: ICommentHasId) => {
+    return (
+      <div key={reply._id} className="page-comment-reply ml-4 ml-sm-5 mr-3">
+        {/* TODO: Update props */}
+        <Comment
+          comment={reply}
+          deleteBtnClicked={deleteBtnClicked}
+          rendererOptions={rendererOptions}
+          isReadOnly={isReadOnly}
+          onComment={onComment}
+        />
+      </div>
+    );
+  };
+
+  // TODO: Remove isAllReplyShown from rendererconfig
+  if (rendererConfig === undefined) {
+    return <></>;
+  }
+  const isAllReplyShown = rendererConfig.isAllReplyShown || false;
+
+  if (isAllReplyShown) {
+    return (
+      <>
+        {replyList.map((reply) => {
+          return renderReply(reply);
+        })}
+      </>
+    );
+  }
+
+  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 (
+    <>
+      {areThereHiddenReplies && (
+        <div className="page-comments-hidden-replies">
+          <Collapse isOpen={isOlderRepliesShown}>
+            <div>{hiddenElements}</div>
+          </Collapse>
+          <div className="text-center">
+            <button
+              type="button"
+              className="btn btn-link"
+              onClick={() => setIsOlderRepliesShown(!isOlderRepliesShown)}
+            >
+              {toggleButtonIcon} {toggleButtonLabel}
+            </button>
+          </div>
+        </div>
+      )}
+      {shownElements}
+    </>
+  );
+};

packages/app/src/interfaces/services/renderer.ts

@@ -13,7 +13,8 @@ export type RendererConfig = {
   isEnabledLinebreaksInComments: boolean,
   adminPreferredIndentSize: number,
   isIndentSizeForced: boolean,
-  highlightJsStyleBorder: boolean
+  highlightJsStyleBorder: boolean,
+  isAllReplyShown: boolean,
 
   plantumlUri: string | null,
   blockdiagUri: string | null,

packages/app/src/pages/[[...path]].page.tsx

@@ -490,6 +490,7 @@ function injectServerConfigurations(context: GetServerSidePropsContext, props: P
     isEnabledLinebreaksInComments: configManager.getConfig('markdown', 'markdown:isEnabledLinebreaksInComments'),
     adminPreferredIndentSize: configManager.getConfig('markdown', 'markdown:adminPreferredIndentSize'),
     isIndentSizeForced: configManager.getConfig('markdown', 'markdown:isIndentSizeForced'),
+    isAllReplyShown: configManager.getConfig('crowi', 'customize:isAllReplyShown'),
 
     plantumlUri: process.env.PLANTUML_URI ?? null,
     blockdiagUri: process.env.BLOCKDIAG_URI ?? null,