Ethan Gooding: Demo Login Animation

// These code snippets are of a demo login animation
// They are from my fLEXpx project, using React.js
// To see how it works, head to this site and select "Demo profile":
// http://flexpx.herokuapp.com/
// GitHub repo: https://github.com/Eden12345/fLEXpx





// Clicking on the demo button in the Landing Page Component
// triggers a Redux action that changes the demo UI slice of the
// web application's Redux store's state

// GitHub: https://github.com/Eden12345/fLEXpx/blob/master/frontend/components/landing_page/landing_page.jsx

demoUser() {
  this.props.switchLoginAnimation(true);
  this.props.history.push('/login');
}

render() {
  return (
    <main className="landing-page animated fadeIn">
      <div className="greeting">
        <p className="landing-page-text">Discover Photos and Upload Your Own</p>
        <a className="button landing-page-demo" onClick={this.demoUser}>Demo profile</a>
      </div>
    </main>
  );
}



// By setting up my Session (login/sign-up) component to listen
// to that demo UI slice of the Redux store's state, I can then
// trigger a series of actions using timeouts and animations
// to mimic the visual aspects of logging in as that user

// GitHub: https://github.com/Eden12345/fLEXpx/blob/master/frontend/components/session/session_form.jsx

componentDidMount() {
  if (this.props.loginAnimation) {
    setTimeout(() => {
      this.demoUser();
      this.props.switchLoginAnimation(false);
    }, 750);
  }
}

demoUser() {
  this.setState({
    username: "eden",
    password: "starwars"
  });

  setTimeout(() => {
    this.props.login({user: {username: "eden", password: "starwars"}});
  }, 250);
}