Advertisement
Guest User

Untitled

a guest
Aug 30th, 2016
91
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import Modal from './Modal'
  2. var Api = require('../Api')
  3. var CurrentUserStore = require('../stores/CurrentUserStore');
  4. var CurrentUserActions = require('../actions/CurrentUserActions');
  5.  
  6. class Navbar extends React.Component {
  7.  
  8.   constructor(props) {
  9.     super(props)
  10.   }
  11.  
  12.   state={loginModalOpen: false, registerModalOpen: false, loginValue: '', passwordValue: '', current_user: {}}
  13.  
  14.   handleLoginModalClick() {
  15.     this.setState({loginModalOpen: this.state.loginModalOpen? false : true})
  16.   }
  17.  
  18.   handleLoginOnChange(e) {
  19.       this.setState({loginValue: e.target.value})
  20.       console.log(this.state)
  21.   }
  22.  
  23.   handleLogin() {
  24.     Api.login(this.state.loginValue, this.state.passwordValue, function(data){
  25.       CurrentUserActions.fetchCurrentUser();
  26.       this.handleLoginModalClick();
  27.     }.bind(this))
  28.   }
  29.  
  30.   handleRegisterModalClick() {
  31.     this.setState({registerModalOpen: this.state.registerModalOpen? false : true})
  32.   }
  33.  
  34.   handlePasswordOnChange(e) {
  35.       this.setState({passwordValue: e.target.value})
  36.       console.log(this.state)
  37.   }
  38.  
  39.   handleRegister() {
  40.     Api.register(this.state.loginValue, this.state.passwordValue, function(data){
  41.       CurrentUserActions.fetchCurrentUser();
  42.       this.handleRegisterModalClick();
  43.     }.bind(this))
  44.   }
  45.  
  46.   handleLogout() {
  47.     CurrentUserActions.clearCurrentUser();
  48.   }
  49.  
  50.   componentDidMount() {
  51.     CurrentUserStore.listen(this.onChange.bind(this));
  52.     CurrentUserActions.fetchCurrentUser();
  53.   }
  54.  
  55.   onChange(state) {
  56.     this.setState(state);
  57.     console.log(state);
  58.   }
  59.  
  60.   render() {
  61.     var forUnlogged = [
  62.       <li onClick={this.handleLoginModalClick.bind(this)}><i className="material-icons">person</i></li>,
  63.       <li onClick={this.handleRegisterModalClick.bind(this)}><i className="material-icons">person_add</i></li>
  64.     ]
  65.     var forLogged = (
  66.       <li onClick={this.handleLogout.bind(this)}><span><img className='current-user' src={this.state.current_user.avatar} />{this.state.current_user.username}</span></li>
  67.     )
  68.     return (
  69.       <div className='header-nav'>
  70.         <ul>
  71.  
  72.           {this.state.current_user.id? forLogged : forUnlogged}
  73.  
  74.  
  75.           <Modal isOpen={this.state.loginModalOpen} handleClose={this.handleLoginModalClick.bind(this)} title='Login!'>
  76.             <fieldset>
  77.               <label htmlFor="username">Username:</label>
  78.               <input onChange={this.handleLoginOnChange.bind(this)}
  79.                       value={this.state.loginValue} type="text" name="username"
  80.                       id="username" placeholder="Your username" tabIndex="1" />
  81.             </fieldset>
  82.  
  83.             <fieldset>
  84.               <label htmlFor="text">Password:</label>
  85.               <input type="password" name="password"
  86.                       onChange={this.handlePasswordOnChange.bind(this)}
  87.                       value={this.state.passwordValue} id="password"
  88.                       placeholder="Your password" tabIndex="1" />
  89.               <button onClick={this.handleLogin.bind(this)} className='btn btn--color-positive submit-button' value='Test'> Test</button>
  90.             </fieldset>
  91.           </Modal>
  92.  
  93.           <Modal isOpen={this.state.registerModalOpen} handleClose={this.handleRegisterModalClick.bind(this)} title='Register!'>
  94.           <fieldset>
  95.             <label htmlFor="username">Username:</label>
  96.             <input onChange={this.handleLoginOnChange.bind(this)}
  97.                     value={this.state.loginValue} type="text" name="username"
  98.                     id="username" placeholder="Your username" tabIndex="1" />
  99.           </fieldset>
  100.  
  101.           <fieldset>
  102.             <label htmlFor="text">Password:</label>
  103.             <input type="password" name="password"
  104.                     onChange={this.handlePasswordOnChange.bind(this)}
  105.                     value={this.state.passwordValue} id="password"
  106.                     placeholder="Your password" tabIndex="1" />
  107.             <button onClick={this.handleRegister.bind(this)} className='btn btn--color-positive submit-button' value='Test'> Test</button>
  108.           </fieldset>
  109.           </Modal>
  110.         </ul>
  111.       </div>
  112.     )
  113.   }
  114. }
  115.  
  116. module.exports = Navbar;
  117. export default Navbar;
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement