add support for pin to comment component

web/app/components/comment/__action/comment__action.scss

@@ -0,0 +1,4 @@
+.comment__action {
+  margin-left: 8px;
+  cursor: pointer;
+}

web/app/components/comment/__controls/_view/_admin/comment__controls_view_admin.scss

@@ -0,0 +1,3 @@
+.comment__controls_view_admin {
+  color: #ff4700;
+}

web/app/components/comment/__controls/comment__controls.scss

@@ -1,6 +1,5 @@
 .comment__controls {
   display: inline-block;
-  margin-left: 8px;
   color: #06c5c5;
 
   @media (hover: hover) {

web/app/components/comment/__reply/comment__reply.scss

@@ -1,3 +0,0 @@
-.comment__reply {
-  cursor: pointer;
-}

web/app/components/comment/_pinned/comment_pinned.scss

@@ -0,0 +1,7 @@
+.comment_pinned {
+  &, &.comment_view_admin {
+    .comment__username {
+      color: #FFD700;
+    }
+  }
+}

web/app/components/comment/comment.jsx

@@ -14,24 +14,29 @@ export default class Comment extends Component {
       isInputVisible: false,
     };
 
-    this.updateScoreState(props);
+    this.updateState(props);
 
     this.decreaseScore = this.decreaseScore.bind(this);
     this.increaseScore = this.increaseScore.bind(this);
     this.onReplyClick = this.onReplyClick.bind(this);
     this.onReply = this.onReply.bind(this);
+    this.onPinClick = this.onPinClick.bind(this);
+    this.onUnpinClick = this.onUnpinClick.bind(this);
+    this.onBlockClick = this.onBlockClick.bind(this);
+    this.onDeleteClick = this.onDeleteClick.bind(this);
   }
 
   componentWillReceiveProps(nextProps) {
-    this.updateScoreState(nextProps);
+    this.updateState(nextProps);
   }
 
-  updateScoreState(props) {
-    const { score = 0, votes = [] } = props.data;
+  updateState(props) {
+    const { pin, score = 0, votes = [] } = props.data;
     const userId = store.get('user').id;
 
     this.setState({
       score: score,
+      pinned: !!pin,
       scoreIncreased: userId in votes && votes[userId],
       scoreDecreased: userId in votes && !votes[userId],
     });
@@ -43,6 +48,34 @@ export default class Comment extends Component {
     this.setState({ isInputVisible: !isInputVisible });
   }
 
+  onPinClick() {
+    const { id } = this.props.data;
+
+    this.setState({ pinned: true });
+
+    api.pin({ id, url }).then(() => {
+      api.getComment({ id }).then(comment => store.replaceComment(comment));
+    });
+  }
+
+  onUnpinClick() {
+    const { id } = this.props.data;
+
+    this.setState({ pinned: false });
+
+    api.pin({ id, url }).then(() => {
+      api.getComment({ id }).then(comment => store.replaceComment(comment));
+    });
+  }
+
+  onBlockClick() {
+    console.log('block');
+  }
+
+  onDeleteClick() {
+    console.log('delete');
+  }
+
   increaseScore() {
     const { score, scoreIncreased, scoreDecreased } = this.state;
     const { id } = this.props.data;
@@ -82,8 +115,9 @@ export default class Comment extends Component {
     this.setState({ isInputVisible: false });
   }
 
-  render(props, { score, scoreIncreased, scoreDecreased, isInputVisible }) {
+  render(props, { pinned, score, scoreIncreased, scoreDecreased, isInputVisible }) {
     const { data, mix, mods = {} } = props;
+    const isAdmin = store.get('user').admin;
 
     const time = new Date(data.time);
     // TODO: which format for datetime should we choose?
@@ -100,9 +134,14 @@ export default class Comment extends Component {
       },
     };
 
-    return (
+    const defaultMods = {
+      pinned,
       // TODO: add default view mod or don't?
-      <div className={b('comment', props, { view: data.user.admin ? 'admin' : null })}>
+      view: o.user.admin ? 'admin' : null,
+    };
+
+    return (
+      <div className={b('comment', props, defaultMods)}>
         <div className="comment__body">
           <img src={o.user.picture} alt="" className="comment__avatar"/>
 
@@ -126,8 +165,31 @@ export default class Comment extends Component {
               <span className="comment__time">{o.time}</span>
 
               <span className="comment__controls">
-              <span className="comment__reply" onClick={this.onReplyClick}>reply</span>
-            </span>
+                <span className="comment__action" onClick={this.onReplyClick}>reply</span>
+              </span>
+
+              {
+                isAdmin &&
+                (
+                  <span className={b('comment__controls', {}, { view: 'admin' })}>
+
+                    {
+                      !pinned && (
+                        <span className="comment__action" onClick={this.onPinClick}>pin</span>
+                      )
+                    }
+
+                    {
+                      pinned && (
+                        <span className="comment__action" onClick={this.onUnpinClick}>unpin</span>
+                      )
+                    }
+
+                    <span className="comment__action" onClick={this.onBlockClick}>block</span>
+                    <span className="comment__action" onClick={this.onDeleteClick}>delete</span>
+                  </span>
+                )
+              }
             </div>
 
             <div className="comment__text" dangerouslySetInnerHTML={{ __html: o.text }}/>

web/app/components/comment/index.js

@@ -2,12 +2,15 @@ export { default } from './comment';
 
 require('./comment.scss');
 
+require('./__action/comment__action.scss');
 require('./__avatar/comment__avatar.scss');
 require('./__body/comment__body.scss');
+
 require('./__controls/comment__controls.scss');
+require('./__controls/_view/_admin/comment__controls_view_admin.scss');
+
 require('./__info/comment__info.scss');
 require('./__input/comment__input.scss');
-require('./__reply/comment__reply.scss');
 require('./__score/comment__score.scss');
 require('./__score-sign/comment__score-sign.scss');
 require('./__score-value/comment__score-value.scss');
@@ -22,4 +25,6 @@ require('./__vote/_type/_up/comment__vote_type_up.scss');
 
 require('./_level/comment_level.scss');
 
+require('./_pinned/comment_pinned.scss');
+
 require('./_view/_admin/comment_view_admin.scss');