From 5dcd7aea4e50bc8ec0ff03157a606144b104fadc Mon Sep 17 00:00:00 2001
From: igoradamenko <mail@igoradamenko.com>
Date: Mon, 18 Jun 2018 23:28:16 +0300
Subject: [PATCH] add possibility to get last 10 user comments

---
 web/app/common/api.js                         |  3 +
 .../comment/__body/comment__body.scss         |  5 ++
 .../comment/_collapsed/comment_collapsed.scss |  6 +-
 .../_view/_user/comment_view_user.scss        | 11 ++++
 web/app/components/comment/comment.jsx        | 65 +++++++++++--------
 web/app/components/comment/comment.scss       |  2 +-
 web/app/components/comment/index.js           |  2 +
 .../user-info/__close/user-info__close.scss   | 10 +++
 .../user-info/__id/user-info__id.scss         |  7 ++
 .../__preloader/user-info__preloader.scss     |  3 +
 .../user-info/__title/user-info__title.scss   |  6 ++
 web/app/components/user-info/index.js         |  8 +++
 web/app/components/user-info/user-info.jsx    | 60 +++++++++++++++++
 web/app/components/user-info/user-info.scss   |  7 ++
 14 files changed, 165 insertions(+), 30 deletions(-)
 create mode 100644 web/app/components/comment/__body/comment__body.scss
 create mode 100644 web/app/components/comment/_view/_user/comment_view_user.scss
 create mode 100644 web/app/components/user-info/__close/user-info__close.scss
 create mode 100644 web/app/components/user-info/__id/user-info__id.scss
 create mode 100644 web/app/components/user-info/__preloader/user-info__preloader.scss
 create mode 100644 web/app/components/user-info/__title/user-info__title.scss
 create mode 100644 web/app/components/user-info/index.js
 create mode 100644 web/app/components/user-info/user-info.jsx
 create mode 100644 web/app/components/user-info/user-info.scss

diff --git a/web/app/common/api.js b/web/app/common/api.js
index bd1007eb..165c33d3 100644
--- a/web/app/common/api.js
+++ b/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,
diff --git a/web/app/components/comment/__body/comment__body.scss b/web/app/components/comment/__body/comment__body.scss
new file mode 100644
index 00000000..87324a34
--- /dev/null
+++ b/web/app/components/comment/__body/comment__body.scss
@@ -0,0 +1,5 @@
+.comment__body {
+  + .comment__user-info {
+    margin-top: 8px;
+  }
+}
diff --git a/web/app/components/comment/_collapsed/comment_collapsed.scss b/web/app/components/comment/_collapsed/comment_collapsed.scss
index fd690f61..5eef321d 100644
--- a/web/app/components/comment/_collapsed/comment_collapsed.scss
+++ b/web/app/components/comment/_collapsed/comment_collapsed.scss
@@ -1,5 +1,7 @@
 .comment_collapsed {
-  .comment__text, .comment__actions {
-    display: none;
+  > .comment__body {
+    .comment__text, .comment__actions {
+      display: none;
+    }
   }
 }
diff --git a/web/app/components/comment/_view/_user/comment_view_user.scss b/web/app/components/comment/_view/_user/comment_view_user.scss
new file mode 100644
index 00000000..e3c3e94a
--- /dev/null
+++ b/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;
+    }
+  }
+}
diff --git a/web/app/components/comment/comment.jsx b/web/app/components/comment/comment.jsx
index d36a2eab..6b6cb89b 100644
--- a/web/app/components/comment/comment.jsx
+++ b/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() {
-    this.setState({ isUserIdVisible: !this.state.isUserIdVisible });
+  toggleUserInfoVisibility() {
+    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' }}
diff --git a/web/app/components/comment/comment.scss b/web/app/components/comment/comment.scss
index f897b3d0..6f502f36 100644
--- a/web/app/components/comment/comment.scss
+++ b/web/app/components/comment/comment.scss
@@ -10,7 +10,7 @@
 
   @media (hover: hover) {
     &:hover {
-      .comment__controls {
+      > .comment__body .comment__actions .comment__controls {
         opacity: 1;
       }
     }
diff --git a/web/app/components/comment/index.js b/web/app/components/comment/index.js
index c2b83915..33518776 100644
--- a/web/app/components/comment/index.js
+++ b/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');
diff --git a/web/app/components/user-info/__close/user-info__close.scss b/web/app/components/user-info/__close/user-info__close.scss
new file mode 100644
index 00000000..161d270e
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/web/app/components/user-info/__id/user-info__id.scss b/web/app/components/user-info/__id/user-info__id.scss
new file mode 100644
index 00000000..a8911a86
--- /dev/null
+++ b/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;
+}
diff --git a/web/app/components/user-info/__preloader/user-info__preloader.scss b/web/app/components/user-info/__preloader/user-info__preloader.scss
new file mode 100644
index 00000000..e9547920
--- /dev/null
+++ b/web/app/components/user-info/__preloader/user-info__preloader.scss
@@ -0,0 +1,3 @@
+.user-info__preloader {
+  margin: 0 auto 18px;
+}
diff --git a/web/app/components/user-info/__title/user-info__title.scss b/web/app/components/user-info/__title/user-info__title.scss
new file mode 100644
index 00000000..aa6123f2
--- /dev/null
+++ b/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;
+}
diff --git a/web/app/components/user-info/index.js b/web/app/components/user-info/index.js
new file mode 100644
index 00000000..7b131806
--- /dev/null
+++ b/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');
diff --git a/web/app/components/user-info/user-info.jsx b/web/app/components/user-info/user-info.jsx
new file mode 100644
index 00000000..92bd7c76
--- /dev/null
+++ b/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>
+    );
+  }
+}
diff --git a/web/app/components/user-info/user-info.scss b/web/app/components/user-info/user-info.scss
new file mode 100644
index 00000000..a176a70e
--- /dev/null
+++ b/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;
+}