add possibility to get last 10 user comments

2018-06-18 23:28:29 +03:00
parent 1c0e1a2b07
commit 5dcd7aea4e
14 changed files with 165 additions and 30 deletions
@@ -0,0 +1,10 @@
+.user-info__close {
+  font-size: 14px;
+  line-height: 18px;
+  cursor: pointer;
+  color: #888;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
@@ -0,0 +1,7 @@
+.user-info__id {
+  margin: 0 0 18px;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 18px;
+  color: #888;
+}
@@ -0,0 +1,3 @@
+.user-info__preloader {
+  margin: 0 auto 18px;
+}
@@ -0,0 +1,6 @@
+.user-info__title {
+  margin: 6px 0 0;
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 20px;
+}
@@ -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');
@@ -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>
+    );
+  }
+}
@@ -0,0 +1,7 @@
+.user-info {
+  padding: 10px 20px;
+  overflow: hidden;
+  background: #fafafa;
+  border: 1px solid #efefef;
+  border-radius: 2px;
+}