@selfcommunity/react-ui 0.7.0-alpha.98 → 0.7.0

package/lib/cjs/components/CommentObject/CommentObject.js

@@ -1,194 +1,60 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
 const styles_1 = require("@mui/material/styles");
-const Widget_1 = __importDefault(require("../Widget"));
+const Widget_1 = tslib_1.__importDefault(require("../Widget"));
 const react_intl_1 = require("react-intl");
 const material_1 = require("@mui/material");
-const Bullet_1 = __importDefault(require("../../shared/Bullet"));
-const classnames_1 = __importDefault(require("classnames"));
-const Votes_1 = __importDefault(require("./Votes"));
+const Bullet_1 = tslib_1.__importDefault(require("../../shared/Bullet"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const Errors_1 = require("../../constants/Errors");
-const Skeleton_1 = __importDefault(require("./Skeleton"));
-const lab_1 = require("@mui/lab");
-const Icon_1 = __importDefault(require("@mui/material/Icon"));
+const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
 const comments_1 = require("../../types/comments");
-const ReplyComment_1 = __importDefault(require("./ReplyComment"));
-const ContributionActionsMenu_1 = __importDefault(require("../../shared/ContributionActionsMenu"));
-const DateTimeAgo_1 = __importDefault(require("../../shared/DateTimeAgo"));
+const CommentsObject_1 = tslib_1.__importDefault(require("../CommentsObject"));
+const CommentObjectReply_1 = tslib_1.__importDefault(require("../CommentObjectReply"));
+const ContributionActionsMenu_1 = tslib_1.__importDefault(require("../../shared/ContributionActionsMenu"));
+const DateTimeAgo_1 = tslib_1.__importDefault(require("../../shared/DateTimeAgo"));
 const contribution_1 = require("../../utils/contribution");
 const notistack_1 = require("notistack");
 const system_1 = require("@mui/system");
-const CommentsObject_1 = __importDefault(require("../CommentsObject"));
-const BaseItem_1 = __importDefault(require("../../shared/BaseItem"));
+const BaseItem_1 = tslib_1.__importDefault(require("../../shared/BaseItem"));
 const types_1 = require("@selfcommunity/types");
 const api_services_1 = require("@selfcommunity/api-services");
 const utils_1 = require("@selfcommunity/utils");
 const react_core_1 = require("@selfcommunity/react-core");
-const Reactions_1 = __importDefault(require("./Reactions"));
-const ReactionsPopover_1 = __importDefault(require("../FeedObject/Actions/Reaction/ReactionsPopover"));
-const Reaction_1 = require("../FeedObject/Actions/Reaction/Reaction");
-const messages = (0, react_intl_1.defineMessages)({
-    reply: {
-        id: 'ui.commentObject.reply',
-        defaultMessage: 'ui.commentObject.reply'
-    },
-    voteUp: {
-        id: 'ui.commentObject.voteUp',
-        defaultMessage: 'ui.commentObject.voteUp'
-    },
-    voteDown: {
-        id: 'ui.commentObject.voteDown',
-        defaultMessage: 'ui.commentObject.voteDown'
-    }
-});
-const PREFIX = 'SCCommentObject';
+const VoteButton_1 = tslib_1.__importDefault(require("../VoteButton"));
+const VoteAudienceButton_1 = tslib_1.__importDefault(require("../VoteAudienceButton"));
+const UserDeletedSnackBar_1 = tslib_1.__importDefault(require("../../shared/UserDeletedSnackBar"));
+const UserAvatar_1 = tslib_1.__importDefault(require("../../shared/UserAvatar"));
+const constants_1 = require("./constants");
 const classes = {
-    root: `${PREFIX}-root`,
-    comment: `${PREFIX}-comment`,
-    nestedComments: `${PREFIX}-nestedComments`,
-    avatar: `${PREFIX}-avatar`,
-    content: `${PREFIX}-content`,
-    author: `${PREFIX}-author`,
-    textContent: `${PREFIX}-text-content`,
-    btnVotes: `${PREFIX}-btn-votes`,
-    votes: `${PREFIX}-votes`,
-    commentActionsMenu: `${PREFIX}-comment-actions-menu`,
-    deleted: `${PREFIX}-deleted`,
-    activityAt: `${PREFIX}-activity-at`,
-    vote: `${PREFIX}-vote`,
-    reply: `${PREFIX}-reply`,
-    contentSubSection: `${PREFIX}-comment-sub-section`,
-    addReaction: `${PREFIX}-add-reaction`,
-    reactionIcon: `${PREFIX}-reaction-icon`
+    root: `${constants_1.PREFIX}-root`,
+    comment: `${constants_1.PREFIX}-comment`,
+    nestedComments: `${constants_1.PREFIX}-nested-comments`,
+    avatar: `${constants_1.PREFIX}-avatar`,
+    content: `${constants_1.PREFIX}-content`,
+    showMoreContent: `${constants_1.PREFIX}-show-more-content`,
+    author: `${constants_1.PREFIX}-author`,
+    textContent: `${constants_1.PREFIX}-text-content`,
+    commentActionsMenu: `${constants_1.PREFIX}-comment-actions-menu`,
+    deleted: `${constants_1.PREFIX}-deleted`,
+    activityAt: `${constants_1.PREFIX}-activity-at`,
+    vote: `${constants_1.PREFIX}-vote`,
+    voteAudience: `${constants_1.PREFIX}-vote-audience`,
+    reply: `${constants_1.PREFIX}-reply`,
+    contentSubSection: `${constants_1.PREFIX}-comment-sub-section`
 };
 const Root = (0, styles_1.styled)(material_1.Box, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    overflow: 'visible',
-    width: '100%',
-    [`& .${classes.comment}`]: {
-        paddingBottom: 0,
-        overflow: 'visible',
-        '& > div': {
-            alignItems: 'flex-start'
-        }
-    },
-    [`& .${classes.nestedComments}`]: {
-        paddingTop: 0,
-        paddingBottom: 0,
-        paddingLeft: 25,
-        '& ul.MuiList-root': {
-            paddingTop: 0,
-            paddingBottom: 0,
-            width: '100%',
-            '& li.MuiListItem-root': {
-                paddingTop: 5
-            }
-        },
-        [theme.breakpoints.up('sm')]: {
-            paddingLeft: 55
-        }
-    },
-    [`& .${classes.content}`]: {
-        position: 'relative',
-        display: 'flex',
-        '& .MuiCardContent-root': {
-            padding: '7px 13px 7px 13px',
-            flexGrow: 1
-        }
-    },
-    [`& .${classes.avatar}`]: {
-        top: theme.spacing(),
-        width: theme.selfcommunity.user.avatar.sizeMedium,
-        height: theme.selfcommunity.user.avatar.sizeMedium
-    },
-    [`& .${classes.author}`]: {
-        textDecoration: 'none',
-        color: theme.palette.text.primary,
-        '& span': {
-            fontWeight: '600'
-        }
-    },
-    [`& .${classes.textContent}`]: {
-        '& a': {
-            color: theme.palette.text.primary
-        },
-        '& p': {
-            marginBlockStart: '0.3em',
-            marginBlockEnd: '0.3em'
-        },
-        '& img': {
-            maxWidth: '100%'
-        }
-    },
-    [`& .${classes.commentActionsMenu}`]: {
-        alignItems: 'flexStart'
-    },
-    [`& .${classes.deleted}`]: {
-        opacity: 0.3
-    },
-    [`& .${classes.contentSubSection}`]: {
-        display: 'flex',
-        justifyContent: 'flex-start',
-        alignItems: 'center',
-        color: theme.palette.text.secondary
-    },
-    [`& .${classes.activityAt}`]: {
-        display: 'flex',
-        textDecoration: 'none',
-        color: 'inherit'
-    },
-    [`& .${classes.vote}`]: {
-        minWidth: 0
-    },
-    [`& .${classes.reply}`]: {
-        textTransform: 'capitalize',
-        textDecoration: 'underline',
-        textDecorationStyle: 'dotted'
-    }
-}));
+    name: constants_1.PREFIX,
+    slot: 'Root'
+})(() => ({}));
 /**
- *> API documentation for the Community-JS Comment Object component. Learn about the available props and the CSS API.
+ * > API documentation for the Community-JS Comment Object component. Learn about the available props and the CSS API.
+ *
+ *
+ * This component renders a comment item.
+ * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/CommentObject)
 
  #### Import
 
@@ -212,8 +78,8 @@ const Root = (0, styles_1.styled)(material_1.Box, {
  |author|.SCCommentObject-author|Styles applied to the author section.|
  |content|.SCCommentObject-content|Styles applied to content section.|
  |textContent|.SCCommentObject-text-content|Styles applied to text content section.|
- |btnVotes|.SCCommentObject-btn-votes|Styles applied to the vote button element.|
- |votes|.SCCommentObject-votes|Styles applied to the votes section.|
+ |vote|.SCCommentObject-vote|Styles applied to the votes section.|
+ |btnVotes|.SCCommentObject-vote-audience|Styles applied to the votes audience section.|
  |commentActionsMenu|.SCCommentObject-comment-actions-menu|Styles applied to comment action menu element.|
  |deleted|.SCCommentObject-deleted|Styles applied to tdeleted element.|
  |activityAt|.SCCommentObject-activity-at|Styles applied to activity at section.|
@@ -226,29 +92,20 @@ function CommentObject(inProps) {
     // PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
-        name: PREFIX
+        name: constants_1.PREFIX
     });
-    const { id = `comment_object_${props.commentObjectId ? props.commentObjectId : props.commentObject ? props.commentObject.id : ''}`, className, commentObjectId, commentObject, feedObjectId, feedObject, feedObjectType = types_1.SCFeedObjectTypologyType.POST, commentReply, onOpenReply, onDelete, onVote, elevation = 0, CommentObjectSkeletonProps = { elevation, WidgetProps: { variant: 'outlined' } }, ReplyCommentObjectProps = { elevation, WidgetProps: { variant: 'outlined' } }, linkableCommentDateTime = true, cacheStrategy = utils_1.CacheStrategies.NETWORK_ONLY } = props, rest = __rest(props, ["id", "className", "commentObjectId", "commentObject", "feedObjectId", "feedObject", "feedObjectType", "commentReply", "onOpenReply", "onDelete", "onVote", "elevation", "CommentObjectSkeletonProps", "ReplyCommentObjectProps", "linkableCommentDateTime", "cacheStrategy"]);
+    const { id = `comment_object_${props.commentObjectId ? props.commentObjectId : props.commentObject ? props.commentObject.id : ''}`, className, commentObjectId, commentObject, feedObjectId, feedObject, feedObjectType = types_1.SCContributionType.POST, commentReply, onOpenReply, onDelete, onCollapsed, onRestore, onVote, elevation = 0, truncateContent = false, CommentObjectSkeletonProps = { elevation, WidgetProps: { variant: 'outlined' } }, CommentObjectReplyProps = { elevation, WidgetProps: { variant: 'outlined' } }, linkableCommentDateTime = true, cacheStrategy = utils_1.CacheStrategies.NETWORK_ONLY, CommentsObjectComponentProps = {} } = props, rest = tslib_1.__rest(props, ["id", "className", "commentObjectId", "commentObject", "feedObjectId", "feedObject", "feedObjectType", "commentReply", "onOpenReply", "onDelete", "onCollapsed", "onRestore", "onVote", "elevation", "truncateContent", "CommentObjectSkeletonProps", "CommentObjectReplyProps", "linkableCommentDateTime", "cacheStrategy", "CommentsObjectComponentProps"]);
     // CONTEXT
     const scContext = (0, react_core_1.useSCContext)();
     const scUserContext = (0, react_1.useContext)(react_core_1.SCUserContext);
     const scRoutingContext = (0, react_core_1.useSCRouting)();
-    const scPreferences = (0, react_core_1.useSCPreferences)();
     const { enqueueSnackbar } = (0, notistack_1.useSnackbar)();
-    const intl = (0, react_intl_1.useIntl)();
     // STATE
     const { obj, setObj } = (0, react_core_1.useSCFetchCommentObject)({ id: commentObjectId, commentObject, cacheStrategy });
-    const [loadingVote, setLoadingVote] = (0, react_1.useState)(false);
     const [replyComment, setReplyComment] = (0, react_1.useState)(commentReply);
     const [isReplying, setIsReplying] = (0, react_1.useState)(false);
     const [isSavingComment, setIsSavingComment] = (0, react_1.useState)(false);
     const [editComment, setEditComment] = (0, react_1.useState)(null);
-    const { reactions, isLoading } = (0, react_core_1.useSCFetchReactions)();
-    const [hovered, setHovered] = (0, react_1.useState)(false);
-    const popoverAnchor = (0, react_1.useRef)(null);
-    const [timeout, setModalTimeout] = (0, react_1.useState)(null);
-    const defaultReactionId = 1;
-    const defaultReaction = reactions.find((r) => r.id === defaultReactionId);
     const commentsObject = (0, react_core_1.useSCFetchCommentObjects)({
         id: feedObjectId,
         feedObject,
@@ -257,18 +114,12 @@ function CommentObject(inProps) {
         parent: commentObject ? commentObject.id : commentObjectId,
         cacheStrategy
     });
-    const reactionsEnabled = scPreferences.features.includes(react_core_1.SCFeatures.REACTION);
-    const [reaction, setReaction] = (0, react_1.useState)(null);
-    const [_reactionsList, setReactionsList] = (0, react_1.useState)(obj === null || obj === void 0 ? void 0 : obj.reactions_count);
+    const [openAlert, setOpenAlert] = (0, react_1.useState)(false);
     // HANDLERS
-    function handleMouseEnter() {
-        timeout && !hovered && clearTimeout(timeout);
-        setModalTimeout(setTimeout(() => setHovered(true), 1000));
-    }
-    function handleMouseLeave() {
-        timeout && clearTimeout(timeout);
-        setModalTimeout(setTimeout(() => setHovered(false), 1000));
-    }
+    const handleVoteSuccess = (contribution) => {
+        setObj(contribution);
+        onVote && onVote(contribution);
+    };
     /**
      * Update state object
      * @param newObj
@@ -279,66 +130,6 @@ function CommentObject(inProps) {
         const contributionType = (0, contribution_1.getContributionType)(obj);
         utils_1.LRUCache.deleteKeysWithPrefix(react_core_1.SCCache.getCommentObjectsCachePrefixKeys(newObj[contributionType].id, contributionType));
     }
-    function dispatchReactionsActions(type, reactionObj) {
-        const list = [..._reactionsList];
-        let updatedList;
-        const index = list.findIndex((r) => r.reaction.id === reactionObj.id);
-        const inList = list.length ? list.some((o) => o.reaction.id === reactionObj.id) : false;
-        switch (type) {
-            case Reaction_1.reactionActionTypes.REMOVE:
-                if (inList && list[index].count > 1) {
-                    list[index].count = list[index].count - 1;
-                    updatedList = list;
-                }
-                else {
-                    list.splice(index, 1);
-                    updatedList = list;
-                }
-                return updatedList;
-            case Reaction_1.reactionActionTypes.ADD:
-                if (inList) {
-                    list[index].count = list[index].count + 1;
-                    updatedList = list;
-                }
-                else {
-                    updatedList = [...list, { reaction: reactionObj, count: 1 }];
-                }
-                return updatedList;
-            case Reaction_1.reactionActionTypes.CHANGE:
-                const i = list.findIndex((r) => r.reaction.id === obj.reaction.id);
-                if (!inList) {
-                    list[i].reaction = list[i].count === 1 ? reactionObj : list[i].reaction;
-                    list[i].count = list[i].count >= 1 ? list[i].count - 1 : list[i].count;
-                    setReactionsList(dispatchReactionsActions(Reaction_1.reactionActionTypes.ADD, reactionObj));
-                }
-                else {
-                    const n = dispatchReactionsActions(Reaction_1.reactionActionTypes.REMOVE, obj.reaction);
-                    const newIndex = n.findIndex((r) => r.reaction.id === reactionObj.id);
-                    n[newIndex].count = n[newIndex].count + 1;
-                    setReactionsList(n);
-                }
-                break;
-        }
-    }
-    /**
-     * Handles reaction actions(add, update, delete);
-     * @param voted
-     * @param r
-     */
-    function handleReactions(voted, r) {
-        if (voted) {
-            const forRemoval = obj.reaction.id === r.id;
-            if (forRemoval) {
-                setReactionsList(dispatchReactionsActions(Reaction_1.reactionActionTypes.REMOVE, obj.reaction));
-            }
-            else {
-                dispatchReactionsActions(Reaction_1.reactionActionTypes.CHANGE, r);
-            }
-        }
-        else {
-            setReactionsList(dispatchReactionsActions(Reaction_1.reactionActionTypes.ADD, r));
-        }
-    }
     /**
      * Render added_at of the comment
      * @param comment
@@ -348,38 +139,12 @@ function CommentObject(inProps) {
             react_1.default.createElement(DateTimeAgo_1.default, { date: comment.added_at }))) : (react_1.default.createElement(DateTimeAgo_1.default, { date: comment.added_at }))));
     }
     /**
-     * Render vote action
-     * @param comment
-     */
-    function renderActionVote(comment) {
-        return (react_1.default.createElement(lab_1.LoadingButton, { variant: 'text', className: classes.vote, onClick: () => vote(comment), disabled: loadingVote, color: "inherit" }, comment.voted ? (react_1.default.createElement(material_1.Tooltip, { title: react_1.default.createElement(react_intl_1.FormattedMessage, { id: 'ui.commentObject.voteDown', defaultMessage: 'ui.commentObject.voteDown' }) },
-            react_1.default.createElement(Icon_1.default, { fontSize: 'small', color: "primary" }, "thumb_up_alt"))) : (react_1.default.createElement(material_1.Tooltip, { title: react_1.default.createElement(react_intl_1.FormattedMessage, { id: 'ui.commentObject.voteUp', defaultMessage: 'ui.commentObject.voteUp' }) },
-            react_1.default.createElement(Icon_1.default, { fontSize: 'small', color: "inherit" }, "thumb_up_off_alt")))));
-    }
-    /**
-     * Render reaction action
-     */
-    function renderActionReaction(comment) {
-        return (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(lab_1.LoadingButton, { ref: popoverAnchor, onClick: () => addReaction(comment, obj.reaction && obj.voted ? obj.reaction : defaultReaction), onTouchStart: handleMouseEnter, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onTouchMove: handleMouseLeave, loading: loadingVote, disabled: !obj, color: "inherit", classes: { root: (0, classnames_1.default)(classes.addReaction) } }, scUserContext.user && obj.voted && obj.reaction ? (react_1.default.createElement(Icon_1.default, { fontSize: 'large', className: classes.reactionIcon },
-                react_1.default.createElement("img", { alt: obj.reaction.label, src: obj.reaction.image, height: 16, width: 16 }))) : (react_1.default.createElement(Icon_1.default, { fontSize: 'large' }, "thumb_up_off_alt"))),
-            react_1.default.createElement(ReactionsPopover_1.default, { anchorEl: popoverAnchor.current, open: hovered, onOpen: handleMouseEnter, onClose: handleMouseLeave, reactions: reactions, onReactionSelection: (r) => handleReactionVote(comment, r) })));
-    }
-    /**
-     * Render Reply action
+     * Render CommentObjectReply action
      * @param comment
      */
     function renderActionReply(comment) {
-        return (react_1.default.createElement(material_1.Button, { className: classes.reply, variant: "text", onClick: () => reply(comment), color: "inherit" }, intl.formatMessage(messages.reply)));
-    }
-    /**
-     * Render Votes counter
-     */
-    function renderVotes(comment) {
-        if (reactionsEnabled) {
-            return react_1.default.createElement(Reactions_1.default, { commentObject: comment, reactionsList: _reactionsList, sx: { display: { xs: 'none', sm: 'block' } } });
-        }
-        return react_1.default.createElement(Votes_1.default, { commentObject: comment, sx: { display: { xs: 'none', sm: 'block' } } });
+        return (react_1.default.createElement(material_1.Button, { className: classes.reply, variant: "text", onClick: () => reply(comment) },
+            react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.commentObject.reply", defaultMessage: "ui.commentObject.reply" })));
     }
     /**
      * Handle reply: open Editor
@@ -394,122 +159,6 @@ function CommentObject(inProps) {
             onOpenReply && onOpenReply(comment);
         }
     }
-    /**
-     * Perform vote comment
-     */
-    const performVoteComment = (0, react_1.useMemo)(() => (comment) => {
-        return api_services_1.http
-            .request({
-            url: api_services_1.Endpoints.Vote.url({ type: types_1.SCCommentTypologyType, id: comment.id }),
-            method: api_services_1.Endpoints.Vote.method
-        })
-            .then((res) => {
-            if (res.status >= 300) {
-                return Promise.reject(res);
-            }
-            return Promise.resolve(res.data);
-        });
-    }, [obj]);
-    /**
-     * Performs vote with reactions
-     */
-    const performReaction = (0, react_1.useMemo)(() => (reaction) => {
-        return api_services_1.http
-            .request({
-            url: api_services_1.Endpoints.Vote.url({ type: types_1.SCCommentTypologyType, id: obj.id }),
-            method: api_services_1.Endpoints.Vote.method,
-            params: {
-                reaction: reaction.id
-            }
-        })
-            .then((res) => {
-            if (res.status >= 300) {
-                return Promise.reject(res);
-            }
-            return Promise.resolve(res.data);
-        });
-    }, [obj]);
-    /**
-     * Handle vote comment
-     * @param comment
-     */
-    function vote(comment) {
-        if (!scUserContext.user) {
-            scContext.settings.handleAnonymousAction();
-        }
-        else {
-            if (react_core_1.UserUtils.isBlocked(scUserContext.user)) {
-                enqueueSnackbar(react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.common.userBlocked", defaultMessage: "ui.common.userBlocked" }), {
-                    variant: 'warning',
-                    autoHideDuration: 3000
-                });
-            }
-            else {
-                setLoadingVote(true);
-                performVoteComment(comment)
-                    .then((data) => {
-                    const newObj = obj;
-                    obj.voted = !obj.voted;
-                    obj.vote_count = obj.vote_count - (obj.voted ? -1 : 1);
-                    updateObject(obj);
-                    setLoadingVote(false);
-                    onVote && onVote(comment);
-                })
-                    .catch((error) => {
-                    utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
-                    enqueueSnackbar(react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.common.error.action", defaultMessage: "ui.common.error.action" }), {
-                        variant: 'error',
-                        autoHideDuration: 3000
-                    });
-                });
-            }
-        }
-    }
-    /**
-     * Performs reaction voting
-     */
-    function addReaction(comment, reaction) {
-        handleMouseLeave();
-        setReaction(reaction);
-        if (scUserContext.user) {
-            if (react_core_1.UserUtils.isBlocked(scUserContext.user)) {
-                enqueueSnackbar(react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.common.userBlocked", defaultMessage: "ui.common.userBlocked" }), {
-                    variant: 'warning',
-                    autoHideDuration: 3000
-                });
-            }
-            else {
-                if (obj && !loadingVote) {
-                    setLoadingVote(true);
-                    performReaction(reaction)
-                        .then((data) => {
-                        setLoadingVote(false);
-                        const newObj = Object.assign({}, obj, {
-                            voted: obj.voted && obj.reaction.id !== reaction.id ? true : !obj.voted,
-                            vote_count: obj.voted && obj.reaction.id === reaction.id
-                                ? obj.vote_count - 1
-                                : obj.voted && obj.reaction.id !== reaction.id
-                                    ? obj.vote_count
-                                    : obj.vote_count + 1,
-                            reaction: reaction
-                        });
-                        setObj(newObj);
-                        handleReactions(obj.voted, reaction);
-                        onVote && onVote(comment);
-                    })
-                        .catch((error) => {
-                        utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
-                    });
-                }
-            }
-        }
-        else {
-            scContext.settings.handleAnonymousAction();
-        }
-    }
-    const handleReactionVote = (comment, r) => {
-        addReaction(comment, r);
-    };
     /**
      * Perform reply
      * Comment of second level
@@ -542,7 +191,10 @@ function CommentObject(inProps) {
             setIsReplying(true);
             performReply(comment)
                 .then((data) => {
-                updateObject(Object.assign(Object.assign({}, obj), { comment_count: obj.comment_count + 1, latest_comments: [...obj.latest_comments, data] }));
+                // if add a comment -> the comment must be untruncated
+                const _data = data;
+                _data.summary_truncated = false;
+                updateObject(Object.assign(Object.assign({}, obj), { comment_count: obj.comment_count + 1, latest_comments: [...obj.latest_comments, _data] }));
                 setReplyComment(null);
                 setIsReplying(false);
             })
@@ -560,54 +212,22 @@ function CommentObject(inProps) {
      * Handle comment delete
      */
     function handleDelete(comment) {
-        if (comment.parent) {
-            const _latestComment = obj.latest_comments.map((c) => {
-                if (c.id === comment.id) {
-                    c.deleted = !c.deleted;
-                }
-                return c;
-            });
-            updateObject(Object.assign({}, obj, { latest_comments: _latestComment }));
-        }
-        else {
-            const _comment = Object.assign({}, obj, { deleted: !obj.deleted });
-            updateObject(Object.assign({}, obj, { deleted: !obj.deleted }));
-            onDelete && onDelete(_comment);
-        }
+        updateObject(comment);
+        onDelete && onDelete(comment);
     }
     /**
      * Handle comment delete
      */
     function handleHide(comment) {
-        if (comment.parent) {
-            const _latestComment = obj.latest_comments.map((c) => {
-                if (c.id === comment.id) {
-                    c.collapsed = !c.collapsed;
-                }
-                return c;
-            });
-            updateObject(Object.assign({}, obj, { latest_comments: _latestComment }));
-        }
-        else {
-            updateObject(Object.assign({}, obj, { collapsed: !obj.collapsed }));
-        }
+        updateObject(Object.assign({}, obj, { collapsed: !obj.collapsed }));
+        onCollapsed && onCollapsed(comment);
     }
     /**
      * Handle comment restore
      */
     function handleRestore(comment) {
-        if (comment.parent) {
-            const _latestComment = obj.latest_comments.map((c) => {
-                if (c.id === comment.id) {
-                    c.deleted = false;
-                }
-                return c;
-            });
-            updateObject(Object.assign({}, obj, { latest_comments: _latestComment }));
-        }
-        else {
-            updateObject(Object.assign({}, obj, { deleted: false }));
-        }
+        updateObject(Object.assign({}, obj, { deleted: false }));
+        onRestore && onRestore(comment);
     }
     /**
      * Handle edit comment
@@ -674,39 +294,46 @@ function CommentObject(inProps) {
      */
     function renderComment(comment) {
         if (comment.deleted &&
-            (!scUserContext.user || (scUserContext.user && (!react_core_1.UserUtils.isStaff(scUserContext.user) || scUserContext.user.id !== comment.author.id)))) {
+            (!scUserContext.user || (scUserContext.user && !react_core_1.UserUtils.isStaff(scUserContext.user) && scUserContext.user.id !== comment.author.id))) {
             // render the comment if user is logged and is staff (admin, moderator)
             // or the comment author is the logged user
             return null;
         }
+        const summaryHtmlTruncated = 'summary_truncated' in comment ? comment.summary_truncated : false;
+        const commentHtml = 'summary_html' in comment && truncateContent && summaryHtmlTruncated ? comment.summary_html : comment.html;
+        const summaryHtml = (0, contribution_1.getContributionHtml)(commentHtml, scRoutingContext.url);
         return (react_1.default.createElement(react_1.default.Fragment, { key: comment.id },
             editComment && editComment.id === comment.id ? (react_1.default.createElement(material_1.Box, { className: classes.comment },
-                react_1.default.createElement(ReplyComment_1.default, Object.assign({ text: comment.html, autoFocus: true, id: `edit-${comment.id}`, onSave: handleSave, onCancel: handleCancel, editable: !isReplying || !isSavingComment }, ReplyCommentObjectProps)))) : (react_1.default.createElement(BaseItem_1.default, { elevation: 0, className: classes.comment, image: react_1.default.createElement(react_core_1.Link, { to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, comment.author) },
-                    react_1.default.createElement(material_1.Avatar, { alt: obj.author.username, variant: "circular", src: comment.author.avatar, className: classes.avatar })), disableTypography: true, primary: react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(CommentObjectReply_1.default, Object.assign({ text: comment.html, autoFocus: true, id: `edit-${comment.id}`, onSave: handleSave, onCancel: handleCancel, editable: !isReplying || !isSavingComment }, CommentObjectReplyProps)))) : (react_1.default.createElement(BaseItem_1.default, { elevation: 0, className: classes.comment, image: react_1.default.createElement(react_core_1.Link, Object.assign({}, (!comment.author.deleted && { to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, comment.author) }), { onClick: comment.author.deleted ? () => setOpenAlert(true) : null }),
+                    react_1.default.createElement(UserAvatar_1.default, { hide: !obj.author.community_badge },
+                        react_1.default.createElement(material_1.Avatar, { alt: obj.author.username, variant: "circular", src: comment.author.avatar, className: classes.avatar }))), disableTypography: true, primary: react_1.default.createElement(react_1.default.Fragment, null,
                     react_1.default.createElement(Widget_1.default, Object.assign({ className: classes.content, elevation: elevation }, rest),
                         react_1.default.createElement(material_1.CardContent, { className: (0, classnames_1.default)({ [classes.deleted]: obj && obj.deleted }) },
-                            react_1.default.createElement(react_core_1.Link, { className: classes.author, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, comment.author) },
+                            react_1.default.createElement(react_core_1.Link, Object.assign({ className: classes.author }, (!comment.author.deleted && { to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, comment.author) }), { onClick: comment.author.deleted ? () => setOpenAlert(true) : null }),
                                 react_1.default.createElement(material_1.Typography, { component: "span" }, comment.author.username)),
-                            react_1.default.createElement(material_1.Typography, { className: classes.textContent, variant: "body2", gutterBottom: true, dangerouslySetInnerHTML: { __html: (0, contribution_1.getContributionHtml)(comment, scRoutingContext.url) } })),
+                            react_1.default.createElement(material_1.Typography, { className: classes.textContent, variant: "body2", gutterBottom: true, dangerouslySetInnerHTML: { __html: summaryHtml } }),
+                            summaryHtmlTruncated && truncateContent && (react_1.default.createElement(react_core_1.Link, { to: scRoutingContext.url(react_core_1.SCRoutes.COMMENT_ROUTE_NAME, (0, contribution_1.getRouteData)(comment)), className: classes.showMoreContent },
+                                react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.commentObject.showMore", defaultMessage: "ui.commentObject.showMore" })))),
                         scUserContext.user && (react_1.default.createElement(material_1.Box, { className: classes.commentActionsMenu },
                             react_1.default.createElement(ContributionActionsMenu_1.default, { commentObject: comment, onRestoreContribution: handleRestore, onHideContribution: handleHide, onDeleteContribution: handleDelete, onEditContribution: handleEdit })))),
                     react_1.default.createElement(material_1.Box, { component: "span", className: classes.contentSubSection },
                         renderTimeAgo(comment),
                         react_1.default.createElement(Bullet_1.default, null),
-                        reactionsEnabled ? renderActionReaction(comment) : renderActionVote(comment),
+                        react_1.default.createElement(VoteButton_1.default, { size: "small", className: classes.vote, contributionId: comment.id, contributionType: types_1.SCContributionType.COMMENT, contribution: comment, onVote: handleVoteSuccess }),
                         react_1.default.createElement(Bullet_1.default, null),
                         renderActionReply(comment),
-                        renderVotes(comment))) })),
+                        react_1.default.createElement(VoteAudienceButton_1.default, { size: "small", className: classes.voteAudience, contributionId: comment.id, contributionType: types_1.SCContributionType.COMMENT, contribution: comment }))) })),
             comment.comment_count > 0 && react_1.default.createElement(material_1.Box, { className: classes.nestedComments }, renderLatestComment(comment)),
             scUserContext.user && replyComment && (replyComment.id === comment.id || replyComment.parent === comment.id) && !comment.parent && (react_1.default.createElement(material_1.Box, { className: classes.nestedComments },
-                react_1.default.createElement(ReplyComment_1.default, Object.assign({ text: `@${replyComment.author.username}, `, autoFocus: true, key: `reply-${replyComment.id}`, id: `reply-${replyComment.id}`, onReply: handleReply, editable: !isReplying }, ReplyCommentObjectProps))))));
+                react_1.default.createElement(CommentObjectReply_1.default, Object.assign({ text: `@${replyComment.author.username}, `, autoFocus: true, key: `reply-${replyComment.id}`, id: `reply-${replyComment.id}`, onReply: handleReply, editable: !isReplying }, CommentObjectReplyProps))))));
     }
     /**
      * Render Latest Comment
      * @param comment
      */
     function renderLatestComment(comment) {
-        return (react_1.default.createElement(CommentsObject_1.default, { feedObject: commentsObject.feedObject, feedObjectType: commentsObject.feedObject ? commentsObject.feedObject.type : feedObjectType, hideAdvertising: true, comments: [].concat(commentsObject.comments).reverse(), endComments: comment.latest_comments, previous: comment.comment_count > comment.latest_comments.length ? commentsObject.next : null, isLoadingPrevious: commentsObject.isLoadingNext, handlePrevious: commentsObject.getNextPage, CommentComponentProps: Object.assign(Object.assign({ onOpenReply: reply, CommentObjectSkeletonProps, elevation: elevation, linkableCommentDateTime: linkableCommentDateTime }, rest), { cacheStrategy }), CommentsObjectSkeletonProps: { count: 1, CommentObjectSkeletonProps: CommentObjectSkeletonProps }, cacheStrategy: cacheStrategy }));
+        return (react_1.default.createElement(CommentsObject_1.default, Object.assign({ feedObject: commentsObject.feedObject, feedObjectType: commentsObject.feedObject ? commentsObject.feedObject.type : feedObjectType, hideAdvertising: true, comments: [].concat(commentsObject.comments).reverse(), endComments: comment.latest_comments, previous: comment.comment_count > comment.latest_comments.length ? commentsObject.next : null, isLoadingPrevious: commentsObject.isLoadingNext, handlePrevious: commentsObject.getNextPage, CommentComponentProps: Object.assign(Object.assign({ onOpenReply: reply, CommentObjectSkeletonProps, elevation: elevation, linkableCommentDateTime: linkableCommentDateTime }, rest), { cacheStrategy,
+                truncateContent }), CommentsObjectSkeletonProps: { count: 1, CommentObjectSkeletonProps: CommentObjectSkeletonProps }, inPlaceLoadMoreContents: true }, CommentsObjectComponentProps, { cacheStrategy: cacheStrategy })));
     }
     /**
      * Render comments
@@ -721,7 +348,8 @@ function CommentObject(inProps) {
     /**
      * Render object
      */
-    return (react_1.default.createElement(Root, { id: id, className: (0, classnames_1.default)(classes.root, className) }, comment));
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(Root, { id: id, className: (0, classnames_1.default)(classes.root, className) }, comment),
+        openAlert && react_1.default.createElement(UserDeletedSnackBar_1.default, { open: openAlert, handleClose: () => setOpenAlert(false) })));
 }
 exports.default = CommentObject;
-//# sourceMappingURL=CommentObject.js.map