Proyectos de Subversion LeadersLinked - SPA

import React, { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import { Alert, 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();
  const severity = style === 'danger' ? 'error' : style;
  const color = style === 'danger' ? 'error' : style;

  let closeTimeOut = null;

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

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

  return (
    <AlertContainer
      variant='filled'
      severity={severity}
      color={color}
      sx={{
        display: 'flex',
        padding: (theme) => theme.spacing(0, 0.5)
      }}
    >
      {msg}
    </AlertContainer>
  );
};

export default AlertComponent;