Fix Zmago's comments

app/javascript/src/components/AlertsContainer/components/Alert.jsx

@@ -1,6 +1,6 @@
 import React, { Component } from "react";
 import styled from "styled-components";
-import PropTypes from "prop-types";
+import { string, number, func } from "prop-types";
 import { Grid, Row, Col } from "react-bootstrap";
 
 const Wrapper = styled.div`
@@ -72,10 +72,10 @@ class Alert extends Component {
 }
 
 Alert.propTypes = {
-  message: PropTypes.string.isRequired,
-  type: PropTypes.string.isRequired,
-  timeout: PropTypes.number.isRequired,
-  onClose: PropTypes.func.isRequired
+  message: string.isRequired,
+  type: string.isRequired,
+  timeout: number.isRequired,
+  onClose: func.isRequired
 };
 
 export default Alert;

app/javascript/src/components/AlertsContainer/index.jsx

@@ -3,7 +3,7 @@ import { connect } from "react-redux";
 import styled from "styled-components";
 import TransitionGroup from 'react-transition-group/TransitionGroup';
 import CSSTransition from 'react-transition-group/CSSTransition';
-import PropTypes from "prop-types";
+import { shape, arrayOf, string, number, func } from "prop-types";
 import { clearAlert } from "../actions/AlertsActions";
 import Alert from "./components/Alert";
 
@@ -25,7 +25,7 @@ class AlertsContainer extends Component {
       <Alert message={alert.message}
              type={alert.type}
              timeout={alert.timeout}
-             onClose={() => this.props.onAlertClose(alert.id)}
+             onClose={() => this.props.clearAlert(alert.id)}
       />
     );
   }
@@ -48,24 +48,18 @@ class AlertsContainer extends Component {
 }
 
 AlertsContainer.propTypes = {
-  alerts: PropTypes.arrayOf(
-    PropTypes.shape({
-      message: PropTypes.string.isRequired,
-      type: PropTypes.string.isRequired,
-      id: PropTypes.string.isRequired,
-      timeout: PropTypes.number,
-      onClose: PropTypes.func
+  alerts: arrayOf(
+    shape({
+      message: string.isRequired,
+      type: string.isRequired,
+      id: string.isRequired,
+      timeout: number,
+      onClose: func
     }).isRequired
   ).isRequired,
-  onAlertClose: PropTypes.func.isRequired
+  clearAlert: func.isRequired
 }
 
 const mapStateToProps = ({ alerts }) => ({ alerts });
 
-const mapDispatchToProps = dispatch => ({
-  onAlertClose(id) {
-    dispatch(clearAlert(id));
-  }
-});
-
-export default connect(mapStateToProps, mapDispatchToProps)(AlertsContainer);
+export default connect(mapStateToProps, { clearAlert })(AlertsContainer);

app/javascript/src/styles/animations.scss

@@ -1,5 +1,5 @@
 .alert-animated-enter {
-  opacity: 0.01;
+  opacity: .01;
 
   &.alert-animated-enter-active {
     opacity: 1;
@@ -16,7 +16,7 @@
 
   &.alert-animated-exit-active {
     overflow: hidden;
-    opacity: 0.01;
+    opacity: .01;
     padding-top: 0;
     padding-bottom: 0;
     margin-bottom: 0;