Proyectos de Subversion LeadersLinked - Backend

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

const AlertContainer = styled.div`
  .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 = (props) => {
        // redux destructuring
        const { removeNotification } = props

        const { notification } = props
        const { id, style, msg } = notification
        const [show, setShow] = useState(true)
        let closeTimeOut = null
        let removeNotificationTimeOut = null

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

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

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

// const mapStateToProps = (state) => ({

// })

const mapDispatchToProps = {
        removeNotification: (id) => removeNotification(id),
}

export default connect(null, mapDispatchToProps)(AlertComponent)