0
\$\begingroup\$

I have successfully implemented a simple login page using ReactJS by coding it all in JavaScript (a flexibility that I like) but I am still a beginner in React and would like to know whether this is efficient and modular and if anything can be improved.

"use strict";

function Login(email, password) {
  var LOGIN_FLAG = 1002
  $.post("/server/account/login.php", { email: email, password: password })
   .done(function(data) {
     var JSONData = tryParseJSON(data);
     if (!JSONData || JSONData["statusCode"] == LOGIN_FLAG) {
       ShowFailureAtDOM("container");
       return;
     }

     var JWTData = KJUR.jws.JWS.parse(JSONData["jwt"]);
     if (JWTData) {
       ShowSuccessAtDOM("container", JWTData.payloadObj.name);
     } else {
       ShowFailureAtDOM("container");
     }
   });
};

function ShowSuccessAtDOM(id, name) {
  ReactDOM.unmountComponentAtNode(document.getElementById(id));
  ReactDOM.render(
    <LoginSuccess name={name} />,
    document.getElementById(id)
  );
};

function ShowFailureAtDOM(id) {
  ReactDOM.unmountComponentAtNode(document.getElementById(id));
  ReactDOM.render(
    <LoginFail />,
    document.getElementById(id)
  );
};

var Header = React.createClass({
  render() {
    return (
      <h1>Web App - Login</h1>
    )
  }
});

var LoginForm = React.createClass({
  ValidateLogin() {
    var email = this.refs.loginEmail.state.value;
    var password = this.refs.LoginPassword.state.value;
    Login(email, password);
  },
  render() {
    return (
      <div className="loginDiv">
        <Header />
        <LoginEmail ref="loginEmail"/>
        <LoginPassword ref="LoginPassword"/>
        <br></br>
        <LoginSubmit ValidateLogin={this.ValidateLogin}/>
      </div>
    )
  }
});

var LoginEmail = React.createClass({
  getInitialState() {
    return {value: null}
  },
  onChange(e) {
    this.setState({value: e.target.value});
  },
  render() {
    return (
      <div className="LoginEmailDiv">
        <h6>Email:</h6>
        <input type="text" onChange={this.onChange}/>
      </div>
    )
  }
});

var LoginPassword = React.createClass({
  getInitialState() {
    return {value: null}
  },
  onChange(e) {
    this.setState({value: e.target.value});
  },
  render() {
    return (
      <div className="LoginEmailDiv">
        <h6>Password:</h6>
        <input type="password" onChange={this.onChange}/>
      </div>
    )
  }
});

var LoginSubmit = React.createClass({
  onClick() {
    this.props.ValidateLogin();
  },
  render() {
    return (
      <button onClick={this.onClick}>Login</button>
    )
  }
});

var LoginSuccess = React.createClass({
  render() {
    return (
      <h2>Login Success! Welcome Back, {this.props.name}</h2>
    )
  }
});

var LoginFail = React.createClass({
  render() {
    return (
      <h2>Login FAIL...</h2>
    )
  }
});

ReactDOM.render(
  <LoginForm />,
  document.getElementById("container")
);
\$\endgroup\$
2
\$\begingroup\$

No, you are re-rendering the application manually.

function ShowSuccessAtDOM(id, name) {
  ReactDOM.unmountComponentAtNode(document.getElementById(id));
  ReactDOM.render(
    <LoginSuccess name={name} />,
    document.getElementById(id)
  );
};

function ShowFailureAtDOM(id) {
  ReactDOM.unmountComponentAtNode(document.getElementById(id));
  ReactDOM.render(
    <LoginFail />,
    document.getElementById(id)
  );
};

Better:

class LoginApp extends Component {
  constructor(props) {
    super(props)
  }

  render() {
    return (
      <div>
        {this.props.errors.length > 0 && <LoginFailure {...props} />}
        {this.props.success && <h1>You are logged in!</h1>}
        {!this.props.success && <LoginForm />}
      </div>
    );
  }
}


ReactDOM.render(<LoginApp {...props} />,
                document.getElementById('react-root'))

Too pass the props into your application, there are many ways. One of the most popular is using some kind of flux architecture. There is a library called redux. Its really easy to use, you should take a look, then you will understand how easy it is, to implement the example above.

\$\endgroup\$
  • \$\begingroup\$ But how do/should I set the props.error/props.success? \$\endgroup\$ – Walid Nawfal Sabihi Jun 23 '16 at 14:57
  • \$\begingroup\$ @WalidNawfalSabihi as I said in the end, you should use something like redux \$\endgroup\$ – webdeb Jun 23 '16 at 15:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.