app/frontend/comments/comments.component.tsx in decidim-comments-0.20.1 vs app/frontend/comments/comments.component.tsx in decidim-comments-0.21.0

@@ -10,15 +10,16 @@
 import {
   GetCommentsQuery,
   GetCommentsQueryVariables
 } from "../support/schema";
 
-const { I18n } = require("react-i18nify");
+const { I18n, Translate } = require("react-i18nify");
 
 interface CommentsProps extends GetCommentsQuery {
   loading?: boolean;
   orderBy: string;
+  singleCommentId?: string;
   reorderComments: (orderBy: string) => void;
 }
 
 /**
  * The core class of the Decidim Comments engine.
@@ -35,13 +36,16 @@
       comments: []
     }
   };
 
   public render() {
-    const { commentable: { comments, totalCommentsCount = 0, userAllowedToComment }, reorderComments, orderBy, loading } = this.props;
+    const { commentable: { totalCommentsCount = 0 }, singleCommentId, loading } = this.props;
     let commentClasses = "comments";
     let commentHeader = I18n.t("components.comments.title", { count: totalCommentsCount });
+    if (singleCommentId && singleCommentId !== "") {
+      commentHeader = I18n.t("components.comments.comment_details_title");
+    }
 
     if (loading) {
       commentClasses += " loading-comments";
       commentHeader = I18n.t("components.comments.loading");
     }
@@ -51,25 +55,71 @@
         <section className={commentClasses}>
           <div className="row collapse order-by">
             <h2 className="order-by__text section-heading">
               {commentHeader}
             </h2>
-            <CommentOrderSelector
-              reorderComments={reorderComments}
-              defaultOrderBy={orderBy}
-            />
+            {this._renderCommentOrderSelector()}
           </div>
+          {this._renderSingleCommentWarning()}
           {this._renderBlockedCommentsWarning()}
           {this._renderCommentThreads()}
           {this._renderAddCommentForm()}
           {this._renderBlockedCommentsForUserWarning()}
         </section>
       </div>
     );
   }
 
   /**
+   * Renders warning message when viewing a single comment.
+   * @private
+   * @returns {Void|DOMElement} - A warning message or nothing.
+   */
+  private _renderSingleCommentWarning() {
+    const { singleCommentId, reorderComments, orderBy } = this.props;
+
+    if (singleCommentId && singleCommentId !== "") {
+      const newUrl = `${window.location.pathname}${window.location.search.replace(`commentId=${singleCommentId}`, "")}`;
+
+      return (
+        <div className="callout secondary">
+          <h5>{I18n.t("components.comments.single_comment_warning_title")}</h5>
+          <p>
+            <Translate
+              value="components.comments.single_comment_warning"
+              url={newUrl}
+              dangerousHTML={true}
+            />
+          </p>
+        </div>
+      );
+    }
+
+    return null;
+  }
+
+  /**
+   * Renders an order selector.
+   * @private
+   * @returns {Void|DOMElement} - A warning message or nothing.
+   */
+  private _renderCommentOrderSelector() {
+    const { singleCommentId, reorderComments, orderBy } = this.props;
+
+    if (singleCommentId && singleCommentId !== "") {
+      return null;
+    }
+
+    return (
+      <CommentOrderSelector
+        reorderComments={reorderComments}
+        defaultOrderBy={orderBy}
+      />
+    );
+  }
+
+  /**
    * Renders a warning message if the commentable doesn't accept new comments.
    * @private
    * @returns {Void|DOMElement} - A warning message or nothing.
    */
   private _renderBlockedCommentsWarning() {
@@ -133,13 +183,17 @@
    * If current user is present it renders the add comment form
    * @private
    * @returns {Void|ReactComponent} - A AddCommentForm component or nothing
    */
   private _renderAddCommentForm() {
-    const { session, commentable, orderBy } = this.props;
+    const { session, commentable, orderBy, singleCommentId } = this.props;
     const { acceptsNewComments, commentsHaveAlignment, userAllowedToComment } = commentable;
 
+    if (singleCommentId && singleCommentId !== "") {
+      return null;
+    }
+
     if (acceptsNewComments && userAllowedToComment) {
       return (
         <AddCommentForm
           session={session}
           commentable={commentable}
@@ -174,10 +228,11 @@
       return {
         loading,
         session,
         commentable,
         orderBy: ownProps.orderBy,
+        singleCommentId: ownProps.singleCommentId,
         reorderComments: (orderBy: string) => {
           return refetch({
             orderBy
           });
         }
@@ -185,23 +240,25 @@
     }
   }
 })(Comments);
 
 export interface CommentsApplicationProps extends GetCommentsQueryVariables {
+  singleCommentId: string;
   locale: string;
 }
 
 /**
  * Wrap the CommentsWithData component within an Application component to
  * connect it with Apollo client and store.
  * @returns {ReactComponent} - A component wrapped within an Application component
  */
-const CommentsApplication: React.SFC<CommentsApplicationProps> = ({ locale, commentableId, commentableType }) => (
+const CommentsApplication: React.SFC<CommentsApplicationProps> = ({ locale, commentableId, commentableType, singleCommentId }) => (
   <Application locale={locale}>
     <CommentsWithData
       commentableId={commentableId}
       commentableType={commentableType}
       orderBy="older"
+      singleCommentId={singleCommentId}
     />
   </Application>
 );
 
 export default CommentsApplication;