comment.component.tsx in decidim-0.3.0

- old
+ new

@@ -40,44 +40,82 @@
     isRootComment: false,
     session: null,
     votable: false,
   };
 
+  public commentNode: HTMLElement;
+
   constructor(props: CommentProps) {
     super(props);
 
     this.state = {
       showReplyForm: false,
     };
   }
 
   public componentDidMount() {
+    const { comment: { id } } = this.props;
+    const hash = document.location.hash;
+    const regex = new RegExp(`#comment_${id}`);
+
+    function scrollTo(element: Element, to: number, duration: number) {
+      if (duration <= 0) {
+        return;
+      }
+      const difference = to - element.scrollTop;
+      const perTick = difference / duration * 10;
+
+      setTimeout(() => {
+          element.scrollTop = element.scrollTop + perTick;
+          if (element.scrollTop === to) {
+            return;
+          }
+          scrollTo(element, to, duration - 10);
+      }, 10);
+    }
+
+    if (regex.test(hash)) {
+      scrollTo(document.body, this.commentNode.offsetTop, 200);
+    }
+
     if (window.$(document).foundation) {
-      const { comment: { id } } = this.props;
       window.$(`#flagModalComment${id}`).foundation();
     }
   }
 
+  public getNodeReference = (commentNode: HTMLElement) => this.commentNode = commentNode;
+
   public render(): JSX.Element {
     const { session, comment: { id, author, body, createdAt }, articleClassName } = this.props;
     const formattedCreatedAt = ` ${moment(createdAt).format("LLL")}`;
     let modalName = "loginModal";
 
     if (session && session.user) {
       modalName = `flagModalComment${id}`;
     }
 
     return (
-      <article id={`comment_${id}`} className={articleClassName}>
+      <article id={`comment_${id}`} className={articleClassName} ref={this.getNodeReference}>
         <div className="comment__header">
           <div className="author-data">
             <div className="author-data__main">
               <div className="author author--inline">
                 <a className="author__avatar">
                   <img src={author.avatarUrl} alt="author-avatar" />
                 </a>
-                <a className="author__name">{author.name}</a>
+                { author.deleted ?
+                    <span className="label label--small label--basic">{I18n.t("components.comment.deleted_user")}</span> :
+                    <a className="author__name">{author.name}</a>
+                }
+                { !author.isUser && author.isVerified &&
+                  <span>
+                    &nbsp;
+                    <span className="label success label--small">
+                      {I18n.t("components.comment.verified_user_group")}
+                    </span>
+                  </span>
+                }
                 <time dateTime={createdAt}>{formattedCreatedAt}</time>
               </div>
             </div>
             <div className="author-data__extra">
               <button type="button" title={I18n.t("components.comment.report.title")} data-open={modalName}>
@@ -242,10 +280,10 @@
    * @private
    * @returns {Void|DOMElement} - The alignment's badge or not
    */
   private _renderAlignmentBadge() {
     const { comment: { alignment } } = this.props;
-    const spanClassName = classnames("label", {
+    const spanClassName = classnames("label alignment", {
       success: alignment === 1,
       alert: alignment === -1,
     });
 
     let label = "";