ensure to create link to users page with UserPicture component

src/client/js/components/PageAttachment/Attachment.js

@@ -1,8 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import User from '../User/User';
-
 export default class Attachment extends React.Component {
 
   constructor(props) {

src/client/js/components/PageAttachment/DeleteAttachmentModal.js

@@ -3,8 +3,6 @@ import React from 'react';
 import Button from 'react-bootstrap/es/Button';
 import Modal from 'react-bootstrap/es/Modal';
 
-import User from '../User/User';
-
 export default class DeleteAttachmentModal extends React.Component {
 
   constructor(props) {

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

@@ -121,16 +121,13 @@ export default class Comment extends React.Component {
     const rootClassName = this.getRootClassName();
     const commentDate = dateFnsFormat(comment.createdAt, 'YYYY/MM/DD HH:mm');
     const commentBody = isMarkdown ? this.renderRevisionBody() : ReactUtils.nl2br(comment.comment);
-    const creatorsPage = `/user/${creator.username}`;
     const revHref = `?revision=${comment.revision}`;
     const revFirst8Letters = comment.revision.substr(-8);
     const revisionLavelClassName = this.getRevisionLabelClassName();
 
     return (
       <div className={rootClassName}>
-        <a href={creatorsPage}>
-          <UserPicture user={creator} />
-        </a>
+        <UserPicture user={creator} />
         <div className="page-comment-main">
           <div className="page-comment-creator">
             <Username user={creator} />

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

@@ -261,9 +261,7 @@ export default class CommentForm extends React.Component {
               { isLayoutTypeGrowi
                 && (
                 <div className="comment-form-user">
-                  <a href={creatorsPage}>
-                    <UserPicture user={user} />
-                  </a>
+                  <UserPicture user={user} />
                 </div>
                 )
               }

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

@@ -8,6 +8,7 @@ import dateFnsFormat from 'date-fns/format';
 
 import ReactUtils from '../ReactUtils';
 import UserPicture from '../User/UserPicture';
+import Username from '../User/Username';
 
 export default class DeleteCommentModal extends React.Component {
 
@@ -43,7 +44,7 @@ export default class DeleteCommentModal extends React.Component {
           </Modal.Title>
         </Modal.Header>
         <Modal.Body>
-          <UserPicture user={comment.creator} size="xs" /> <strong>{comment.creator.username}</strong> wrote on {commentDate}:
+          <UserPicture user={comment.creator} size="xs" /> <strong><Username user={comment.creator}></Username></strong> wrote on {commentDate}:
           <p className="well well-sm comment-body m-t-5">{commentBody}</p>
         </Modal.Body>
         <Modal.Footer>

src/client/js/components/SearchTypeahead.js

@@ -151,7 +151,7 @@ export default class SearchTypeahead extends React.Component {
     const page = option;
     return (
       <span>
-        <UserPicture user={page.lastUpdateUser} size="sm" />
+        <UserPicture user={page.lastUpdateUser} size="sm" withoutLink />
         <PagePath page={page} />
         <PageListMeta page={page} />
       </span>

src/client/js/components/User/UserPicture.jsx

@@ -40,14 +40,21 @@ export default class UserPicture extends React.Component {
 
   render() {
     const user = this.props.user;
+    const href = `/user/${user.username}`;
 
-    return (
+    const imgElem = (
       <img
         src={this.getUserPicture(user)}
         alt={user.username}
         className={this.getClassName()}
       />
     );
+
+    return (
+      (this.props.withoutLink)
+        ? <span>{imgElem}</span>
+        : <a href={href}>{imgElem}</a>
+    );
   }
 
 }
@@ -55,6 +62,7 @@ export default class UserPicture extends React.Component {
 UserPicture.propTypes = {
   user: PropTypes.object.isRequired,
   size: PropTypes.string,
+  withoutLink: PropTypes.bool,
 };
 
 UserPicture.defaultProps = {

src/client/js/components/User/UserPictureList.jsx

@@ -30,13 +30,11 @@ export default class UserPictureList extends React.Component {
       const tooltip = <Tooltip id={`tooltip-${user._id}`}>@{user.username}<br />{user.name}</Tooltip>;
 
       return (
-        <a key={user._id} data-user-id={user._id} href={`/user/${user.username}`}>
-          <OverlayTrigger overlay={tooltip} placement="bottom">
-            <span key={`span-${user._id}`}>{/* workaround from https://github.com/react-bootstrap/react-bootstrap/issues/2208#issuecomment-301737531 */}
-              <UserPicture user={user} size="xs" ref={`userPicture-${user._id}`} />
-            </span>
-          </OverlayTrigger>
-        </a>
+        <OverlayTrigger key={user._id} overlay={tooltip} placement="bottom">
+          <span key={`span-${user._id}`}>{/* workaround from https://github.com/react-bootstrap/react-bootstrap/issues/2208#issuecomment-301737531 */}
+            <UserPicture user={user} size="xs" ref={`userPicture-${user._id}`} />
+          </span>
+        </OverlayTrigger>
       );
     });