Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 7545 | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 7545 Rev 14175
Línea 1... Línea 1...
1 
import React, { useState, useEffect } from "react";
 1 
import React, { useState, useEffect } from 'react'
2 
import { connect } from "react-redux";
 2 
import { connect } from 'react-redux'
3 
import styled from "styled-components";
 3 
import styled from 'styled-components'
4 
import { Alert } from "react-bootstrap";
 4 
import { Alert } from 'react-bootstrap'
5 
import { removeNotification } from "../../redux/notification/notification.actions";
 5 
import { removeNotification } from '../../redux/notification/notification.actions'
Línea 6... Línea 6...
6 
 
 6 
 
7 
const AlertContainer = styled.div`
 7 
const AlertContainer = styled.div`
8 
  .alert {
 8 
  .alert {
9 
    transition: all 0.3s;
 9 
    transition: all 0.3s;
Línea 33... Línea 33...
33 
    }
 33 
    }
34 
    100% {
 34 
    100% {
35 
      opacity: 0;
 35 
      opacity: 0;
36 
    }
 36 
    }
37 
  }
 37 
  }
38 
`;
 38 
`
39 
const AlertComponent = (props) => {
 39 
const AlertComponent = (props) => {
40 
  // redux destructuring
 40 
	// redux destructuring
41 
  const { removeNotification } = props;
 41 
	const { removeNotification } = props
Línea 42... Línea 42...
42 
 
 42 
 
43 
  const { notification } = props;
 43 
	const { notification } = props
44 
  const { id, style, msg } = notification;
 44 
	const { id, style, msg } = notification
45 
  const [show, setShow] = useState(true);
 45 
	const [show, setShow] = useState(true)
46 
  let closeTimeOut = null;
 46 
	let closeTimeOut = null
47 
  let removeNotificationTimeOut = null;
 47 
	let removeNotificationTimeOut = null
48 
 
 48 
 
49 
  const closeAlertHandler = () => {
 49 
	const closeAlertHandler = () => {
50 
    setShow(false);
 50 
		setShow(false)
51 
    removeNotificationTimeOut = setTimeout(() => {
 51 
		removeNotificationTimeOut = setTimeout(() => {
52 
      removeNotification(id);
 52 
			removeNotification(id)
53 
    }, 300);
 53 
		}, 300)
54 
  };
 54 
	}
55 
 
 55 
 
56 
  useEffect(() => {
 56 
	useEffect(() => {
57 
    closeTimeOut = setTimeout(() => {
 57 
		closeTimeOut = setTimeout(() => {
58 
      closeAlertHandler();
 58 
			closeAlertHandler()
59 
    }, 3000);
 59 
		}, 3000)
60 
    return () => {
 60 
		return () => {
61 
      clearTimeout(closeTimeOut);
 61 
			clearTimeout(closeTimeOut)
62 
      clearTimeout(removeNotificationTimeOut);
 62 
			clearTimeout(removeNotificationTimeOut)
63 
    };
 63 
		}
64 
  }, []);
 64 
	}, [])
65 
 
 65 
 
66 
  return (
 66 
	return (
67 
    <AlertContainer>
 67 
		<AlertContainer>
68 
      <Alert
 68 
			<Alert
69 
        variant={style}
 69 
				variant={style}
70 
        dismissible
 70 
				dismissible
71 
        onClose={closeAlertHandler}
 71 
				onClose={closeAlertHandler}
72 
        transition
 72 
				transition
73 
        className={`${show ? "isShow" : "isHidden"} alert`}
 73 
				className={`${show ? 'isShow' : 'isHidden'} alert`}
74 
      >
 74 
			>
75 
        <p>{msg}</p>
 75 
				<p>{msg}</p>
76 
      </Alert>
 76 
			</Alert>
77 
    </AlertContainer>
 77 
		</AlertContainer>
78 
  );
 78 
	)
Línea 79... Línea 79...
79 
};
 79 
}
Línea 80... Línea 80...
80 
 
 80 
 
Línea 81... Línea 81...
81 
// const mapStateToProps = (state) => ({
 81 
// const mapStateToProps = (state) => ({
82 
 
 82 
 
83 
// })
 83 
// })
Línea 84... Línea 84...
84 
 
 84