Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 7545 | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
14175 stevensc 1 
import React, { useState, useEffect } from 'react'
2 
import { connect } from 'react-redux'
3 
import styled from 'styled-components'
4 
import { Alert } from 'react-bootstrap'
5 
import { removeNotification } from '../../redux/notification/notification.actions'
7545 stevensc 6 
 
7 
const AlertContainer = styled.div`
8 
  .alert {
9 
    transition: all 0.3s;
10 
  }
11 
  .isShow {
12 
    animation: slideIn 0.3s;
13 
  }
14 
  .isHidden {
15 
    animation: fadeOut 0.3s;
16 
    animation-fill-mode: forwards;
17 
  }
18 
 
19 
  @keyframes slideIn {
20 
    0% {
21 
      transform: translateY(-200%);
22 
      opacity: 0;
23 
    }
24 
    100% {
25 
      transform: translateY(0);
26 
      opacity: 100;
27 
    }
28 
  }
29 
 
30 
  @keyframes fadeOut {
31 
    0% {
32 
      opacity: 100;
33 
    }
34 
    100% {
35 
      opacity: 0;
36 
    }
37 
  }
14175 stevensc 38 
`
7545 stevensc 39 
const AlertComponent = (props) => {
14175 stevensc 40 
	// redux destructuring
41 
	const { removeNotification } = props
7545 stevensc 42 
 
14175 stevensc 43 
	const { notification } = props
44 
	const { id, style, msg } = notification
45 
	const [show, setShow] = useState(true)
46 
	let closeTimeOut = null
47 
	let removeNotificationTimeOut = null
7545 stevensc 48 
 
14175 stevensc 49 
	const closeAlertHandler = () => {
50 
		setShow(false)
51 
		removeNotificationTimeOut = setTimeout(() => {
52 
			removeNotification(id)
53 
		}, 300)
54 
	}
7545 stevensc 55 
 
14175 stevensc 56 
	useEffect(() => {
57 
		closeTimeOut = setTimeout(() => {
58 
			closeAlertHandler()
59 
		}, 3000)
60 
		return () => {
61 
			clearTimeout(closeTimeOut)
62 
			clearTimeout(removeNotificationTimeOut)
63 
		}
64 
	}, [])
7545 stevensc 65 
 
14175 stevensc 66 
	return (
67 
		<AlertContainer>
68 
			<Alert
69 
				variant={style}
70 
				dismissible
71 
				onClose={closeAlertHandler}
72 
				transition
73 
				className={`${show ? 'isShow' : 'isHidden'} alert`}
74 
			>
75 
				<p>{msg}</p>
76 
			</Alert>
77 
		</AlertContainer>
78 
	)
79 
}
7545 stevensc 80 
 
81 
// const mapStateToProps = (state) => ({
82 
 
83 
// })
84 
 
85 
const mapDispatchToProps = {
14175 stevensc 86 
	removeNotification: (id) => removeNotification(id),
87 
}
7545 stevensc 88 
 
14175 stevensc 89 
export default connect(null, mapDispatchToProps)(AlertComponent)