content: import React from 'react';
  import ReactDOM from 'react-dom';
  import { connect } from '@cerebral/react';
  import { state, sequences } from 'cerebral';
  
  import { Wrapper, Black } from './elements';
  
  export default connect(
    {
      currentModal: state`app.currentModal`,
      setCurrentModal: sequences`app.setCurrentModal`,
    },
    class Modal extends React.Component {
      componentDidMount() {
        if (!this.props.currentModal) {
          this.props.setCurrentModal({ modal: this.props.id });
        }
      }
  
      componentDidUpdate() {
        if (!this.props.currentModal) {
          this.props.setCurrentModal({ modal: this.props.id });
        }
      }
  
      componentWillUnmount() {
        if (this.props.currentModal === this.props.id) {
          this.props.setCurrentModal({ modal: null });
        }
      }
  
      render() {
        return (
          this.props.currentModal === this.props.id &&
          ReactDOM.createPortal(
            <Black>
              <Wrapper className={this.props.className}>
                {this.props.children}
              </Wrapper>
            </Black>,
            document.querySelector('body')
          )
        );
      }
    }
  );
  