Use User.FirstName for notifications instead of trying to determine it from User.Nickname

web/react/components/mention_list.jsx

@@ -188,21 +188,13 @@ module.exports = React.createClass({
         for (var i = 0; i < users.length && index < MAX_ITEMS_IN_LIST; i++) {
             if (this.alreadyMentioned(users[i].username)) continue;
 
-            var firstName = "", lastName = "";
-            if (users[i].nickname.length > 0) {
-                var splitName = users[i].nickname.split(' ');
-                firstName = splitName[0].toLowerCase();
-                lastName = splitName.length > 1 ? splitName[splitName.length-1].toLowerCase() : "";
-                users[i].secondary_text = users[i].nickname;
-            }
-
-            if (firstName.lastIndexOf(mentionText,0) === 0
-                    || lastName.lastIndexOf(mentionText,0) === 0 || users[i].username.lastIndexOf(mentionText,0) === 0) {
+            if (users[i].first_name.lastIndexOf(mentionText,0) === 0
+                    || users[i].last_name.lastIndexOf(mentionText,0) === 0 || users[i].username.lastIndexOf(mentionText,0) === 0) {
                 mentions[index] = (
                     <Mention
                         ref={'mention' + index}
                         username={users[i].username}
-                        secondary_text={users[i].secondary_text}
+                        secondary_text={users[i].first_name + " " + users[i].last_name}
                         id={users[i].id}
                         listId={index}
                         isFocused={this.state.selectedMention === index ? "mentions-focus" : ""}

web/react/components/user_settings.jsx

@@ -156,6 +156,8 @@ var NotificationsTab = React.createClass({
 
         var self = this;
 
+        var user = this.props.user;
+
         var desktopSection;
         if (this.props.activeSection === 'desktop') {
             var notifyActive = [false, false, false];
@@ -314,20 +316,14 @@ var NotificationsTab = React.createClass({
 
         var keysSection;
         if (this.props.activeSection === 'keys') {
-            var user = this.props.user;
-            var first_name = "";
-            if (user.nickname.length > 0) {
-                first_name = user.nickname.split(' ')[0];
-            }
-
             var inputs = [];
 
-            if (first_name != "") {
+            if (user.first_name) {
                 inputs.push(
                     <div>
                         <div className="checkbox">
                             <label>
-                                <input type="checkbox" checked={this.state.first_name_key} onChange={function(e){self.updateFirstNameKey(e.target.checked);}}>{'Your case sensitive first name "' + first_name + '"'}</input>
+                                <input type="checkbox" checked={this.state.first_name_key} onChange={function(e){self.updateFirstNameKey(e.target.checked);}}>{'Your case sensitive first name "' + user.first_name + '"'}</input>
                             </label>
                         </div>
                     </div>
@@ -396,14 +392,9 @@ var NotificationsTab = React.createClass({
             );
         } else {
             var keys = [];
-            if (this.state.first_name_key) {
-                var first_name = "";
-                var user = this.props.user;
-                if (user.nickname.length > 0) first_name = user.nickname.split(' ')[0];
-                if (first_name != "") keys.push(first_name);
-            }
-            if (this.state.username_key) keys.push(this.props.user.username);
-            if (this.state.mention_key) keys.push('@'+this.props.user.username);
+            if (this.state.first_name_key) keys.push(user.first_name);
+            if (this.state.username_key) keys.push(user.username);
+            if (this.state.mention_key) keys.push('@'+user.username);
             if (this.state.all_key) keys.push('@all');
             if (this.state.channel_key) keys.push('@channel');
             if (this.state.custom_keys.length > 0) keys = keys.concat(this.state.custom_keys.split(','));

web/react/stores/user_store.jsx

@@ -180,11 +180,7 @@ var UserStore = assign({}, EventEmitter.prototype, {
     if (user && user.notify_props && user.notify_props.mention_keys) {
       var keys = user.notify_props.mention_keys.split(',');
 
-      if (user.nickname.length > 0 && user.notify_props.first_name === "true") {
-        var first = user.nickname.split(' ')[0];
-        if (first.length > 0) keys.push(first);
-      }
-
+      if (user.first_name && user.notify_props.first_name === "true") keys.push(user.first_name);
       if (user.notify_props.all === "true") keys.push('@all');
       if (user.notify_props.channel === "true") keys.push('@channel');