{"size": 1511, "ext": "js", "max_stars_repo_path": "src/components/notification.js", "max_stars_repo_name": "michalhromas1/personal-portfolio", "max_stars_repo_stars_event_min_datetime": "2020-04-26T16:53:08.000Z", "max_stars_repo_stars_event_max_datetime": "2020-04-26T16:53:08.000Z", "max_issues_repo_path": "src/components/notification.js", "max_issues_repo_name": "michalhromas1/personal-portfolio", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/notification.js", "max_forks_repo_name": "michalhromas1/personal-portfolio", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 1, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 24.7704918033, "max_line_length": 74, "alphanum_fraction": 0.5883520847}
import React, { Component } from "react"
import PropTypes from "prop-types"
import { injectIntl } from "gatsby-plugin-intl"

class Notification extends Component {
  duration = 500

  state = {
    hide: false,
  }

  hide = () => {
    this.setState({ hide: true })
    setTimeout(() => {
      this.props.hidden()
    }, this.duration)
  }

  render() {
    const { hide } = this.state
    const { text, type, delay } = this.props.notification
    const { intl } = this.props
    let classList = "notification"
    classList += type ? ` notification--${type}` : ""
    classList += delay ? ` notification--delay` : ""
    classList += hide ? " notification--hide" : ""
    return (
      <div
        className={classList}
        style={{ animationDuration: `${this.duration}ms` }}
      >
        <p
          className="notification__text"
          dangerouslySetInnerHTML={{
            __html: text,
          }}
        ></p>
        <button
          className="notification__close"
          onClick={this.hide}
          title={intl.formatMessage({ id: "notifications.close--title" })}
        >
          <div className="notification__close-line"></div>
          <div className="notification__close-line"></div>
        </button>
      </div>
    )
  }
}

Notification.propTypes = {
  notification: PropTypes.exact({
    text: PropTypes.string.isRequired,
    type: PropTypes.string,
    delay: PropTypes.bool,
  }).isRequired,
  hidden: PropTypes.func,
}

export default injectIntl(Notification)
