From 59f66c39d30d745a4ccaf20f09a1cd980aaf08b5 Mon Sep 17 00:00:00 2001 From: mdshamoon Date: Tue, 31 Oct 2023 12:31:26 +0530 Subject: [PATCH] fix dynamic name length --- src/common/utils.ts | 3 +++ .../ChatConversations/ChatConversation/ChatConversation.tsx | 3 ++- .../Chat/ChatMessages/AddAttachment/AddAttachment.tsx | 4 ++-- src/containers/Chat/ChatMessages/ContactBar/ContactBar.tsx | 3 ++- .../AdminContactManagement/AdminContactManagement.tsx | 4 ++-- .../UploadContactsDialog/UploadContactsDialog.tsx | 3 ++- .../WebhookLogs/WebhookLogsList/WebhookLogsList.tsx | 4 ++-- 7 files changed, 15 insertions(+), 9 deletions(-) diff --git a/src/common/utils.ts b/src/common/utils.ts index 00bbd40a8..4309a09cf 100644 --- a/src/common/utils.ts +++ b/src/common/utils.ts @@ -204,4 +204,7 @@ export const getAddOrRemoveRoleIds = (roles: any, payload: any) => { // lg breakpoint is 1200px for MUI export const isGreaterThanLgBreakpoint = () => window.innerWidth > 1200; +export const slicedString = (string: string, length: number) => + string?.length > length ? `${string.slice(0, length)}...` : string; + export default getObject; diff --git a/src/containers/Chat/ChatConversations/ChatConversation/ChatConversation.tsx b/src/containers/Chat/ChatConversations/ChatConversation/ChatConversation.tsx index f68611e02..a3280443c 100644 --- a/src/containers/Chat/ChatConversations/ChatConversation/ChatConversation.tsx +++ b/src/containers/Chat/ChatConversations/ChatConversation/ChatConversation.tsx @@ -11,6 +11,7 @@ import { WhatsAppToJsx } from 'common/RichEditor'; import { MessageType } from '../MessageType/MessageType'; import styles from './ChatConversation.module.css'; import Track from 'services/TrackService'; +import { slicedString } from 'common/utils'; export interface ChatConversationProps { contactId: number; @@ -152,7 +153,7 @@ const ChatConversation = ({ chatBubble = [styles.ChatBubble, styles.ChatBubbleUnread]; } - const name = contactName?.length > 20 ? `${contactName.slice(0, 20)}...` : contactName; + const name = slicedString(contactName, 20); const { type, body } = lastMessage; const isTextType = type === 'TEXT'; diff --git a/src/containers/Chat/ChatMessages/AddAttachment/AddAttachment.tsx b/src/containers/Chat/ChatMessages/AddAttachment/AddAttachment.tsx index ac4acb5b5..c595838bf 100644 --- a/src/containers/Chat/ChatMessages/AddAttachment/AddAttachment.tsx +++ b/src/containers/Chat/ChatMessages/AddAttachment/AddAttachment.tsx @@ -10,7 +10,7 @@ import { Dropdown } from 'components/UI/Form/Dropdown/Dropdown'; import { Input } from 'components/UI/Form/Input/Input'; import { MessageType } from 'containers/Chat/ChatConversations/MessageType/MessageType'; import { MEDIA_MESSAGE_TYPES } from 'common/constants'; -import { validateMedia } from 'common/utils'; +import { slicedString, validateMedia } from 'common/utils'; import setLogs from 'config/logs'; import { UPLOAD_MEDIA } from 'graphql/mutations/Chat'; import CrossIcon from 'assets/images/icons/Cross.svg?react'; @@ -167,7 +167,7 @@ export const AddAttachment = ({ if (media) { const mediaName = media.name; const extension = mediaName.slice((Math.max(0, mediaName.lastIndexOf('.')) || Infinity) + 1); - const shortenedName = mediaName.length > 15 ? `${mediaName.slice(0, 15)}...` : mediaName; + const shortenedName = slicedString(mediaName, 15); setFileName(shortenedName); setUploading(true); uploadMedia({ diff --git a/src/containers/Chat/ChatMessages/ContactBar/ContactBar.tsx b/src/containers/Chat/ChatMessages/ContactBar/ContactBar.tsx index 62706d2c8..bfa07571b 100644 --- a/src/containers/Chat/ChatMessages/ContactBar/ContactBar.tsx +++ b/src/containers/Chat/ChatMessages/ContactBar/ContactBar.tsx @@ -49,6 +49,7 @@ import { DialogBox } from '../../../../components/UI/DialogBox/DialogBox'; import { Tooltip } from '../../../../components/UI/Tooltip/Tooltip'; import { CLEAR_MESSAGES } from '../../../../graphql/mutations/Chat'; import { showChats } from '../../../../common/responsive'; +import { slicedString } from 'common/utils'; import { CollectionInformation } from '../../../Collection/CollectionInformation/CollectionInformation'; import AddContactsToCollection from '../AddContactsToCollection/AddContactsToCollection'; @@ -617,7 +618,7 @@ export const ContactBar = ({ noWrap data-testid="beneficiaryName" > - {displayName} + {slicedString(displayName, 40)} {contactCollections} diff --git a/src/containers/ContactManagement/AdminContactManagement/AdminContactManagement.tsx b/src/containers/ContactManagement/AdminContactManagement/AdminContactManagement.tsx index 85de1f7e1..4a2adb1ff 100644 --- a/src/containers/ContactManagement/AdminContactManagement/AdminContactManagement.tsx +++ b/src/containers/ContactManagement/AdminContactManagement/AdminContactManagement.tsx @@ -11,7 +11,7 @@ import { MOVE_CONTACTS } from 'graphql/mutations/Contact'; import { setNotification } from 'common/notification'; import { listIcon } from '../SuperAdminContactManagement/SuperAdminContactManagement'; import styles from './AdminContactManagement.module.css'; -import { exportCsvFile } from 'common/utils'; +import { exportCsvFile, slicedString } from 'common/utils'; export const AdminContactManagement = () => { const [fileName, setFileName] = useState(''); @@ -49,7 +49,7 @@ export const AdminContactManagement = () => { if (extension !== 'csv') { setErrors([{ message: 'Please make sure the file format matches the sample' }]); } else { - const shortenedName = mediaName.length > 10 ? `${mediaName.slice(0, 10)}...` : mediaName; + const shortenedName = slicedString(mediaName, 10); setFileName(shortenedName); setCsvContent(reader.result); } diff --git a/src/containers/ContactManagement/UploadContactsDialog/UploadContactsDialog.tsx b/src/containers/ContactManagement/UploadContactsDialog/UploadContactsDialog.tsx index 94c2f9399..5cce6a27a 100644 --- a/src/containers/ContactManagement/UploadContactsDialog/UploadContactsDialog.tsx +++ b/src/containers/ContactManagement/UploadContactsDialog/UploadContactsDialog.tsx @@ -13,6 +13,7 @@ import UploadIcon from 'assets/images/icons/Upload.svg?react'; import CrossIcon from 'assets/images/icons/Cross.svg?react'; import { UPLOAD_CONTACTS_SAMPLE } from 'config'; import { IMPORT_CONTACTS } from 'graphql/mutations/Contact'; +import { slicedString } from 'common/utils'; import { setNotification } from 'common/notification'; import styles from './UploadContactsDialog.module.css'; @@ -76,7 +77,7 @@ export const UploadContactsDialog = ({ if (extension !== 'csv') { setError(true); } else { - const shortenedName = mediaName.length > 15 ? `${mediaName.slice(0, 15)}...` : mediaName; + const shortenedName = slicedString(mediaName, 15); setFileName(shortenedName); setCsvContent(reader.result); } diff --git a/src/containers/WebhookLogs/WebhookLogsList/WebhookLogsList.tsx b/src/containers/WebhookLogs/WebhookLogsList/WebhookLogsList.tsx index 7a9608d4e..15f399b4a 100644 --- a/src/containers/WebhookLogs/WebhookLogsList/WebhookLogsList.tsx +++ b/src/containers/WebhookLogs/WebhookLogsList/WebhookLogsList.tsx @@ -10,7 +10,7 @@ import { List } from 'containers/List/List'; import Menu from 'components/UI/Menu/Menu'; import { Button } from 'components/UI/Form/Button/Button'; import { FILTER_WEBHOOK_LOGS, GET_WEBHOOK_LOGS_COUNT } from 'graphql/queries/WebhookLogs'; -import { copyToClipboard } from 'common/utils'; +import { copyToClipboard, slicedString } from 'common/utils'; import { DATE_TIME_FORMAT } from 'common/constants'; import styles from './WebhookLogsList.module.css'; @@ -121,7 +121,7 @@ export const WebhookLogsList = () => { onKeyDown={handleClick} aria-hidden="true" > - {newtext.length > 21 ? `${newtext.slice(0, 21)}...` : newtext} + {slicedString(newtext, 21)} );