add possibility to get last 10 user comments

web/app/common/api.js

@@ -22,6 +22,8 @@ export const counts = ({ urls, siteId }) => fetcher.post({
 
 export const getComment = ({ id }) => fetcher.get(`/id/${id}?url=${url}`);
 
+export const getUserComments = ({ user, limit }) => fetcher.get(`/comments?user=${user}&limit=${limit}`)
+
 export const vote = ({ id, url, value }) => fetcher.put({
   url: `/vote/${id}?url=${url}&vote=${value}`,
   withCredentials: true,
@@ -109,6 +111,7 @@ export default {
   last,
   counts,
   getComment,
+  getUserComments,
   vote,
   send,
   edit,

web/app/components/comment/__body/comment__body.scss

@@ -0,0 +1,5 @@
+.comment__body {
+  + .comment__user-info {
+    margin-top: 8px;
+  }
+}

web/app/components/comment/_collapsed/comment_collapsed.scss

@@ -1,5 +1,7 @@
 .comment_collapsed {
-  .comment__text, .comment__actions {
+  > .comment__body {
-    display: none;
+    .comment__text, .comment__actions {
+      display: none;
+    }
   }
 }

web/app/components/comment/_view/_user/comment_view_user.scss

@@ -0,0 +1,11 @@
+.comment_view_user {
+  .comment__time {
+    margin-left: 0;
+  }
+
+  &.comment_collapsed {
+    .comment__text, .comment__actions {
+      display: block;
+    }
+  }
+}

web/app/components/comment/comment.jsx

@@ -6,6 +6,7 @@ import { url } from 'common/settings';
 import store from 'common/store';
 
 import Input from 'components/input';
+import UserInfo from 'components/user-info';
 
 export default class Comment extends Component {
   constructor(props) {
@@ -14,8 +15,8 @@ export default class Comment extends Component {
     this.state = {
       isReplying: false,
       isEditing: false,
-      isUserIdVisible: false,
       isUserVerified: false,
+      isUserInfoShown: false,
       editTimeLeft: null,
     };
 
@@ -28,7 +29,7 @@ export default class Comment extends Component {
     this.toggleEditing = this.toggleEditing.bind(this);
     this.toggleReplying = this.toggleReplying.bind(this);
     this.toggleCollapse = this.toggleCollapse.bind(this);
-    this.toggleUserIdVisibility = this.toggleUserIdVisibility.bind(this);
+    this.toggleUserInfoVisibility = this.toggleUserInfoVisibility.bind(this);
     this.scrollToParent = this.scrollToParent.bind(this);
     this.onEdit = this.onEdit.bind(this);
     this.onReply = this.onReply.bind(this);
@@ -126,8 +127,8 @@ export default class Comment extends Component {
     }
   }
 
-  toggleUserIdVisibility() {
+  toggleUserInfoVisibility() {
-    this.setState({ isUserIdVisible: !this.state.isUserIdVisible });
+    this.setState({ isUserInfoShown: !this.state.isUserInfoShown });
   }
 
   onPinClick() {
@@ -301,7 +302,6 @@ export default class Comment extends Component {
 
   render(props, {
     guest,
-    isUserIdVisible,
     userBlocked,
     pinned,
     score,
@@ -312,6 +312,7 @@ export default class Comment extends Component {
     isEditing,
     isUserVerified,
     editTimeLeft,
+    isUserInfoShown,
   }) {
     const { data, mods = {} } = props;
     const isAdmin = !guest && store.get('user').admin;
@@ -389,24 +390,28 @@ export default class Comment extends Component {
       <article className={b('comment', props, defaultMods)} id={mods.disabled ? null : `${COMMENT_NODE_CLASSNAME_PREFIX}${o.id}`}>
         <div className="comment__body">
           <div className="comment__info">
-            <img
-              className={b('comment__avatar', {}, { default: o.user.isDefaultPicture })}
-              src={o.user.isDefaultPicture ? require('./__avatar/comment__avatar.svg') : o.user.picture}
-              alt=""
-            />
-
-            <span
-              className="comment__username"
-              title={o.user.id}
-              onClick={this.toggleUserIdVisibility}
-            >{o.user.name}</span>
-
             {
-              isUserIdVisible && <span className="comment__user-id"> ({o.user.id})</span>
+              mods.view !== 'user' && (
+                <img
+                  className={b('comment__avatar', {}, { default: o.user.isDefaultPicture })}
+                  src={o.user.isDefaultPicture ? require('./__avatar/comment__avatar.svg') : o.user.picture}
+                  alt=""
+                />
+              )
             }
 
             {
-              isAdmin && (
+              mods.view !== 'user' && (
+                <span
+                  className="comment__username"
+                  title={o.user.id}
+                  onClick={this.toggleUserInfoVisibility}
+                >{o.user.name}</span>
+              )
+            }
+
+            {
+              isAdmin && mods.view !== 'user' && (
                 <span
                   onClick={o.user.verified ? this.onUnverifyClick : this.onVerifyClick}
                   aria-label="Toggle verification"
@@ -417,7 +422,7 @@ export default class Comment extends Component {
             }
 
             {
-              !isAdmin && !!o.user.verified && (
+              !isAdmin && !!o.user.verified && mods.view !== 'user' && (
                 <span
                   title="Verified user"
                   className={b('comment__verification', {}, { active: true })}
@@ -428,7 +433,7 @@ export default class Comment extends Component {
             <a href={`${o.locator.url}#${COMMENT_NODE_CLASSNAME_PREFIX}${o.id}`} className="comment__time">{o.time}</a>
 
             {
-              mods.level > 0 && (
+              mods.level > 0 && mods.view !== 'user' && (
                 <a
                   className="comment__link-to-parent"
                   href={`${o.locator.url}#${COMMENT_NODE_CLASSNAME_PREFIX}${o.pid}`}
@@ -440,7 +445,7 @@ export default class Comment extends Component {
             }
 
             {
-              isAdmin && userBlocked && (
+              isAdmin && userBlocked && mods.view !== 'user' && (
                 <span className="comment__status">Blocked</span>
               )
             }
@@ -452,7 +457,7 @@ export default class Comment extends Component {
             }
 
             {
-              !mods.disabled && (
+              !mods.disabled && mods.view !== 'user' && (
                 <span
                   className={b('comment__action', {}, { type: 'collapse', selected: mods.collapsed })}
                   tabIndex="0"
@@ -494,7 +499,7 @@ export default class Comment extends Component {
 
           <div className="comment__actions">
             {
-              !deleted && !mods.disabled && !isGuest && (
+              !deleted && !mods.disabled && !isGuest && mods.view !== 'user' && (
                 <span
                   className="comment__action"
                   role="button"
@@ -505,7 +510,7 @@ export default class Comment extends Component {
             }
 
             {
-              !deleted && !mods.disabled && !!o.orig && isCurrentUser && (!!editTimeLeft || isEditing) && (
+              !deleted && !mods.disabled && !!o.orig && isCurrentUser && (!!editTimeLeft || isEditing) && mods.view !== 'user' && (
                 <span
                   className="comment__action comment__action_type_edit"
                   role="button"
@@ -579,7 +584,13 @@ export default class Comment extends Component {
         </div>
 
         {
-          isReplying && (
+          isUserInfoShown && (
+            <UserInfo mix="comment__user-info" user={o.user} onClose={this.toggleUserInfoVisibility}/>
+          )
+        }
+
+        {
+          isReplying && mods.view !== 'user' && (
             <Input
               mix="comment__input"
               onSubmit={this.onReply}
@@ -591,7 +602,7 @@ export default class Comment extends Component {
         }
 
         {
-          isEditing && (
+          isEditing && mods.view !== 'user' && (
             <Input
               mix="comment__input"
               mods={{ mode: 'edit' }}

web/app/components/comment/comment.scss

@@ -10,7 +10,7 @@
 
   @media (hover: hover) {
     &:hover {
-      .comment__controls {
+      > .comment__body .comment__actions .comment__controls {
         opacity: 1;
       }
     }

web/app/components/comment/index.js

@@ -11,6 +11,7 @@ require('./__action/_type/_edit/comment__action_type_edit.scss');
 require('./__avatar/comment__avatar.scss');
 require('./__avatar/_default/comment__avatar_default.scss');
 
+require('./__body/comment__body.scss');
 require('./__control/comment__control.scss');
 require('./__controls/comment__controls.scss');
 require('./__info/comment__info.scss');
@@ -46,3 +47,4 @@ require('./_useless/comment_useless.scss');
 
 require('./_view/_admin/comment_view_admin.scss');
 require('./_view/_preview/comment_view_preview.scss');
+require('./_view/_user/comment_view_user.scss');

web/app/components/user-info/__close/user-info__close.scss

@@ -0,0 +1,10 @@
+.user-info__close {
+  font-size: 14px;
+  line-height: 18px;
+  cursor: pointer;
+  color: #888;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}

web/app/components/user-info/__id/user-info__id.scss

@@ -0,0 +1,7 @@
+.user-info__id {
+  margin: 0 0 18px;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 18px;
+  color: #888;
+}

web/app/components/user-info/__preloader/user-info__preloader.scss

@@ -0,0 +1,3 @@
+.user-info__preloader {
+  margin: 0 auto 18px;
+}

web/app/components/user-info/__title/user-info__title.scss

@@ -0,0 +1,6 @@
+.user-info__title {
+  margin: 6px 0 0;
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 20px;
+}

web/app/components/user-info/index.js

@@ -0,0 +1,8 @@
+export { default } from './user-info';
+
+require('./user-info.scss');
+
+require('./__close/user-info__close.scss');
+require('./__id/user-info__id.scss');
+require('./__preloader/user-info__preloader.scss');
+require('./__title/user-info__title.scss');

web/app/components/user-info/user-info.jsx

@@ -0,0 +1,60 @@
+import { h, Component } from 'preact';
+
+import api from 'common/api';
+
+import Comment from 'components/comment';
+import Preloader from 'components/preloader';
+
+export default class UserInfo extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      comments: [],
+      isLoading: false,
+    };
+  }
+
+  componentWillMount() {
+    const { user: { id } } = this.props;
+
+    // TODO: change Comments to comments
+    api.getUserComments({ user: id, limit: 10 })
+      .then(({ Comments = [] }) => this.setState({ comments: Comments }))
+      .finally(() => this.setState({ isLoading: false }));
+  }
+
+  render(props, { comments, isLoading }) {
+    const { user: { name, id }, onClose } = props;
+
+    return (
+      <div className={b('user-info', props)}>
+        <p className="user-info__title">Last comments by {name}</p>
+        <p className="user-info__id">{id}</p>
+
+        {
+          isLoading && (
+            <Preloader mix="user-info__preloader"/>
+          )
+        }
+
+        {
+          !isLoading && (
+            <div>
+              {
+                comments.map(comment => (
+                  <Comment
+                    data={comment}
+                    mods={{ level: 0, view: 'user' }}
+                  />
+                ))
+              }
+            </div>
+          )
+        }
+
+        <div><span className="user-info__close" onClick={onClose}>Close</span></div>
+      </div>
+    );
+  }
+}

web/app/components/user-info/user-info.scss

@@ -0,0 +1,7 @@
+.user-info {
+  padding: 10px 20px;
+  overflow: hidden;
+  background: #fafafa;
+  border: 1px solid #efefef;
+  border-radius: 2px;
+}