Merge pull request #3291 from appirio-tech/hotfix/handling_missing_first_last_name_in_search

vikasrohit · web-flow · commit 32136b1eac16 · 2019-09-05T10:38:44.000+05:30
Github issue#3289, Use handle instead of first and last name for creating avatars in Connect
diff --git a/src/components/ActionCard/Comment.jsx b/src/components/ActionCard/Comment.jsx
@@ -16,6 +16,7 @@ import {
 
 import './Comment.scss'
 import { PROJECT_ATTACHMENTS_FOLDER } from '../../config/constants'
+import { getFullNameWithFallback } from '../../helpers/tcHelpers'
 
 class Comment extends React.Component {
 
@@ -80,7 +81,7 @@ class Comment extends React.Component {
     const template = Handlebars.compile(commentAnchorPrefix)
     const messageAnchor = template({ postId: message.id })
     const messageLink = window.location.pathname.substr(0, window.location.pathname.indexOf('#')) + `#${messageAnchor}`
-    const authorName = author ? (author.firstName + ' ' + author.lastName) : 'Connect user'
+    const authorName = getFullNameWithFallback(author)
     const avatarUrl = _.get(author, 'photoURL', null)
     const isDeleting = message && message.isDeletingComment
 
diff --git a/src/components/Feed/FeedComments.jsx b/src/components/Feed/FeedComments.jsx
@@ -11,6 +11,7 @@ import NewPostMobile, { NEW_POST_STEP } from './NewPostMobile'
 import { SCREEN_BREAKPOINT_MD, POSTS_BUNDLE_TIME_DIFF } from '../../config/constants'
 
 import './FeedComments.scss'
+import { getFullNameWithFallback } from '../../helpers/tcHelpers'
 
 function formatCommentDate(date) {
   const today = moment()
@@ -185,10 +186,7 @@ class FeedComments extends React.Component {
     comments = _.sortBy(comments, 'createdBy')
     comments = comments.reverse()
     const { isNewCommentMobileOpen, stickyRowNext, stickyRowPrev } = this.state
-    let authorName = currentUser.firstName
-    if (authorName && currentUser.lastName) {
-      authorName += ' ' + currentUser.lastName
-    }
+    const authorName = getFullNameWithFallback(currentUser)
     const handleLoadMoreClick = () => {
       this.setState({showAll: true}, () => {
         this.updateStickyRow()
diff --git a/src/components/Feed/NewPost.jsx b/src/components/Feed/NewPost.jsx
@@ -5,6 +5,7 @@ import './draftjs.scss'
 import RichTextArea from '../RichTextArea/RichTextArea'
 
 import './NewPost.scss'
+import { getFullNameWithFallback } from '../../helpers/tcHelpers'
 
 class NewPost extends React.Component {
 
@@ -14,10 +15,7 @@ class NewPost extends React.Component {
 
   render() {
     const {currentUser, allMembers, titlePlaceholder, contentPlaceholder, isCreating, hasError, expandedTitlePlaceholder, projectMembers, canAccessPrivatePosts} = this.props
-    let authorName = currentUser.firstName
-    if (authorName && currentUser.lastName) {
-      authorName += ' ' + currentUser.lastName
-    }
+    const authorName = getFullNameWithFallback(currentUser)
 
     const composerClasses = cn(
       'modal',
diff --git a/src/components/MessageDetails/MessageDetails.jsx b/src/components/MessageDetails/MessageDetails.jsx
@@ -7,6 +7,7 @@ import { markdownToHTML } from '../../helpers/markdownToState'
 import BtnSeparator from '../ActionCard/BtnSeparator'
 import Comment from '../ActionCard/Comment'
 import AddComment from '../ActionCard/AddComment'
+import { getFullNameWithFallback } from '../../helpers/tcHelpers'
 
 class MessageDetails extends React.Component {
 
@@ -41,10 +42,7 @@ class MessageDetails extends React.Component {
       isAddingComment,
       error,
       allowAddingComment} = this.props
-    let authorName = currentUser.firstName
-    if (authorName && currentUser.lastName) {
-      authorName += ' ' + currentUser.lastName
-    }
+    const authorName = getFullNameWithFallback(currentUser)
     return (
       <ActionCard className="main-messaging">
         <ActionCard.Header {...this.props}
diff --git a/src/components/Posts/PostsContainer.jsx b/src/components/Posts/PostsContainer.jsx
@@ -22,9 +22,11 @@ import {
   THREAD_MESSAGES_PAGE_SIZE,
   CODER_BOT_USER_FNAME,
   CODER_BOT_USER_LNAME,
+  CODER_BOT_USERID,
 } from '../../config/constants'
 
 const SYSTEM_USER = {
+  handle: CODER_BOT_USERID,
   firstName: CODER_BOT_USER_FNAME,
   lastName: CODER_BOT_USER_LNAME,
   photoURL: require('../../assets/images/avatar-coder.svg')
diff --git a/src/components/RichTextArea/RichTextArea.jsx b/src/components/RichTextArea/RichTextArea.jsx
@@ -112,7 +112,7 @@ class RichTextArea extends React.Component {
   }
 
   componentWillMount() {
-    const suggestions = _.map(_.values(this.props.projectMembers), (e) => { return { name: e.firstName + ' ' + e.lastName, handle: e.handle, userId: e.userId, link: '/users/' + e.handle } })
+    const suggestions = _.map(_.values(this.props.projectMembers), (e) => { return { name: e.handle, userId: e.userId, link: '/users/' + e.handle } })
     const projectId = this.props.match.params.projectId
     this.setState({
       editorExpanded: this.props.editMode,
@@ -420,7 +420,7 @@ class RichTextArea extends React.Component {
           <div className={theme.mentionSuggestionsEntryContainer}>
             <div className={theme.mentionSuggestionsEntryContainerRight}>
               <div className={theme.mentionSuggestionsEntryText}>
-                {mention.get('name') + ' - ' + mention.get('handle')}
+                {mention.get('name')}
               </div>
             </div>
           </div>
diff --git a/src/components/TeamManagement/ProjectManagementDialog.js b/src/components/TeamManagement/ProjectManagementDialog.js
@@ -5,7 +5,7 @@ import moment from 'moment'
 import Modal from 'react-modal'
 import XMarkIcon from '../../assets/icons/icon-x-mark.svg'
 import Avatar from 'appirio-tech-react-components/components/Avatar/Avatar'
-import {getAvatarResized} from '../../helpers/tcHelpers'
+import {getAvatarResized, getFullNameWithFallback} from '../../helpers/tcHelpers'
 import { compareEmail, compareHandles } from '../../helpers/utils'
 import AutocompleteInputContainer from './AutocompleteInputContainer'
 
@@ -125,10 +125,7 @@ class ProjectManagementDialog extends React.Component {
               const remove = () => {
                 removeMember(member)
               }
-              const firstName = _.get(member, 'firstName', '')
-              const lastName = _.get(member, 'lastName', '')
-              let userFullName = `${firstName} ${lastName}`
-              userFullName = userFullName.trim().length > 0 ? userFullName : 'Connect user'
+              const userFullName = getFullNameWithFallback(member)
               return (
                 <div
                   key={i}
@@ -160,10 +157,7 @@ class ProjectManagementDialog extends React.Component {
               }
               i++
               const handle = invite.member ? invite.member.handle : null
-              const firstName = _.get(invite.member, 'firstName', '')
-              const lastName = _.get(invite.member, 'lastName', '')
-              let userFullName = `${firstName} ${lastName}`
-              userFullName = userFullName.trim().length > 0 ? userFullName : null
+              const userFullName = getFullNameWithFallback(invite.member)
               return (
                 <div
                   key={i}
diff --git a/src/components/TeamManagement/TeamManagement.jsx b/src/components/TeamManagement/TeamManagement.jsx
@@ -1,4 +1,3 @@
-import _ from 'lodash'
 import React from 'react'
 import PropTypes from 'prop-types'
 import uncontrollable from 'uncontrollable'
@@ -10,6 +9,7 @@ import AddIcon from  '../../assets/icons/icon-ui-bold-add.svg'
 import Dialog from './Dialog'
 import PERMISSIONS from '../../config/permissions'
 import {checkPermission} from '../../helpers/permissions'
+import { getFullNameWithFallback } from '../../helpers/tcHelpers'
 
 const userShape = PropTypes.shape({
   userId: PropTypes.number.isRequired,
@@ -248,10 +248,7 @@ class TeamManagement extends React.Component {
           const onClickConfirm = () => {
             onMemberDeleteConfirm(deletingMember)
           }
-          const firstName = _.get(deletingMember, 'firstName', '')
-          const lastName = _.get(deletingMember, 'lastName', '')
-          let userFullName = `${firstName} ${lastName}`
-          userFullName = userFullName.trim().length > 0 ? userFullName : 'Connect user'
+          const userFullName = getFullNameWithFallback(deletingMember)
           const isCurrentUser = (currentUser.userId === deletingMember.userId)
           const title = isCurrentUser ? LEAVE_TITLE : REMOVE_TITLE
           const content = isCurrentUser ? LEAVE_MESSAGE : REMOVE_USER_MESSAGE.replace('USERNAME', userFullName)
diff --git a/src/components/TeamManagement/TopcoderManagementDialog.js b/src/components/TeamManagement/TopcoderManagementDialog.js
@@ -6,7 +6,7 @@ import moment from 'moment'
 import Modal from 'react-modal'
 import XMarkIcon from  '../../assets/icons/icon-x-mark.svg'
 import Avatar from 'appirio-tech-react-components/components/Avatar/Avatar'
-import { getAvatarResized } from '../../helpers/tcHelpers'
+import { getAvatarResized, getFullNameWithFallback } from '../../helpers/tcHelpers'
 import SelectDropdown from '../SelectDropdown/SelectDropdown'
 import Tooltip from 'appirio-tech-react-components/components/Tooltip/Tooltip'
 import AutocompleteInputContainer from './AutocompleteInputContainer'
@@ -170,10 +170,7 @@ class TopcoderManagementDialog extends React.Component {
               const remove = () => {
                 removeMember(member)
               }
-              const firstName = _.get(member, 'firstName', '')
-              const lastName = _.get(member, 'lastName', '')
-              let userFullName = `${firstName} ${lastName}`
-              userFullName = userFullName.trim().length > 0 ? userFullName : 'Connect user'
+              const userFullName = getFullNameWithFallback(member)
               const role = _.get(_.find(this.roles, r => r.value === member.role), 'title')
               return (
                 <div
@@ -269,10 +266,7 @@ class TopcoderManagementDialog extends React.Component {
                   status: 'request_rejected'
                 })
               }
-              const firstName = _.get(invite.member, 'firstName', '')
-              const lastName = _.get(invite.member, 'lastName', '')
-              let userFullName = `${firstName} ${lastName}`
-              userFullName = userFullName.trim().length > 0 ? userFullName : 'Connect user'
+              const userFullName = getFullNameWithFallback(invite.member)
               i++
               return (
                 <div
diff --git a/src/components/TopBar/TopBarContainer.js b/src/components/TopBar/TopBarContainer.js
@@ -14,7 +14,7 @@ import {
   DOMAIN
 } from '../../config/constants'
 import ConnectLogoMono from '../../assets/icons/connect-logo-mono.svg'
-import { getAvatarResized } from '../../helpers/tcHelpers.js'
+import { getAvatarResized, getFullNameWithFallback } from '../../helpers/tcHelpers.js'
 require('./TopBarContainer.scss')
 
 
@@ -65,12 +65,7 @@ class TopBarContainer extends React.Component {
     const userHandle  = _.get(user, 'handle')
     const bigPhotoURL = _.get(user, 'photoURL')
     const userImage = getAvatarResized(bigPhotoURL, 40)
-    const userFirstName = _.get(user, 'firstName')
-    const userLastName = _.get(user, 'lastName')
-    let userName = userFirstName
-    if (userName && userLastName) {
-      userName += ' ' + userLastName
-    }
+    const userName = getFullNameWithFallback(user)
     const homePageUrl = `${window.location.protocol}//${window.location.host}/`
     const logoutLink = `https://accounts.${DOMAIN}/#!/logout?retUrl=${homePageUrl}`
     const isHomePage = this.props.match.path === '/'
diff --git a/src/components/TopicCard/TopicCard.jsx b/src/components/TopicCard/TopicCard.jsx
@@ -10,8 +10,9 @@ import NotificationBellAvatar from './NotificationBellAvatar'
 import {
   CODER_BOT_USER_FNAME,
   CODER_BOT_USER_LNAME,
+  CODER_BOT_USERID,
 } from '../../config/constants'
-import { isSystemUser } from '../../helpers/tcHelpers'
+import { isSystemUser, getFullNameWithFallback } from '../../helpers/tcHelpers'
 
 import FileIcon from '../../assets/icons/file-12.svg'
 import LinkIcon from '../../assets/icons/link-12.svg'
@@ -20,6 +21,7 @@ import InvisibleIcon from '../../assets/icons/invisible-12.svg'
 import styles from './TopicCard.scss'
 
 const SYSTEM_USER = {
+  handle: CODER_BOT_USERID,
   firstName: CODER_BOT_USER_FNAME,
   lastName: CODER_BOT_USER_LNAME,
   photoURL: require('../../assets/images/avatar-coder.svg')
@@ -45,6 +47,7 @@ const TopicCard = ({
 
   const lastMessageUserId = last(posts).userId
   const lastMessageAuthor = isSystemUser(lastMessageUserId) ? SYSTEM_USER : get(allMembers, lastMessageUserId)
+  const lastMessageAuthorName = getFullNameWithFallback(lastMessageAuthor)
   const lastMessageDate = formatDate(lastActivityAt)
   const numNewMessages = get(notifications, 'length')
   const newMessagesFromDate = formatDate(get(notifications, '0.date'))
@@ -86,9 +89,7 @@ const TopicCard = ({
                 Last message {lastMessageDate} by{' '}
                 <span className={styles.lastAuthorName}>
                   {lastMessageAuthor
-                    ? `${lastMessageAuthor.firstName} ${
-                      lastMessageAuthor.lastName
-                    }`
+                    ? lastMessageAuthorName
                     : lastMessageUserId}
                 </span>
               </span>
diff --git a/src/components/User/UserTooltip.jsx b/src/components/User/UserTooltip.jsx
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
 import Tooltip from 'appirio-tech-react-components/components/Tooltip/Tooltip'
 import Avatar from 'appirio-tech-react-components/components/Avatar/Avatar'
 import { DOMAIN } from '../../config/constants'
-import { getAvatarResized } from '../../helpers/tcHelpers'
+import { getAvatarResized, getFullNameWithFallback } from '../../helpers/tcHelpers'
 import IconDirectArrow from '../../assets/icons/icon-direct-arrow.svg'
 
 require('./UserTooltip.scss')
@@ -14,10 +14,7 @@ const UserTooltip = ({ usr, id, previewAvatar, size, invitedLabel, showEmailOnly
   const tooltipMargin = previewAvatar ? -(100 + (id * 20)) : 0
   const userHandle = _.get(usr, 'handle')
   const userEmail = _.get(usr, 'email')
-  const firstName = _.get(usr, 'firstName', '')
-  const lastName = _.get(usr, 'lastName', '')
-  let userFullName = `${firstName} ${lastName}`
-  userFullName = userFullName.trim().length > 0 ? userFullName : 'Connect user'
+  const userFullName = getFullNameWithFallback(usr)
   const avatar =
     (
       <Avatar
diff --git a/src/components/User/UserWithName.jsx b/src/components/User/UserWithName.jsx
@@ -2,15 +2,16 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { DOMAIN } from '../../config/constants'
 import Avatar from 'appirio-tech-react-components/components/Avatar/Avatar'
-import { getAvatarResized } from '../../helpers/tcHelpers'
+import { getAvatarResized, getFullNameWithFallback } from '../../helpers/tcHelpers'
 import './UserWithName.scss'
 
 const UserWithName = ({ handle, firstName, lastName, photoURL, photoSize, theme, isLink }) => {
   const url = handle ? `//www.${DOMAIN}/members/${handle}/` : null
+  const userFullName = getFullNameWithFallback({ handle, firstName, lastName })
   const avatar = (
     <Avatar
       avatarUrl={getAvatarResized(photoURL, photoSize)}
-      userName={firstName + ' ' + lastName}
+      userName={userFullName}
       size={photoSize}
     />
   )
@@ -23,8 +24,8 @@ const UserWithName = ({ handle, firstName, lastName, photoURL, photoSize, theme,
       }
       <span styleName="info">
         {url && isLink ?
-          <a styleName="name" href={url} target="_blank" rel="noopener noreferrer">{firstName} {lastName}</a> :
-          <span styleName="name">{firstName} {lastName}</span>
+          <a styleName="name" href={url} target="_blank" rel="noopener noreferrer">{userFullName}</a> :
+          <span styleName="name">{userFullName}</span>
         }
         {handle && <span styleName="handle">{handle}</span>}
       </span>
diff --git a/src/components/UserSummary/UserSummary.jsx b/src/components/UserSummary/UserSummary.jsx
@@ -4,6 +4,7 @@ import Avatar from 'appirio-tech-react-components/components/Avatar/Avatar'
 import moment from 'moment'
 
 import './UserSummary.scss'
+import { getFullNameWithFallback } from '../../helpers/tcHelpers'
 
 const UserSummary = ({user}) => {
   // TODO: Replace hardcoded values with real data
@@ -12,7 +13,7 @@ const UserSummary = ({user}) => {
     drafts: 7,
     delivered: 5
   } */
-  const userName = (user.firstName && user.lastName) && `${user.firstName} ${user.lastName}`
+  const userName = getFullNameWithFallback(user)
   const memberSince = moment(user.createdAt).format('MMM YYYY')
   return (
     <div styleName="container">
diff --git a/src/helpers/tcHelpers.js b/src/helpers/tcHelpers.js
@@ -33,4 +33,15 @@ export const getAvatarResized = (avatarUrl, size) => {
   }
 
   return avatarUrl
+}
+
+export const getFullNameWithFallback = (user) => {
+  if (!user) return ''
+  let userFullName = user.firstName
+  if (userFullName && user.lastName) {
+    userFullName += ' ' + user.lastName
+  }
+  userFullName = userFullName && userFullName.trim().length > 0 ? userFullName : user.handle
+  userFullName = userFullName && userFullName.trim().length > 0 ? userFullName : 'Connect user'
+  return userFullName
 }
diff --git a/src/projects/detail/containers/DashboardContainer.jsx b/src/projects/detail/containers/DashboardContainer.jsx
@@ -55,9 +55,11 @@ import {
   EVENT_TYPE,
   PHASE_STATUS_DRAFT,
   SCREEN_BREAKPOINT_MD,
+  CODER_BOT_USERID,
 } from '../../../config/constants'
 
 const SYSTEM_USER = {
+  handle: CODER_BOT_USERID,
   firstName: CODER_BOT_USER_FNAME,
   lastName: CODER_BOT_USER_LNAME,
   photoURL: require('../../../assets/images/avatar-coder.svg')
diff --git a/src/projects/detail/containers/FeedContainer.js b/src/projects/detail/containers/FeedContainer.js
@@ -13,6 +13,7 @@ import {
   CODER_BOT_USER_FNAME,
   CODER_BOT_USER_LNAME,
   CONNECT_USER,
+  CODER_BOT_USERID,
 } from '../../../config/constants'
 import { connect } from 'react-redux'
 import update from 'react-addons-update'
@@ -38,6 +39,7 @@ import PERMISSIONS from '../../../config/permissions'
 import './FeedContainer.scss'
 
 const SYSTEM_USER = {
+  handle: CODER_BOT_USERID,
   firstName: CODER_BOT_USER_FNAME,
   lastName: CODER_BOT_USER_LNAME,
   photoURL: require('../../../assets/images/avatar-coder.svg')
diff --git a/src/projects/detail/containers/MessagesContainer.js b/src/projects/detail/containers/MessagesContainer.js
@@ -26,6 +26,7 @@ import {
 } from '../../../config/constants'
 
 const SYSTEM_USER = {
+  handle: CODER_BOT_USERID,
   firstName: CODER_BOT_USER_FNAME,
   lastName: CODER_BOT_USER_LNAME,
   photoURL: require('file-loader?../../../assets/images/avatar-coder.svg')
diff --git a/src/projects/list/components/Projects/ProjectsGridView.jsx b/src/projects/list/components/Projects/ProjectsGridView.jsx
