Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { useState, useEffect } from 'react'
import { useDispatch } from 'react-redux'
import { removeNotification } from '../../../redux/notification/notification.actions'
import Alert from 'react-bootstrap/Alert'
import styled from 'styled-components'

const AlertContainer = styled(Alert)`
  &.alert {
    transition: all 0.3s;
  }
  &.isShow {
    animation: slideIn 0.3s;
  }
  &.isHidden {
    animation: fadeOut 0.3s;
    animation-fill-mode: forwards;
  }

  @keyframes slideIn {
    0% {
      transform: translateY(-200%);
      opacity: 0;
    }
    100% {
      transform: translateY(0);
      opacity: 100;
    }
  }

  @keyframes fadeOut {
    0% {
      opacity: 100;
    }
    100% {
      opacity: 0;
    }
  }
`
const AlertComponent = ({ notification }) => {
  const { id, style, msg } = notification
  const [show, setShow] = useState(true)
  const dispatch = useDispatch()

  let closeTimeOut = null
  let removeNotificationTimeOut = null

  const closeAlertHandler = () => {
    setShow(false)
    removeNotificationTimeOut = setTimeout(() => {
      dispatch(removeNotification(id))
    }, 300)
  }

  useEffect(() => {
    closeTimeOut = setTimeout(() => {
      closeAlertHandler()
    }, 3000)
    return () => {
      clearTimeout(closeTimeOut)
      clearTimeout(removeNotificationTimeOut)
    }
  }, [])

  return (
    <AlertContainer
      variant={style}
      dismissible
      onClose={closeAlertHandler}
      transition
      className={`${show ? 'isShow' : 'isHidden'} alert`}
    >
      <p>{msg}</p>
    </AlertContainer>
  )
}

export default AlertComponent