Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 5 | Rev 3584 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 5 Rev 2173
Línea 1... Línea 1...
1 
import React, { useState, useEffect } from 'react'
 1 
import React, { useEffect } from 'react'
2 
import { useDispatch } from 'react-redux'
 2 
import { useDispatch } from 'react-redux'
3 
import { removeNotification } from '../../../redux/notification/notification.actions'
 - 
 
4 
import Alert from 'react-bootstrap/Alert'
 3 
import { Alert } from 'react-bootstrap'
5 
import styled from 'styled-components'
 4 
import { styled } from '@mui/material'
- 
 
 5 
 
- 
 
 6 
import { removeNotification } from '@app/redux/notification/notification.actions'
Línea 6... Línea 7...
6 
 
 7 
 
7 
const AlertContainer = styled(Alert)`
 8 
const AlertContainer = styled(Alert)`
8 
  &.alert {
 9 
  &.alert {
9 
    transition: all 0.3s;
 10 
    transition: all 0.3s;
Línea 36... Línea 37...
36 
    }
 37 
    }
37 
  }
 38 
  }
38 
`
 39 
`
39 
const AlertComponent = ({ notification }) => {
 40 
const AlertComponent = ({ notification }) => {
40 
  const { id, style, msg } = notification
 41 
  const { id, style, msg } = notification
41 
  const [show, setShow] = useState(true)
 - 
 
42 
  const dispatch = useDispatch()
 42 
  const dispatch = useDispatch()
Línea 43... Línea 43...
43 
 
 43 
 
44 
  let closeTimeOut = null
 - 
 
45 
  let removeNotificationTimeOut = null
 - 
 
46 
 
 - 
 
47 
  const closeAlertHandler = () => {
 - 
 
48 
    setShow(false)
 - 
 
49 
    removeNotificationTimeOut = setTimeout(() => {
 - 
 
50 
      dispatch(removeNotification(id))
 - 
 
51 
    }, 300)
 - 
 
Línea 52... Línea 44...
52 
  }
 44 
  let closeTimeOut = null
53 
 
 45 
 
54 
  useEffect(() => {
 46 
  useEffect(() => {
55 
    closeTimeOut = setTimeout(() => {
 47 
    closeTimeOut = setTimeout(() => {
- 
 
 48 
      dispatch(removeNotification(id))
56 
      closeAlertHandler()
 49 
    }, 3000)
57 
    }, 3000)
 50 
 
58 
    return () => {
 - 
 
59 
      clearTimeout(closeTimeOut)
 51 
    return () => {
60 
      clearTimeout(removeNotificationTimeOut)
 52 
      clearTimeout(closeTimeOut)
Línea 61... Línea 53...
61 
    }
 53 
    }
62 
  }, [])
 - 
 
63 
 
 - 
 
64 
  return (
 - 
 
65 
    <AlertContainer
 - 
 
66 
      variant={style}
 - 
 
67 
      dismissible
 54 
  }, [])
68 
      onClose={closeAlertHandler}
 - 
 
69 
      transition
 55 
 
70 
      className={`${show ? 'isShow' : 'isHidden'} alert`}
 56 
  return (
71 
    >
 57 
    <AlertContainer variant={style} className='alert' transition>
72 
      <p>{msg}</p>
 58 
      <p>{msg}</p>