Close modal after login React

Question

I have to case where I use my Login.js component in modals: In the first one, the modal should not close after signin; in the second one, it has to close.

I'm trying to figure out how to handle the second case: I tried this but it does not work: I wrote a closeAfterLogin method in the parent and try to trigger it in the child.

Login.js:

import React from 'react';
import { Meteor } from 'meteor/meteor';

export default class LoginForm extends React.Component {
  constructor() {
    super();

    this.login = this.login.bind(this);
  }


  login(e){
    e.preventDefault();
    let email = this.refs.email.value.trim();
    let password = this.refs.password.value.trim();
    Meteor.loginWithPassword({email}, password, err =>{
      console.log('Login Callback', err);
    })
    if (!!this.props.closeAfterLogin) {
      this.props.closeAfterLogin
    }
  }

  render() {
    return (
      <div>
        <form onSubmit={this.login}>
          <div className="form-group">
            <input type="email" ref="email" className="form-control" id="login-form-input-email" placeholder="email"/>
          </div>
          <div className="form-group">
            <input type="password" ref="password" className="form-control" id="login-form-input-password" placeholder="mot de passe"/>
          </div>
          <button type="submit" className="btn btn-primary">Connexion</button>
        </form>
        <p>Pas encore de compte ? <a onClick={this.props.toggleHasAnAccount}>Inscrivez-vous</a></p>
      </div>
    );
  }
}

Parent component:

import React from 'react';
import Modal from 'react-modal';
import { Meteor } from 'meteor/meteor';

import LoginForm from './LoginForm';
import SignUpForm from './SignUpForm';

const customStyles = {
  content : {
    top                   : '50%',
    left                  : '50%',
    right                 : 'auto',
    bottom                : 'auto',
    marginRight           : '-50%',
    transform             : 'translate(-50%, -50%)'
  }
};

Modal.setAppElement('#app')

export default class LoginModalParent extends React.Component {
  constructor() {
    super();

    this.state = {
      modalIsOpen: false,
      hasAnAccount: true
    };

    this.openModal = this.openModal.bind(this);
    this.closeModal = this.closeModal.bind(this);
    this.toggleHasAnAccount = this.toggleHasAnAccount.bind(this);
    this.closeAfterLogin = this.closeAfterLogin.bind(this);
  }

  openModal() {
    this.setState({modalIsOpen: true});
  }

  closeModal() {
    this.setState({modalIsOpen: false});
  }

    toggleHasAnAccount() {
    this.setState(prevState => ({
      hasAnAccount: !prevState.hasAnAccount
    }));
  };

  closeAfterLogin() {
    this.setSate({modalIsOpen: false});
    console.log(this.state.modalIsOpen);
  }

  render() {
    return (
      <div>
        <Modal
          isOpen={this.props.modalIsOpen}
          onRequestClose={this.props.closeModal}
          style={customStyles}
          contentLabel="Example Modal"
        >
          <button onClick={this.props.closeModal} type="button" className="close" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
          { this.state.hasAnAccount ? (
            <LoginForm toggleHasAnAccount={this.toggleHasAnAccount} closeAfterLogin={this.closeAfterLogin}/>) : (
            <SignUpForm toggleHasAnAccount={this.toggleHasAnAccount} />)
          }
        </Modal>
      </div>
    );
  }
}

any idea ?

Answer 1

You are not invoking the closeAfterLogin prop function. Add () after the name to invoke it.

login(e){
  e.preventDefault();
  let email = this.refs.email.value.trim();
  let password = this.refs.password.value.trim();
  Meteor.loginWithPassword({email}, password, err =>{
    console.log('Login Callback', err);
  });
  if (!!this.props.closeAfterLogin) {
    this.props.closeAfterLogin();
  }
}