import React, { Component, PropTypes } from 'react'
import { Link } from 'react-router'

class Alert extends Component {
  static propTypes = {
    message: PropTypes.string.isRequired,
    status: PropTypes.string.isRequired,
    url: PropTypes.string
  }

  constructor() {
    super()

    this.state = {
      shown: true
    }

    this.hide = this.hide.bind(this)
  }

  hide() {
    this.setState({
      shown: false
    })
  }

  render() {
    return (
      <div>
        { this.state.shown ?
        <div className={`alert alert-dismissible fade in alert-${this.props.status}`} role="alert">
          <button className="close" data-dismiss="alert" aria-label="Close" onClick={this.hide}>
            <span aria-hidden="true">&times;</span>
          </button>
          { this.props.url ?
            <Link to={this.props.url} className="alert-link">
              {this.props.message}
            </Link>
            :
            <span>{this.props.message}</span>
          }
        </div>
        : null }
      </div>
    )
  }
}

export default Alert
@@ -795,16 +795,17 @@
 s.url ?%0A
+%0A
         
@@ -872,17 +872,56 @@
         
-%7B
+%3Cspan dangerouslySetInnerHTML=%7B%7B__html: 
 this.pro
@@ -931,16 +931,25 @@
 message%7D
+%7D%3E%3C/span%3E
 %0A       
@@ -996,10 +996,43 @@
 span
-%3E%7B
+ dangerouslySetInnerHTML=%7B%7B__html: 
 this
@@ -1046,16 +1046,18 @@
 message%7D
+%7D%3E
 %3C/span%3E%0A
@@ -1142,12 +1142,13 @@
 efault Alert
+%0A

allow html in alert #343