modal.jsx

import React from 'react';
import { reduxForm } from 'redux-form';
import Modal from 'react-modal';
import store from './store.jsx';

const style = {
  overlay: {
    position          : 'fixed',
    top               : 0,
    left              : 0,
    right             : 0,
    bottom            : 0,
    backgroundColor   : 'rgba(0, 0, 0, 0.75)'
  },
  content: {
    width: '600px',
    top: '50%',
    left: '50%',
    right: 'auto',
    bottom: 'auto',
    marginRight: '-50%',
    transform: 'translate(-50%, -50%)'
  }
}

// This will display the proper form for users based on whether they're registering or signing up.  (Redux State)
const showForm = () => {
  if (store.getState().auth.form == 'register') {
    return (
      <div>
        <div className="modal-header">Register</div>
        <a onClick={() => {
          console.log('set to login');
          store.dispatch({ type: 'SET_AUTH_FORM', form: 'login' });
          console.log(store.getState().auth.form);
        }}>Login</a>
      </div>
    )
  } else if (store.getState().auth.form == 'login') {
    return (
      <div>
        <div className="modal-header">Login</div>
        <a onClick={() => {
          console.log('set to register');
          store.dispatch({ type: 'SET_AUTH_FORM', form: 'register' });
          console.log(store.getState().auth.form);
        }}>Register</a>
      </div>
    )
  }
}


export default React.createClass({

  render() {

    return (
      <div className="ui modal">
        <Modal
          style={style}
          isOpen={store.getState().auth.show}
          onRequestClose={() => {
            store.dispatch({
              type: 'SHOW_MODAL',
              show: false
            })
          }}
        >

        {showForm()}

        </Modal>
      </div>
    )

  }

})