@selfcommunity/react-ui 0.7.0-alpha.323 → 0.7.0-alpha.325

package/lib/esm/components/FeedObject/Activities/RelevantActivities/CommentActivity/CommentActivity.js

@@ -3,12 +3,14 @@ import React, { useState } from 'react';
 import { styled } from '@mui/material/styles';
 import { Avatar } from '@mui/material';
 import { Link, SCRoutes, useSCRouting } from '@selfcommunity/react-core';
-import { defineMessages, useIntl } from 'react-intl';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import DateTimeAgo from '../../../../../shared/DateTimeAgo';
 import classNames from 'classnames';
 import { useThemeProps } from '@mui/system';
 import BaseItem from '../../../../../shared/BaseItem';
 import UserDeletedSnackBar from '../../../../../shared/UserDeletedSnackBar';
+import { getContributionHtml, getRouteData } from '../../../../../utils/contribution';
+import { MAX_SUMMARY_LENGTH } from '../../../../../constants/Feed';
 const messages = defineMessages({
     comment: {
         id: 'ui.feedObject.relevantActivities.comment',
@@ -19,7 +21,8 @@ const PREFIX = 'SCCommentRelevantActivity';
 const classes = {
     root: `${PREFIX}-root`,
     avatar: `${PREFIX}-avatar`,
-    username: `${PREFIX}-username`
+    username: `${PREFIX}-username`,
+    showMoreContent: `${PREFIX}-show-more-content`
 };
 const Root = styled(BaseItem, {
     name: PREFIX,
@@ -53,11 +56,19 @@ export default function CommentRelevantActivity(inProps) {
     // INTL
     const intl = useIntl();
     // RENDER
+    const summaryHtmlTruncated = 'summary_truncated' in activityObject.comment
+        ? activityObject.comment.summary_truncated
+        : activityObject.comment.html.length >= MAX_SUMMARY_LENGTH;
+    const commentHtml = 'summary_html' in activityObject.comment ? activityObject.comment.summary_html : activityObject.comment.summary;
+    const summaryHtml = getContributionHtml(commentHtml, scRoutingContext.url);
     return (React.createElement(React.Fragment, null,
         React.createElement(Root, Object.assign({}, rest, { className: classNames(classes.root, className), image: React.createElement(Link, Object.assign({}, (!activityObject.author.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, activityObject.author) }), { onClick: activityObject.author.deleted ? () => setOpenAlert(true) : null }),
                 React.createElement(Avatar, { alt: activityObject.author.username, variant: "circular", src: activityObject.author.avatar, className: classes.avatar })), primary: React.createElement(React.Fragment, null, intl.formatMessage(messages.comment, {
                 username: (React.createElement(Link, Object.assign({}, (!activityObject.author.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, activityObject.author) }), { onClick: activityObject.author.deleted ? () => setOpenAlert(true) : null, className: classes.username }), activityObject.author.username)),
-                comment: activityObject.comment.summary
+                comment: (React.createElement(React.Fragment, null,
+                    summaryHtml,
+                    React.createElement(Link, { to: scRoutingContext.url(SCRoutes.COMMENT_ROUTE_NAME, getRouteData(activityObject.comment)), className: classes.showMoreContent },
+                        React.createElement(FormattedMessage, { id: "ui.commentObject.showMore", defaultMessage: "ui.commentObject.showMore" }))))
             })), secondary: React.createElement(DateTimeAgo, { date: activityObject.active_at }) })),
         openAlert && React.createElement(UserDeletedSnackBar, { open: openAlert, handleClose: () => setOpenAlert(false) })));
 }

package/lib/esm/components/FeedObject/FeedObject.js

@@ -346,12 +346,15 @@ export default function FeedObject(inProps) {
             setIsReplying(true);
             performReply(comment)
                 .then((data) => {
+                // if add a comment -> the comment must be untruncated
+                const _data = data;
+                _data.summary_truncated = false;
                 if (selectedActivities !== SCFeedObjectActivitiesType.RECENT_COMMENTS) {
                     setComments([]);
                     setSelectedActivities(SCFeedObjectActivitiesType.RECENT_COMMENTS);
                 }
                 else {
-                    setComments([...[data], ...comments]);
+                    setComments([...[_data], ...comments]);
                 }
                 setIsReplying(false);
                 const newObj = Object.assign({}, obj, { comment_count: obj.comment_count + 1 });
@@ -378,8 +381,8 @@ export default function FeedObject(inProps) {
      * Get contribution summary
      */
     const getContributionSummary = useCallback((obj, template) => {
-        const contributionHtml = obj.summary_html ? obj.summary_html : obj.summary;
-        const summaryHtmlTruncated = obj.summary_truncated ? obj.summary_truncated : obj.html.length >= MAX_SUMMARY_LENGTH;
+        const contributionHtml = 'summary_html' in obj ? obj.summary_html : obj.summary;
+        const summaryHtmlTruncated = 'summary_truncated' in obj ? obj.summary_truncated : obj.html.length >= MAX_SUMMARY_LENGTH;
         const summaryHtml = expanded || template === SCFeedObjectTemplateType.DETAIL
             ? getContributionHtml(obj.html, scRoutingContext.url)
             : getContributionHtml(contributionHtml, scRoutingContext.url);
@@ -456,7 +459,7 @@ export default function FeedObject(inProps) {
             template === SCFeedObjectTemplateType.PREVIEW && (obj.comment_count > 0 || (feedObjectActivities && feedObjectActivities.length > 0)) && (React.createElement(Collapse, { in: expandedActivities, timeout: "auto", classes: { root: classes.activitiesSection } },
                 React.createElement(CardContent, { className: classes.activitiesContent },
                     React.createElement(Activities, Object.assign({ feedObject: obj, key: selectedActivities, feedObjectActivities: feedObjectActivities, activitiesType: selectedActivities, onSetSelectedActivities: handleSelectedActivities, comments: comments, CommentsObjectProps: {
-                            CommentComponentProps: Object.assign({ onDelete: handleDeleteComment, truncateContent: true }, CommentComponentProps),
+                            CommentComponentProps: Object.assign({ onDelete: handleDeleteComment, truncateContent: true, CommentsObjectProps: { inPlaceLoadMoreContents: false } }, CommentComponentProps),
                             CommentObjectSkeletonProps: CommentObjectSkeletonProps
                         }, cacheStrategy: cacheStrategy }, ActivitiesProps))))),
             composerOpen && (React.createElement(Composer, { open: composerOpen, feedObject: obj, onClose: handleToggleEdit, onSuccess: handleEditSuccess, maxWidth: "sm", fullWidth: true, scroll: "body" })))) : (React.createElement(FeedObjectSkeleton, Object.assign({ template: template }, FeedObjectSkeletonProps)))));