Generalize component display and animate always if there's a modal to display

client/source/scripts/components/modals/Modals.js

@@ -1,13 +1,22 @@
+import CSSTransitionGroup from 'react-addons-css-transition-group';
 import React from 'react';
 
 import AddTorrent from './AddTorrent';
+import { dismissModal } from '../../actions/UIActions';
 import Icon from '../icons/Icon';
-import UIActions from '../../actions/UIActions';
+
+const methodsToBind = [
+  'handleOverlayClick'
+];
 
 export default class Modal extends React.Component {
 
   constructor() {
     super();
+
+    methodsToBind.forEach((method) => {
+      this[method] = this[method].bind(this);
+    });
   }
 
   handleModalClick(event) {
@@ -15,28 +24,36 @@ export default class Modal extends React.Component {
   }
 
   handleOverlayClick() {
-    UIActions.dismissModals();
+    console.log(dismissModal());
+    this.props.dispatch(dismissModal());
   }
 
   render() {
     let modal = null;
 
     switch (this.props.type) {
-      case 'torrent-add':
-        modal = <AddTorrent clickHandler={this._onModalClick} />;
+      case 'add-torrents':
+        modal = <AddTorrent clickHandler={this.onModalClick} />;
         break;
     }
 
-    if (modal) {
-      return (
-        <div className="modal" onClick={this._onOverlayClick}>
+    if (modal !== null) {
+      modal = (
+        <div className="modal" onClick={this.handleOverlayClick}>
           {modal}
         </div>
       );
-    } else {
-      return null;
     }
 
+    return (
+      <CSSTransitionGroup
+        transitionName="modal__animation"
+        transitionEnterTimeout={500}
+        transitionLeaveTimeout={500}>
+        {modal}
+      </CSSTransitionGroup>
+    )
+
   }
 
 }