update username

AnaelBerrouet · Oct 30, 2018 · e6f6e77 · e6f6e77
1 parent 140ed61
commit e6f6e77
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 11 deletions.
diff --git a/App/src/App.jsx b/App/src/App.jsx
@@ -12,6 +12,7 @@ class App extends Component {
     }
 
     this._sendMsg = this._sendMsg.bind(this)
+    this._setUser = this._setUser.bind(this)
 
   }
 
@@ -39,25 +40,24 @@ class App extends Component {
         <a href="/" className="navbar-brand">Chatty</a>
       </nav>
       <MessageList messages={this.state.messages} />
-      <ChatBar currentUser={this.state.currentUser} sendMsg={this._sendMsg} />
+      <ChatBar currentUser={this.state.currentUser} sendMsg={this._sendMsg} setUser={this._setUser}/>
       </div>
     );
 
   }
 
   _sendMsg({username, content}) {
-    const currentUser = {name: username}
     const newMsg = {username, content}
-
-    this.setState({
-      currentUser,
-    });
-
     let socketMsg = {type: 'message', msg: newMsg}
     this.socket.send(JSON.stringify(socketMsg));
 
   }
 
+  _setUser({username}) {
+    const currentUser = {name: username};
+    this.setState({currentUser})
+  }
+
   _randomId() {
     return Math.floor(Math.random() * Math.floor(1000))
 

diff --git a/App/src/ChatBar.jsx b/App/src/ChatBar.jsx
@@ -16,31 +16,34 @@ class ChatBar extends Component {
 
     this._onChangeUsername = this._onChangeUsername.bind(this)
     this._onChangeMsg = this._onChangeMsg.bind(this)
-    this._onKeyDown = this._onKeyDown.bind(this)
+    this._onKeyDownMsg = this._onKeyDownMsg.bind(this)
+    this._onKeyDownUsername = this._onKeyDownUsername.bind(this)
   }
 
   render() {
     return (
       <footer className="chatbar">
 
-        <input className="chatbar-username" placeholder="Your Name (Optional)" value={this.state.username} onChange={this._onChangeUsername}/>
+        <input className="chatbar-username" placeholder="Your Name (Optional)" value={this.state.username} onChange={this._onChangeUsername} onKeyDown={this._onKeyDownUsername}/>
 
-        <input className="chatbar-message" placeholder="Type a message and hit ENTER" value={this.state.content} onChange={this._onChangeMsg} onKeyDown={this._onKeyDown}/>
+        <input className="chatbar-message" placeholder="Type a message and hit ENTER" value={this.state.content} onChange={this._onChangeMsg} onKeyDown={this._onKeyDownMsg}/>
       </footer>
     );
   }
 
   _onChangeUsername(evt) {
     const username = evt.target.value;
     this.setState({username});
+
   }
 
   _onChangeMsg(evt) {
     const content = evt.target.value;
     this.setState({content});
+
   }
 
-  _onKeyDown(evt) {
+  _onKeyDownMsg(evt) {
     if(evt.keyCode == 13) {
 
       const username = this.state.username
@@ -50,6 +53,17 @@ class ChatBar extends Component {
       evt.target.value = ''
       this.setState({content: null})
     }
+
+  }
+
+  _onKeyDownUsername(evt) {
+    if(evt.keyCode == 13) {
+      const username = this.state.username
+
+      this.props.setUser({username})
+      this.setState({username: username})
+    }
+
   }
 
 }