Use React to implement a Popup Queu to notifications, alerts, errors, etc

popup.tsx

import { Component } from 'react'
import styles from './Popup.module.css'

interface PopupProps {
  type: 'alert' | 'notification' | 'error'
  title: string
  body: string
  visibilityDuration?: number
}

interface PopupState {
  isVisible: boolean
}

class Popup extends Component<PopupProps, PopupState> {
  visibilityTimer: NodeJS.Timeout | null = null;

  constructor(props: PopupProps) {
    super(props)
    this.state = {
      isVisible: true,
    }
  }

  componentDidMount () {
    const { visibilityDuration } = this.props

    if (visibilityDuration && visibilityDuration > 0) {
      this.visibilityTimer = setTimeout(this.hidePopup, visibilityDuration)
    }
  }

  componentWillUnmount () {
    this.clearVisibilityTimer()
  }

  clearVisibilityTimer = () => {
    if (this.visibilityTimer) {
      clearTimeout(this.visibilityTimer)
    }
  };

  hidePopup = () => {
    this.setState({ isVisible: false }, this.clearVisibilityTimer)
  };

  render () {
    const { type, title, body } = this.props
    const { isVisible } = this.state

    return isVisible ? (
      <div className={styles.popup}>
        <div className={`${styles.popupContent} ${styles[type]}`}>
          <h2>{title}</h2>
          <p>{body}</p>
        </div>
      </div>
    ) : null
  }
}


export default Popup