switch from react-modal to react-bootstrap-modal; fix reactivity issues with user object inside modals (hopefully?)

package.json

@@ -13,7 +13,6 @@
     "react-dom": "^0.14.6",
     "react-helmet": "^2.3.1",
     "react-komposer": "^1.4.1",
-    "react-modal": "^0.6.1",
     "react-mounter": "^1.1.0",
     "react-no-ssr": "^1.0.1",
     "tracker-component": "^1.3.13"

packages/nova-base-components/lib/permissions/CanCreatePost.jsx

@@ -1,17 +1,28 @@
 import React, { PropTypes, Component } from 'react';
 
-const CanCreatePost = ({user, children}) => {
-  if (!user){
-    return <p>Please log in.</p>;
-  } else if (Users.can.post(user)) {
+const CanCreatePost = (props, context) => {
+
+  const currentUser = context.currentUser;
+
+  const children = props.children;
+  const AccountsForm = Telescope.components.AccountsForm;
+
+  if (!currentUser){
+    return (
+      <div>
+        <h3>Please Log In</h3>
+        <AccountsForm/>
+      </div>
+    )
+  } else if (Users.can.post(currentUser)) {
     return children;
   } else {
     return <p>Sorry, you do not have permissions to post at this time</p>;
   }
 };
 
-CanCreatePost.propTypes = {
-  user: React.PropTypes.object
-}
+CanCreatePost.contextTypes = {
+  currentUser: React.PropTypes.object
+};
 
 module.exports = CanCreatePost;

packages/nova-base-components/lib/posts/PostNewForm.jsx

@@ -9,9 +9,9 @@ import NovaForm from "meteor/nova:forms";
 const PostNewForm = (props, context) => {
 
   ({CanCreatePost, FlashMessages} = Telescope.components);
-  
+
   return (
-    <CanCreatePost user={context.currentUser}>
+    <CanCreatePost>
       <div className="new-post-form">
         <h3 className="modal-form-title">New Post</h3>
         <NovaForm 

packages/nova-core/lib/components/ModalTrigger.jsx

@@ -1,22 +1,24 @@
 import React, { PropTypes, Component } from 'react';
-import { Button } from 'react-bootstrap';
-import Modal from 'react-modal';
+import { Modal } from 'react-bootstrap';
+// import Modal from 'react-modal';
 
-const customStyles = {
-  content : {
-    position                   : 'absolute',
-    top                        : '40px',
-    left                       : '10%',
-    right                      : '10%',
-    bottom                     : '40px',
-    border                     : '1px solid #ccc',
-    background                 : '#fff',
-    overflow                   : 'auto',
-    WebkitOverflowScrolling    : 'touch',
-    borderRadius               : '5px',
-    outline                    : 'none',
-    padding                    : '20px'
+class ContextPasser extends Component {
+
+  getChildContext() {
+
+    return {
+      closeCallback: this.props.closeCallback,
+      currentUser: this.props.currentUser // pass on currentUser
+    };
   }
+
+  render() {
+    return this.props.children;
+  }
+}
+ContextPasser.childContextTypes = {
+  closeCallback: React.PropTypes.func,
+  currentUser: React.PropTypes.object
 };
 
 class ModalTrigger extends Component {
@@ -38,33 +40,30 @@ class ModalTrigger extends Component {
     this.setState({modalIsOpen: false});
   }
 
-  getChildContext() {
-    const component = this;
-    return {
-      closeCallback: component.closeModal
-    };
-  }
+  // getChildContext() {
+  //   const component = this;
+  //   return {
+  //     closeCallback: component.closeModal,
+  //     currentUser: this.context.currentUser // pass on currentUser
+  //   };
+  // }
 
   render() {
 
     const triggerComponent = React.cloneElement(this.props.component, { onClick: this.openModal });
 
-    if (this.props.size === "small") {
-      customStyles.content.left = "20%";
-      customStyles.content.right = "20%";
-      customStyles.content.top = "60px";
-      customStyles.content.bottom = "60px";
-    }
-
     return (
       <div className="modal-trigger">
         {triggerComponent}
-        <Modal
-          isOpen={this.state.modalIsOpen}
-          onRequestClose={this.closeModal}
-          style={customStyles} 
-        >
-          {this.props.children}
+        <Modal bsSize={this.props.size} show={this.state.modalIsOpen} onHide={this.closeModal}>
+          <Modal.Header closeButton>
+            <Modal.Title>Modal heading</Modal.Title>
+          </Modal.Header>
+          <Modal.Body>
+            <ContextPasser currentUser={this.context.currentUser} closeCallback={this.props.closeCallback}>
+              {this.props.children}
+            </ContextPasser>
+          </Modal.Body>
         </Modal>
       </div>
     )
@@ -77,12 +76,17 @@ ModalTrigger.propTypes = {
 }
 
 ModalTrigger.defaultProps = {
-  size: "medium"
+  size: "large"
 }
 
-ModalTrigger.childContextTypes = {
-  closeCallback: React.PropTypes.func
-}
+ModalTrigger.contextTypes = {
+  currentUser: React.PropTypes.object
+};
+
+// ModalTrigger.childContextTypes = {
+//   closeCallback: React.PropTypes.func,
+//   currentUser: React.PropTypes.object
+// }
 
 module.exports = ModalTrigger;
 export default ModalTrigger;

packages/nova-core/lib/containers/AppComposer.jsx

@@ -6,12 +6,13 @@ function composer(props, onData) {
 
   FlowRouter.watchPathChange();
 
+  const data = {
+    currentUser: Meteor.user(),
+    currentRoute: FlowRouter.current()
+  }
+
   if (!subscriptions.length || _.every(subscriptions, handle => handle.ready())) {
-    const data = {
-      ready: true,
-      currentUser: Meteor.user(),
-      currentRoute: FlowRouter.current()
-    }
+    data.ready = true;
     onData(null, data);
   } else {
     onData(null, {ready: false});