Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { useState, useEffect } from "react";
import { connect } from "react-redux";
import styled from "styled-components";
import Alert from "react-bootstrap/Alert";
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);