Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import Modal from './Modal'
- var Api = require('../Api')
- var CurrentUserStore = require('../stores/CurrentUserStore');
- var CurrentUserActions = require('../actions/CurrentUserActions');
- class Navbar extends React.Component {
- constructor(props) {
- super(props)
- }
- state={loginModalOpen: false, registerModalOpen: false, loginValue: '', passwordValue: '', current_user: {}}
- handleLoginModalClick() {
- this.setState({loginModalOpen: this.state.loginModalOpen? false : true})
- }
- handleLoginOnChange(e) {
- this.setState({loginValue: e.target.value})
- console.log(this.state)
- }
- handleLogin() {
- Api.login(this.state.loginValue, this.state.passwordValue, function(data){
- CurrentUserActions.fetchCurrentUser();
- this.handleLoginModalClick();
- }.bind(this))
- }
- handleRegisterModalClick() {
- this.setState({registerModalOpen: this.state.registerModalOpen? false : true})
- }
- handlePasswordOnChange(e) {
- this.setState({passwordValue: e.target.value})
- console.log(this.state)
- }
- handleRegister() {
- Api.register(this.state.loginValue, this.state.passwordValue, function(data){
- CurrentUserActions.fetchCurrentUser();
- this.handleRegisterModalClick();
- }.bind(this))
- }
- handleLogout() {
- CurrentUserActions.clearCurrentUser();
- }
- componentDidMount() {
- CurrentUserStore.listen(this.onChange.bind(this));
- CurrentUserActions.fetchCurrentUser();
- }
- onChange(state) {
- this.setState(state);
- console.log(state);
- }
- render() {
- var forUnlogged = [
- <li onClick={this.handleLoginModalClick.bind(this)}><i className="material-icons">person</i></li>,
- <li onClick={this.handleRegisterModalClick.bind(this)}><i className="material-icons">person_add</i></li>
- ]
- var forLogged = (
- <li onClick={this.handleLogout.bind(this)}><span><img className='current-user' src={this.state.current_user.avatar} />{this.state.current_user.username}</span></li>
- )
- return (
- <div className='header-nav'>
- <ul>
- {this.state.current_user.id? forLogged : forUnlogged}
- <Modal isOpen={this.state.loginModalOpen} handleClose={this.handleLoginModalClick.bind(this)} title='Login!'>
- <fieldset>
- <label htmlFor="username">Username:</label>
- <input onChange={this.handleLoginOnChange.bind(this)}
- value={this.state.loginValue} type="text" name="username"
- id="username" placeholder="Your username" tabIndex="1" />
- </fieldset>
- <fieldset>
- <label htmlFor="text">Password:</label>
- <input type="password" name="password"
- onChange={this.handlePasswordOnChange.bind(this)}
- value={this.state.passwordValue} id="password"
- placeholder="Your password" tabIndex="1" />
- <button onClick={this.handleLogin.bind(this)} className='btn btn--color-positive submit-button' value='Test'> Test</button>
- </fieldset>
- </Modal>
- <Modal isOpen={this.state.registerModalOpen} handleClose={this.handleRegisterModalClick.bind(this)} title='Register!'>
- <fieldset>
- <label htmlFor="username">Username:</label>
- <input onChange={this.handleLoginOnChange.bind(this)}
- value={this.state.loginValue} type="text" name="username"
- id="username" placeholder="Your username" tabIndex="1" />
- </fieldset>
- <fieldset>
- <label htmlFor="text">Password:</label>
- <input type="password" name="password"
- onChange={this.handlePasswordOnChange.bind(this)}
- value={this.state.passwordValue} id="password"
- placeholder="Your password" tabIndex="1" />
- <button onClick={this.handleRegister.bind(this)} className='btn btn--color-positive submit-button' value='Test'> Test</button>
- </fieldset>
- </Modal>
- </ul>
- </div>
- )
- }
- }
- module.exports = Navbar;
- export default Navbar;
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement