diff --git a/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue b/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue index 0b19ea2bf..ba4d9393f 100644 --- a/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue +++ b/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue @@ -138,10 +138,9 @@ export default { }, typingUserNames() { const userList = this.typingUsersList; - if (this.isAnyoneTyping) { - const userListAsName = getTypingUsersText(userList); - return userListAsName; + const [i18nKey, params] = getTypingUsersText(userList); + return this.$t(i18nKey, params); } return ''; diff --git a/app/javascript/dashboard/helper/commons.js b/app/javascript/dashboard/helper/commons.js index d50080e82..3539bc822 100644 --- a/app/javascript/dashboard/helper/commons.js +++ b/app/javascript/dashboard/helper/commons.js @@ -27,19 +27,20 @@ export const isJSONValid = value => { export const getTypingUsersText = (users = []) => { const count = users.length; + const [firstUser, secondUser] = users; + if (count === 1) { - const [user] = users; - return `${user.name} is typing`; + return ['TYPING.ONE', { user: firstUser.name }]; } if (count === 2) { - const [first, second] = users; - return `${first.name} and ${second.name} are typing`; + return [ + 'TYPING.TWO', + { user: firstUser.name, secondUser: secondUser.name }, + ]; } - const [user] = users; - const rest = users.length - 1; - return `${user.name} and ${rest} others are typing`; + return ['TYPING.MULTIPLE', { user: firstUser.name, count: count - 1 }]; }; export const createPendingMessage = data => { diff --git a/app/javascript/dashboard/helper/specs/commons.spec.js b/app/javascript/dashboard/helper/specs/commons.spec.js index 96ded9d43..46065660f 100644 --- a/app/javascript/dashboard/helper/specs/commons.spec.js +++ b/app/javascript/dashboard/helper/specs/commons.spec.js @@ -8,15 +8,16 @@ import { describe('#getTypingUsersText', () => { it('returns the correct text is there is only one typing user', () => { - expect(getTypingUsersText([{ name: 'Pranav' }])).toEqual( - 'Pranav is typing' - ); + expect(getTypingUsersText([{ name: 'Pranav' }])).toEqual([ + 'TYPING.ONE', + { user: 'Pranav' }, + ]); }); it('returns the correct text is there are two typing users', () => { expect( getTypingUsersText([{ name: 'Pranav' }, { name: 'Nithin' }]) - ).toEqual('Pranav and Nithin are typing'); + ).toEqual(['TYPING.TWO', { user: 'Pranav', secondUser: 'Nithin' }]); }); it('returns the correct text is there are more than two users are typing', () => { @@ -27,7 +28,7 @@ describe('#getTypingUsersText', () => { { name: 'Subin' }, { name: 'Sojan' }, ]) - ).toEqual('Pranav and 3 others are typing'); + ).toEqual(['TYPING.MULTIPLE', { user: 'Pranav', count: 3 }]); }); }); diff --git a/app/javascript/dashboard/i18n/locale/en/conversation.json b/app/javascript/dashboard/i18n/locale/en/conversation.json index 6aa4e57b1..9a6a64d6d 100644 --- a/app/javascript/dashboard/i18n/locale/en/conversation.json +++ b/app/javascript/dashboard/i18n/locale/en/conversation.json @@ -335,5 +335,10 @@ "ORIGINAL_CONTENT": "Original Content", "TRANSLATED_CONTENT": "Translated Content", "NO_TRANSLATIONS_AVAILABLE": "No translations are available for this content" + }, + "TYPING": { + "ONE": "{user} is typing", + "TWO": "{user} and {secondUser} are typing", + "MULTIPLE": "{user} and {count} others are typing" } } diff --git a/app/javascript/dashboard/i18n/locale/pt_BR/conversation.json b/app/javascript/dashboard/i18n/locale/pt_BR/conversation.json index 1564c0eef..459677644 100644 --- a/app/javascript/dashboard/i18n/locale/pt_BR/conversation.json +++ b/app/javascript/dashboard/i18n/locale/pt_BR/conversation.json @@ -335,5 +335,10 @@ "ORIGINAL_CONTENT": "Conteúdo original", "TRANSLATED_CONTENT": "Conteúdo traduzido", "NO_TRANSLATIONS_AVAILABLE": "Nenhuma tradução está disponível para este conteúdo" + }, + "TYPING": { + "ONE": "{user} está digitando", + "TWO": "{user} e {secondUser} estão digitando", + "MULTIPLE": "{user} e {count} outros estão digitando" } }