diff --git a/src/app/constants.js b/src/app/constants.js index 0c2b33c..b81b3b0 100644 --- a/src/app/constants.js +++ b/src/app/constants.js @@ -18,3 +18,5 @@ export const SCROLL_TO_TOP_SHOW = 500; export const TAG_MAX_LENGTH = 15; export const MAX_NUMBER_OF_TAGS = 5; + +export const MAX_LAST_COMMENT_LENGTH = 140; diff --git a/src/common/utils/truncateLongText.js b/src/common/utils/truncateLongText.js new file mode 100644 index 0000000..6355ef6 --- /dev/null +++ b/src/common/utils/truncateLongText.js @@ -0,0 +1,12 @@ +import { MAX_LAST_COMMENT_LENGTH } from 'app/constants'; + +export const truncateLongText = (value) => { + let str = value; + if (str.length > MAX_LAST_COMMENT_LENGTH) { + str = str.slice(0, MAX_LAST_COMMENT_LENGTH); + const lastSpaceIndex = str.lastIndexOf(' '); + str = str.slice(0, lastSpaceIndex > -1 ? lastSpaceIndex : MAX_LAST_COMMENT_LENGTH); + str += '...'; + } + return str; +}; diff --git a/src/features/comments/CommentView.jsx b/src/features/comments/CommentView.jsx index b8a86f2..772fc82 100644 --- a/src/features/comments/CommentView.jsx +++ b/src/features/comments/CommentView.jsx @@ -9,6 +9,7 @@ import { useDispatch, useSelector } from 'react-redux'; import { selectProfile } from 'features/profile/profileSlice'; import FavoritePopoverContent from 'components/FavoritePopoverContent'; import { Popover } from 'antd'; +import { truncateLongText } from 'common/utils/truncateLongText'; import { CommentsActions } from './comment-actions/CommentsActions'; import { likeCommentById, unlikeCommentById } from './commentsSlice'; @@ -121,7 +122,10 @@ export const CommentView = ({ comment, lastComment }) => { {comment.author?.name} {dayjs(comment.createdAt).fromNow()} - + {!lastComment && (