Skip to content

Commit 4d9d9f5

Browse files
author
Vikas Agarwal
committed
Github issue#3289, Use handle instead of first and last name for creating avatars in Connect
— Gracefully handling the missing first and last name in the _search endpoint of member api
1 parent 1b77974 commit 4d9d9f5

File tree

19 files changed

+55
-60
lines changed

19 files changed

+55
-60
lines changed

‎src/components/ActionCard/Comment.jsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import {
1616

1717
import './Comment.scss'
1818
import { PROJECT_ATTACHMENTS_FOLDER } from '../../config/constants'
19+
import { getFullNameWithFallback } from '../../helpers/tcHelpers'
1920

2021
class Comment extends React.Component {
2122

@@ -80,7 +81,7 @@ class Comment extends React.Component {
8081
const template = Handlebars.compile(commentAnchorPrefix)
8182
const messageAnchor = template({ postId: message.id })
8283
const messageLink = window.location.pathname.substr(0, window.location.pathname.indexOf('#')) + `#${messageAnchor}`
83-
const authorName = author ? (author.firstName + ' ' + author.lastName) : 'Connect user'
84+
const authorName = getFullNameWithFallback(author)
8485
const avatarUrl = _.get(author, 'photoURL', null)
8586
const isDeleting = message && message.isDeletingComment
8687

‎src/components/Feed/FeedComments.jsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import NewPostMobile, { NEW_POST_STEP } from './NewPostMobile'
1111
import { SCREEN_BREAKPOINT_MD, POSTS_BUNDLE_TIME_DIFF } from '../../config/constants'
1212

1313
import './FeedComments.scss'
14+
import { getFullNameWithFallback } from '../../helpers/tcHelpers'
1415

1516
function formatCommentDate(date) {
1617
const today = moment()
@@ -185,10 +186,7 @@ class FeedComments extends React.Component {
185186
comments = _.sortBy(comments, 'createdBy')
186187
comments = comments.reverse()
187188
const { isNewCommentMobileOpen, stickyRowNext, stickyRowPrev } = this.state
188-
let authorName = currentUser.firstName
189-
if (authorName && currentUser.lastName) {
190-
authorName += ' ' + currentUser.lastName
191-
}
189+
const authorName = getFullNameWithFallback(currentUser)
192190
const handleLoadMoreClick = () => {
193191
this.setState({showAll: true}, () => {
194192
this.updateStickyRow()

‎src/components/Feed/NewPost.jsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import './draftjs.scss'
55
import RichTextArea from '../RichTextArea/RichTextArea'
66

77
import './NewPost.scss'
8+
import { getFullNameWithFallback } from '../../helpers/tcHelpers'
89

910
class NewPost extends React.Component {
1011

@@ -14,10 +15,7 @@ class NewPost extends React.Component {
1415

1516
render() {
1617
const {currentUser, allMembers, titlePlaceholder, contentPlaceholder, isCreating, hasError, expandedTitlePlaceholder, projectMembers, canAccessPrivatePosts} = this.props
17-
let authorName = currentUser.firstName
18-
if (authorName && currentUser.lastName) {
19-
authorName += ' ' + currentUser.lastName
20-
}
18+
const authorName = getFullNameWithFallback(currentUser)
2119

2220
const composerClasses = cn(
2321
'modal',

‎src/components/MessageDetails/MessageDetails.jsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { markdownToHTML } from '../../helpers/markdownToState'
77
import BtnSeparator from '../ActionCard/BtnSeparator'
88
import Comment from '../ActionCard/Comment'
99
import AddComment from '../ActionCard/AddComment'
10+
import { getFullNameWithFallback } from '../../helpers/tcHelpers'
1011

1112
class MessageDetails extends React.Component {
1213

@@ -41,10 +42,7 @@ class MessageDetails extends React.Component {
4142
isAddingComment,
4243
error,
4344
allowAddingComment} = this.props
44-
let authorName = currentUser.firstName
45-
if (authorName && currentUser.lastName) {
46-
authorName += ' ' + currentUser.lastName
47-
}
45+
const authorName = getFullNameWithFallback(currentUser)
4846
return (
4947
<ActionCard className="main-messaging">
5048
<ActionCard.Header {...this.props}

‎src/components/Posts/PostsContainer.jsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,11 @@ import {
2222
THREAD_MESSAGES_PAGE_SIZE,
2323
CODER_BOT_USER_FNAME,
2424
CODER_BOT_USER_LNAME,
25+
CODER_BOT_USERID,
2526
} from '../../config/constants'
2627

2728
const SYSTEM_USER = {
29+
handle: CODER_BOT_USERID,
2830
firstName: CODER_BOT_USER_FNAME,
2931
lastName: CODER_BOT_USER_LNAME,
3032
photoURL: require('../../assets/images/avatar-coder.svg')

‎src/components/RichTextArea/RichTextArea.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,7 @@ class RichTextArea extends React.Component {
112112
}
113113

114114
componentWillMount() {
115-
const suggestions = _.map(_.values(this.props.projectMembers), (e) => { return { name: e.firstName + ' ' + e.lastName, handle: e.handle, userId: e.userId, link: '/users/' + e.handle } })
115+
const suggestions = _.map(_.values(this.props.projectMembers), (e) => { return { name: e.handle, userId: e.userId, link: '/users/' + e.handle } })
116116
const projectId = this.props.match.params.projectId
117117
this.setState({
118118
editorExpanded: this.props.editMode,
@@ -420,7 +420,7 @@ class RichTextArea extends React.Component {
420420
<div className={theme.mentionSuggestionsEntryContainer}>
421421
<div className={theme.mentionSuggestionsEntryContainerRight}>
422422
<div className={theme.mentionSuggestionsEntryText}>
423-
{mention.get('name') + ' - ' + mention.get('handle')}
423+
{mention.get('name')}
424424
</div>
425425
</div>
426426
</div>

‎src/components/TeamManagement/ProjectManagementDialog.js‎

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import moment from 'moment'
55
import Modal from 'react-modal'
66
import XMarkIcon from '../../assets/icons/icon-x-mark.svg'
77
import Avatar from 'appirio-tech-react-components/components/Avatar/Avatar'
8-
import {getAvatarResized} from '../../helpers/tcHelpers'
8+
import {getAvatarResized, getFullNameWithFallback} from '../../helpers/tcHelpers'
99
import { compareEmail, compareHandles } from '../../helpers/utils'
1010
import AutocompleteInputContainer from './AutocompleteInputContainer'
1111

@@ -125,10 +125,7 @@ class ProjectManagementDialog extends React.Component {
125125
const remove = () => {
126126
removeMember(member)
127127
}
128-
const firstName = _.get(member, 'firstName', '')
129-
const lastName = _.get(member, 'lastName', '')
130-
let userFullName = `${firstName} ${lastName}`
131-
userFullName = userFullName.trim().length > 0 ? userFullName : 'Connect user'
128+
const userFullName = getFullNameWithFallback(member)
132129
return (
133130
<div
134131
key={i}
@@ -160,10 +157,7 @@ class ProjectManagementDialog extends React.Component {
160157
}
161158
i++
162159
const handle = invite.member ? invite.member.handle : null
163-
const firstName = _.get(invite.member, 'firstName', '')
164-
const lastName = _.get(invite.member, 'lastName', '')
165-
let userFullName = `${firstName} ${lastName}`
166-
userFullName = userFullName.trim().length > 0 ? userFullName : null
160+
const userFullName = getFullNameWithFallback(invite.member)
167161
return (
168162
<div
169163
key={i}

‎src/components/TeamManagement/TeamManagement.jsx‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import _ from 'lodash'
21
import React from 'react'
32
import PropTypes from 'prop-types'
43
import uncontrollable from 'uncontrollable'
@@ -10,6 +9,7 @@ import AddIcon from '../../assets/icons/icon-ui-bold-add.svg'
109
import Dialog from './Dialog'
1110
import PERMISSIONS from '../../config/permissions'
1211
import {checkPermission} from '../../helpers/permissions'
12+
import { getFullNameWithFallback } from '../../helpers/tcHelpers'
1313

1414
const userShape = PropTypes.shape({
1515
userId: PropTypes.number.isRequired,
@@ -248,10 +248,7 @@ class TeamManagement extends React.Component {
248248
const onClickConfirm = () => {
249249
onMemberDeleteConfirm(deletingMember)
250250
}
251-
const firstName = _.get(deletingMember, 'firstName', '')
252-
const lastName = _.get(deletingMember, 'lastName', '')
253-
let userFullName = `${firstName} ${lastName}`
254-
userFullName = userFullName.trim().length > 0 ? userFullName : 'Connect user'
251+
const userFullName = getFullNameWithFallback(deletingMember)
255252
const isCurrentUser = (currentUser.userId === deletingMember.userId)
256253
const title = isCurrentUser ? LEAVE_TITLE : REMOVE_TITLE
257254
const content = isCurrentUser ? LEAVE_MESSAGE : REMOVE_USER_MESSAGE.replace('USERNAME', userFullName)

‎src/components/TeamManagement/TopcoderManagementDialog.js‎

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import moment from 'moment'
66
import Modal from 'react-modal'
77
import XMarkIcon from '../../assets/icons/icon-x-mark.svg'
88
import Avatar from 'appirio-tech-react-components/components/Avatar/Avatar'
9-
import { getAvatarResized } from '../../helpers/tcHelpers'
9+
import { getAvatarResized, getFullNameWithFallback } from '../../helpers/tcHelpers'
1010
import SelectDropdown from '../SelectDropdown/SelectDropdown'
1111
import Tooltip from 'appirio-tech-react-components/components/Tooltip/Tooltip'
1212
import AutocompleteInputContainer from './AutocompleteInputContainer'
@@ -170,10 +170,7 @@ class TopcoderManagementDialog extends React.Component {
170170
const remove = () => {
171171
removeMember(member)
172172
}
173-
const firstName = _.get(member, 'firstName', '')
174-
const lastName = _.get(member, 'lastName', '')
175-
let userFullName = `${firstName} ${lastName}`
176-
userFullName = userFullName.trim().length > 0 ? userFullName : 'Connect user'
173+
const userFullName = getFullNameWithFallback(member)
177174
const role = _.get(_.find(this.roles, r => r.value === member.role), 'title')
178175
return (
179176
<div
@@ -269,10 +266,7 @@ class TopcoderManagementDialog extends React.Component {
269266
status: 'request_rejected'
270267
})
271268
}
272-
const firstName = _.get(invite.member, 'firstName', '')
273-
const lastName = _.get(invite.member, 'lastName', '')
274-
let userFullName = `${firstName} ${lastName}`
275-
userFullName = userFullName.trim().length > 0 ? userFullName : 'Connect user'
269+
const userFullName = getFullNameWithFallback(invite.member)
276270
i++
277271
return (
278272
<div

‎src/components/TopBar/TopBarContainer.js‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import {
1414
DOMAIN
1515
} from '../../config/constants'
1616
import ConnectLogoMono from '../../assets/icons/connect-logo-mono.svg'
17-
import { getAvatarResized } from '../../helpers/tcHelpers.js'
17+
import { getAvatarResized, getFullNameWithFallback } from '../../helpers/tcHelpers.js'
1818
require('./TopBarContainer.scss')
1919

2020

@@ -65,12 +65,7 @@ class TopBarContainer extends React.Component {
6565
const userHandle = _.get(user, 'handle')
6666
const bigPhotoURL = _.get(user, 'photoURL')
6767
const userImage = getAvatarResized(bigPhotoURL, 40)
68-
const userFirstName = _.get(user, 'firstName')
69-
const userLastName = _.get(user, 'lastName')
70-
let userName = userFirstName
71-
if (userName && userLastName) {
72-
userName += ' ' + userLastName
73-
}
68+
const userName = getFullNameWithFallback(user)
7469
const homePageUrl = `${window.location.protocol}//${window.location.host}/`
7570
const logoutLink = `https://accounts.${DOMAIN}/#!/logout?retUrl=${homePageUrl}`
7671
const isHomePage = this.props.match.path === '/'

0 commit comments

Comments
 (0)