import React, { Component, PropTypes } from 'react';
import styles from '../../chat.scss';
import MdBlock from 'react-icons/lib/md/block';
import MdClose from 'react-icons/lib/md/close';
import MdReplay from 'react-icons/lib/md/replay';

export default class Ban extends Component {
  ban = (e) => {
    const message = this.props.message;
    let banned = confirm(message.name + ' will be banned for this discussion');
    if (banned === true) {
      this.props.onBan(message.id, () => {
        const node = e.currentTarget;
        node.innerHTML = 'Banned';
        node.style.color = '#bbb';
        node.style.cursor = 'default';
        node.onclick = function (event) {
          event.stopPropagation();
        };
      });
    }
  };
  render() {
    const { message, isMine, onRestore } = this.props;
    return (
    <div className={styles.restoreMsg}>
      <div>
        <MdClose />
        <span>Message deleted</span>
      </div>
            <span onClick={onRestore}>
              <MdReplay />
              <span>Restore the message</span>
            </span>
      {isMine(message.sender) ?
        null :
        <span>
          <span style={{ color: '#bbb' }}> | </span>
          <span onClick={this.ban}>
            <MdBlock />
            <span>Ban for an hour</span>
          </span>
        </span>
      }
    </div>
    );
  }
}

Ban.propTypes = {
  message: PropTypes.object,
  onBan: PropTypes.func,
  isMine: PropTypes.func,
  onRestore: PropTypes.func,
  deleted: PropTypes.bool
};
@@ -276,16 +276,175 @@
 onent %7B%0A
+  constructor(props) %7B%0A    super(props);%0A    this.state = %7B%0A      banned: (%3Cspan onClick=%7Bthis.ban%7D%3E%3CMdBlock /%3E%3Cspan%3EBan for an hour%3C/span%3E%3C/span%3E)%0A    %7D;%0A  %7D%0A
   ban = 
@@ -444,17 +444,16 @@
  ban = (
-e
 ) =%3E %7B%0A 
@@ -653,135 +653,80 @@
     
-const node = e.currentTarget;%0A        node.innerHTML = 'Banned';%0A        node.
+this.setState(%7B%0A          banned: (%3Cspan 
 style
-.
+=%7B%7B 
 color
- =
+:
  '#bbb'
-;%0A        node.style.
+, 
 cursor
- =
+:
  'de
@@ -735,86 +735,26 @@
 ult'
-;%0A        node.onclick = function (event) %7B%0A          event.stopPropagation();
+ %7D%7D%3EBanned%3C/span%3E)
 %0A   
@@ -755,24 +755,25 @@
 %3E)%0A        %7D
+)
 ;%0A      %7D);%0A
@@ -1248,116 +1248,27 @@
     
-%3Cspan onClick=%7Bthis.ban%7D%3E%0A            %3CMdBlock /%3E%0A            %3Cspan%3EBan for an hour%3C/span%3E%0A          %3C/span%3E
+%7Bthis.state.banned%7D
 %0A   

Refactor Ban component