Proyectos de Subversion LeadersLinked - SPA

import React, { useEffect } from 'react'
import { useDispatch } from 'react-redux'
import { Alert } from 'react-bootstrap'
import { styled } from '@mui/material'

import { removeNotification } from '@app/redux/notification/notification.actions'

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 dispatch = useDispatch()

  let closeTimeOut = null

  useEffect(() => {
    closeTimeOut = setTimeout(() => {
      dispatch(removeNotification(id))
    }, 3000)

    return () => {
      clearTimeout(closeTimeOut)
    }
  }, [])

  return (
    <AlertContainer variant={style} className='alert' transition>
      <p>{msg}</p>
    </AlertContainer>
  )
}

export default AlertComponent