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

package/lib/cjs/components/FeedObject/Actions/Vote/Vote.js

@@ -1,341 +1,32 @@
 "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 });
-exports.voteActionTypes = void 0;
-const react_1 = __importStar(require("react"));
-const BaseDialog_1 = __importDefault(require("../../../../shared/BaseDialog"));
-const react_intl_1 = require("react-intl");
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
 const material_1 = require("@mui/material");
-const InfiniteScroll_1 = __importDefault(require("../../../../shared/InfiniteScroll"));
-const Icon_1 = __importDefault(require("@mui/material/Icon"));
-const Skeleton_1 = __importDefault(require("@mui/material/Skeleton"));
-const LoadingButton_1 = __importDefault(require("@mui/lab/LoadingButton"));
-const CentralProgress_1 = __importDefault(require("../../../../shared/CentralProgress"));
-const User_1 = __importDefault(require("../../../User"));
-const Errors_1 = require("../../../../constants/Errors");
 const styles_1 = require("@mui/material/styles");
-const classnames_1 = __importDefault(require("classnames"));
-const notistack_1 = require("notistack");
-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 system_1 = require("@mui/system");
-/**
- * We have complex state logic that involves multiple sub-values,
- * so useReducer is preferable to useState.
- * Define all possible auth action types label
- * Use this to export actions and dispatch an action
- */
-exports.voteActionTypes = {
-    LOADING: '_loading_votes',
-    REQUEST_VOTES_LOADING: '_request_votes_loading',
-    REQUEST_VOTES_SUCCESS: '_request_votes_success',
-    REQUEST_VOTES_FAILED: '_request_votes_failed',
-    TOGGLE_VOTE_DIALOG: '_toggle_vote_dialog',
-    REFRESHING_VOTES: '_refreshing_votes',
-    VOTING: '_voting',
-    REQUEST_VOTING_SUCCESS: '_request_vote_success'
-};
-/**
- * votesReducer manage the state of authentication
- * update the state base on action type
- * @param state
- * @param action
- */
-function votesReducer(state, action) {
-    switch (action.type) {
-        case exports.voteActionTypes.REQUEST_VOTES_LOADING:
-            return Object.assign({}, state, { loadingVotes: true });
-        case exports.voteActionTypes.REQUEST_VOTES_SUCCESS:
-            return {
-                votes: state.refreshing ? [...state.votes] : [...state.votes, ...action.payload.data],
-                loadingVotes: false,
-                refreshing: false,
-                voting: false,
-                next: action.payload.next,
-                openVotesDialog: state.openVotesDialog,
-                error: null
-            };
-        case exports.voteActionTypes.TOGGLE_VOTE_DIALOG:
-            return Object.assign({}, state, { openVotesDialog: !state.openVotesDialog });
-        case exports.voteActionTypes.REQUEST_VOTES_FAILED:
-            return Object.assign({}, state, { loadingVotes: false, error: action.payload.error, refreshing: false });
-        case exports.voteActionTypes.REFRESHING_VOTES:
-            return Object.assign({}, state, { votes: [], loadingVotes: false, refreshing: true, error: null });
-        case exports.voteActionTypes.VOTING:
-            return Object.assign({}, state, { voting: true, error: null });
-        case exports.voteActionTypes.REQUEST_VOTING_SUCCESS:
-            return Object.assign({}, state, { voting: false, error: null });
-        default:
-            throw new Error(`Unhandled type: ${action.type}`);
-    }
-}
-/**
- * Defines initial state
- */
-function stateInitializer({ feedObjectId = null, feedObject = null, feedObjectType = types_1.SCFeedObjectTypologyType.POST }) {
-    const next = feedObjectId && feedObjectType
-        ? `${api_services_1.Endpoints.VotesList.url({ type: feedObjectType, id: feedObjectId })}`
-        : `${api_services_1.Endpoints.VotesList.url({ type: feedObjectType, id: feedObject.id })}`;
-    return {
-        votes: [],
-        loadingVotes: false,
-        voting: null,
-        refreshing: false,
-        next,
-        openVotesDialog: false,
-        error: null
-    };
-}
-const PREFIX = 'SCVoteAction';
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const VoteButton_1 = tslib_1.__importDefault(require("../../../VoteButton"));
+const VoteAudienceButton_1 = tslib_1.__importDefault(require("../../../VoteAudienceButton"));
+const constants_1 = require("../../constants");
 const classes = {
-    root: `${PREFIX}-root`,
-    divider: `${PREFIX}-divider`,
-    actionButton: `${PREFIX}-action-button`,
-    inline: `${PREFIX}-inline`,
-    inlineActionButton: `${PREFIX}-inline-action-button`,
-    viewAudienceButton: `${PREFIX}-view-audience-button`
+    root: `${constants_1.PREFIX}-action-vote-root`,
+    divider: `${constants_1.PREFIX}-action-vote-divider`,
+    button: `${constants_1.PREFIX}-action-vote-button`,
+    inline: `${constants_1.PREFIX}-action-vote-inline`,
+    viewAudienceButton: `${constants_1.PREFIX}-action-vote-view-audience-button`
 };
-const messages = (0, react_intl_1.defineMessages)({
-    voteUp: {
-        id: 'ui.feedObject.vote.voteUp',
-        defaultMessage: 'ui.feedObject.vote.voteUp'
-    },
-    voteDown: {
-        id: 'ui.feedObject.vote.voteDown',
-        defaultMessage: 'ui.feedObject.vote.voteDown'
-    },
-    votes: {
-        id: 'ui.feedObject.vote.votes',
-        defaultMessage: 'ui.feedObject.vote.votes'
-    },
-    votedByMe: {
-        id: 'ui.feedObject.vote.votedByMe',
-        defaultMessage: 'ui.feedObject.votedByMe.you'
-    },
-    votedByOnlyMe: {
-        id: 'ui.feedObject.vote.votedByOnlyMe',
-        defaultMessage: 'ui.feedObject.votedByOnlyMe.you'
-    }
-});
 const Root = (0, styles_1.styled)(material_1.Box, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    flexDirection: 'column',
-    [`&.${classes.inline}`]: {
-        flexDirection: 'row-reverse'
-    },
-    [`& .${classes.inlineActionButton}`]: {
-        minWidth: 30
-    },
-    [`& .${classes.divider}`]: {
-        width: '100%',
-        borderBottom: 0
-    },
-    [`& .${classes.viewAudienceButton}`]: {
-        height: 32,
-        fontSize: 15,
-        textTransform: 'capitalize',
-        '& p': {
-            fontSize: '0.9rem'
-        }
-    }
-}));
-function Vote(inProps) {
-    const props = (0, system_1.useThemeProps)({
-        props: inProps,
-        name: PREFIX
-    });
+    name: constants_1.PREFIX,
+    slot: 'ActionVoteRoot'
+})(() => ({}));
+function Vote(props) {
     // PROPS
-    const { className = null, feedObjectId = null, feedObject = null, feedObjectType = types_1.SCFeedObjectTypologyType.POST, withAudience = true, withAction = true, inlineAction = false, onVoteAction = () => null } = props, rest = __rest(props, ["className", "feedObjectId", "feedObject", "feedObjectType", "withAudience", "withAction", "inlineAction", "onVoteAction"]);
-    // STATE
-    const { obj, setObj } = (0, react_core_1.useSCFetchFeedObject)({ id: feedObjectId, feedObject, feedObjectType });
-    const [state, dispatch] = (0, react_1.useReducer)(votesReducer, {}, () => stateInitializer({ feedObjectId, feedObject, feedObjectType }));
-    // CONTEXT
-    const scContext = (0, react_core_1.useSCContext)();
-    const scUserContext = (0, react_core_1.useSCUser)();
-    const { enqueueSnackbar } = (0, notistack_1.useSnackbar)();
-    // INTL
-    const intl = (0, react_intl_1.useIntl)();
-    /**
-     * Fetches Votes only if obj
-     */
-    (0, react_1.useEffect)(() => {
-        if (obj && state.next && !state.loading && !state.refreshing && state.openVotesDialog) {
-            dispatch({ type: exports.voteActionTypes.REQUEST_VOTES_LOADING });
-            fetchVotes()
-                .then((data) => {
-                dispatch({
-                    type: exports.voteActionTypes.REQUEST_VOTES_SUCCESS,
-                    payload: {
-                        next: data['next'],
-                        data: data['results']
-                    }
-                });
-            })
-                .catch((error) => {
-                utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
-            });
-        }
-    }, [state.openVotesDialog]);
-    /**
-     * Opens dialog votes
-     */
-    function handleToggleVotesDialog() {
-        dispatch({ type: exports.voteActionTypes.TOGGLE_VOTE_DIALOG });
-    }
-    /**
-     * fetches Votes
-     */
-    const fetchVotes = (0, react_1.useMemo)(() => () => {
-        return api_services_1.http
-            .request({
-            url: state.next,
-            method: api_services_1.Endpoints.VotesList.method
-        })
-            .then((res) => {
-            if (res.status >= 300) {
-                return Promise.reject(res);
-            }
-            return Promise.resolve(res.data);
-        });
-    }, [state.next]);
-    /**
-     * Performs vote up/down
-     */
-    const performVote = (0, react_1.useMemo)(() => () => {
-        return api_services_1.http
-            .request({
-            url: api_services_1.Endpoints.Vote.url({ type: obj.type, id: obj.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 voteUp/voteDown
-     */
-    function vote() {
-        if (scUserContext.user && Object.prototype.hasOwnProperty.call(obj, 'voted')) {
-            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 && !state.voting) {
-                    dispatch({ type: exports.voteActionTypes.VOTING });
-                    performVote()
-                        .then((data) => {
-                        dispatch({ type: exports.voteActionTypes.REQUEST_VOTING_SUCCESS });
-                        const newObj = Object.assign({}, obj, {
-                            voted: !obj.voted,
-                            vote_count: obj.voted ? obj.vote_count - 1 : obj.vote_count + 1
-                        });
-                        setObj(newObj);
-                        onVoteAction && onVoteAction(newObj);
-                    })
-                        .catch((error) => {
-                        utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
-                    });
-                }
-            }
-        }
-        else {
-            scContext.settings.handleAnonymousAction();
-        }
-    }
-    /**
-     * Renders audience with detail dialog
-     * @return {JSX.Element}
-     */
-    function renderAudience() {
-        const { loadingVotes, votes, openVotesDialog } = state;
-        let audience;
-        if (withAudience) {
-            if (!obj) {
-                audience = (react_1.default.createElement(material_1.Button, { variant: "text", size: "small", disabled: true, color: "inherit" },
-                    react_1.default.createElement(Skeleton_1.default, { animation: "wave", height: 18, width: 50 })));
-            }
-            else {
-                audience = (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement(material_1.Button, { variant: "text", size: "small", onClick: handleToggleVotesDialog, disabled: obj.vote_count === 0, color: "inherit", classes: { root: classes.viewAudienceButton }, startIcon: react_1.default.createElement(react_1.default.Fragment, null, !inlineAction && (react_1.default.createElement(react_1.default.Fragment, null, scUserContext.user && obj.voted ? (react_1.default.createElement(Icon_1.default, { fontSize: "small", color: "primary" }, "thumb_up")) : (react_1.default.createElement(Icon_1.default, { fontSize: "small" }, "thumb_up_off_alt"))))) }, scUserContext.user && obj.voted ? (react_1.default.createElement(react_1.default.Fragment, null, obj.vote_count === 1
-                        ? intl.formatMessage(messages.votedByOnlyMe)
-                        : intl.formatMessage(messages.votedByMe, { total: obj.vote_count - 1 }))) : (react_1.default.createElement(react_1.default.Fragment, null, `${intl.formatMessage(messages.votes, { total: obj.vote_count })}`))),
-                    openVotesDialog && (react_1.default.createElement(BaseDialog_1.default, { title: react_1.default.createElement(react_intl_1.FormattedMessage, { defaultMessage: "ui.feedObject.votesDialog.title", id: "ui.feedObject.votesDialog.title" }), onClose: handleToggleVotesDialog, open: openVotesDialog }, loadingVotes ? (react_1.default.createElement(CentralProgress_1.default, { size: 50 })) : (react_1.default.createElement(InfiniteScroll_1.default, { dataLength: votes.length, next: fetchVotes, hasMoreNext: Boolean(state.next), loaderNext: react_1.default.createElement(CentralProgress_1.default, { size: 30 }), height: 400, endMessage: react_1.default.createElement("p", { style: { textAlign: 'center' } },
-                            react_1.default.createElement("b", null,
-                                react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.feedObject.votesDialog.noOtherLikes", defaultMessage: "ui.feedObject.votesDialog.noOtherLikes" }))) },
-                        react_1.default.createElement(material_1.List, null, votes.map((vote, index) => (react_1.default.createElement(material_1.ListItem, { key: index },
-                            react_1.default.createElement(User_1.default, { elevation: 0, user: vote.user, key: index, sx: { m: 0 } })))))))))));
-            }
-        }
-        return audience;
-    }
-    /**
-     * Renders vote action if withAction==true
-     * @return {JSX.Element}
-     */
-    function renderVoteButton() {
-        const { voting } = state;
-        return (react_1.default.createElement(react_1.default.Fragment, null, withAction && (react_1.default.createElement(react_1.default.Fragment, null,
-            !inlineAction && withAudience && react_1.default.createElement(material_1.Divider, { className: classes.divider }),
-            react_1.default.createElement(material_1.Tooltip, { title: voting ? '' : obj.voted && scUserContext.user ? intl.formatMessage(messages.voteDown) : intl.formatMessage(messages.voteUp) },
-                react_1.default.createElement("span", null,
-                    react_1.default.createElement(LoadingButton_1.default, { loading: voting, disabled: !obj, onClick: vote, color: "inherit", classes: { root: (0, classnames_1.default)(classes.actionButton, { [classes.inlineActionButton]: inlineAction }) } }, scUserContext.user && obj.voted ? (react_1.default.createElement(Icon_1.default, { fontSize: 'large', color: "primary" }, "thumb_up")) : (react_1.default.createElement(Icon_1.default, { fontSize: 'large' }, "thumb_up_off_alt")))))))));
-    }
-    /**
-     * Renders vote action and audience section
-     */
+    const { className = null, feedObjectId = null, feedObject = null, feedObjectType = null, withAudience = true, withAction = true, inlineAction = false, onVoteAction = () => null } = props, rest = tslib_1.__rest(props, ["className", "feedObjectId", "feedObject", "feedObjectType", "withAudience", "withAction", "inlineAction", "onVoteAction"]);
+    // RENDER
     return (react_1.default.createElement(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className, { [classes.inline]: inlineAction }) }, rest),
-        renderAudience(),
-        renderVoteButton()));
+        withAudience && (react_1.default.createElement(VoteAudienceButton_1.default, { className: classes.viewAudienceButton, contributionId: feedObjectId, contributionType: feedObjectType, contribution: feedObject, variant: "text", size: "small" })),
+        withAction && (react_1.default.createElement(react_1.default.Fragment, null,
+            !inlineAction && withAudience && react_1.default.createElement(material_1.Divider, { className: classes.divider }),
+            react_1.default.createElement(VoteButton_1.default, { className: classes.button, contributionId: feedObjectId, contributionType: feedObjectType, contribution: feedObject, onVote: onVoteAction })))));
 }
 exports.default = Vote;
-//# sourceMappingURL=Vote.js.map

package/lib/cjs/components/FeedObject/Actions/Vote/index.d.ts

@@ -1,4 +1,3 @@
 import Vote, { VoteProps } from './Vote';
 export default Vote;
 export { VoteProps };
-//# sourceMappingURL=index.d.ts.map

package/lib/cjs/components/FeedObject/Actions/Vote/index.js

@@ -1,8 +1,5 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-const Vote_1 = __importDefault(require("./Vote"));
+const tslib_1 = require("tslib");
+const Vote_1 = tslib_1.__importDefault(require("./Vote"));
 exports.default = Vote_1.default;
-//# sourceMappingURL=index.js.map

package/lib/cjs/components/FeedObject/Actions/index.d.ts

@@ -1,4 +1,3 @@
 import Actions, { ActionsProps } from './Actions';
 export default Actions;
 export { ActionsProps };
-//# sourceMappingURL=index.d.ts.map

package/lib/cjs/components/FeedObject/Actions/index.js

@@ -1,8 +1,5 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-const Actions_1 = __importDefault(require("./Actions"));
+const tslib_1 = require("tslib");
+const Actions_1 = tslib_1.__importDefault(require("./Actions"));
 exports.default = Actions_1.default;
-//# sourceMappingURL=index.js.map

package/lib/cjs/components/FeedObject/Activities/Activities.d.ts

@@ -1,7 +1,7 @@
-import { CommentObjectProps } from '../../CommentObject';
 import { CommentsObjectProps } from '../../CommentsObject';
+import { CommentObjectProps } from '../../CommentObject';
 import { SCFeedObjectActivitiesType } from '../../../types/feedObject';
-import { SCCommentType, SCFeedObjectType, SCFeedObjectTypologyType } from '@selfcommunity/types';
+import { SCCommentType, SCContributionType, SCFeedObjectType } from '@selfcommunity/types';
 import { CacheStrategies } from '@selfcommunity/utils';
 export interface ActivitiesProps {
     /**
@@ -26,9 +26,9 @@ export interface ActivitiesProps {
     feedObject?: SCFeedObjectType;
     /**
      * Type of feed object
-     * @default SCFeedObjectTypologyType.POST
+     * @default SCContributionType.POST
      */
-    feedObjectType?: SCFeedObjectTypologyType;
+    feedObjectType?: Exclude<SCContributionType, SCContributionType.COMMENT>;
     /**
      * Feed Object latest activities
      * @default null
@@ -68,5 +68,4 @@ export interface ActivitiesProps {
      */
     [p: string]: any;
 }
-export default function Activities(inProps: ActivitiesProps): JSX.Element;
-//# sourceMappingURL=Activities.d.ts.map
+export default function Activities(props: ActivitiesProps): JSX.Element;

package/lib/cjs/components/FeedObject/Activities/Activities.js

@@ -1,75 +1,31 @@
 "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 material_1 = require("@mui/material");
 const comments_1 = require("../../../types/comments");
-const classnames_1 = __importDefault(require("classnames"));
-const system_1 = require("@mui/system");
-const CommentsObject_1 = __importDefault(require("../../CommentsObject"));
-const ActivitiesMenu_1 = __importDefault(require("./ActivitiesMenu"));
-const RelevantActivities_1 = __importDefault(require("./RelevantActivities"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const CommentsObject_1 = tslib_1.__importDefault(require("../../CommentsObject"));
+const ActivitiesMenu_1 = tslib_1.__importDefault(require("./ActivitiesMenu"));
+const RelevantActivities_1 = tslib_1.__importDefault(require("./RelevantActivities"));
 const feedObject_1 = require("../../../types/feedObject");
 const react_core_1 = require("@selfcommunity/react-core");
 const types_1 = require("@selfcommunity/types");
 const utils_1 = require("@selfcommunity/utils");
 const react_intersection_observer_1 = require("react-intersection-observer");
-const PREFIX = 'SCFeedObjectActivities';
+const constants_1 = require("../constants");
 const classes = {
-    root: `${PREFIX}-root`,
-    activities: `${PREFIX}-activities`
+    root: `${constants_1.PREFIX}-activities-root`,
+    activities: `${constants_1.PREFIX}-activities`
 };
 const Root = (0, styles_1.styled)(material_1.Box, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    width: '100%'
-}));
-function Activities(inProps) {
-    const props = (0, system_1.useThemeProps)({
-        props: inProps,
-        name: PREFIX
-    });
+    name: constants_1.PREFIX,
+    slot: 'ActivitiesRoot'
+})(() => ({}));
+function Activities(props) {
     // PROPS
-    const { id = `feed_object_activities_${props.feedObjectId ? props.feedObjectId : props.feedObject ? props.feedObject.id : ''}`, className, feedObjectId, feedObject, feedObjectType = types_1.SCFeedObjectTypologyType.POST, cacheStrategy = utils_1.CacheStrategies.CACHE_FIRST, CommentsObjectProps = {}, CommentComponentProps = { variant: 'outlined' }, feedObjectActivities = [], comments = [], onSetSelectedActivities, activitiesType = feedObject_1.SCFeedObjectActivitiesType.RECENT_COMMENTS } = props, rest = __rest(props, ["id", "className", "feedObjectId", "feedObject", "feedObjectType", "cacheStrategy", "CommentsObjectProps", "CommentComponentProps", "feedObjectActivities", "comments", "onSetSelectedActivities", "activitiesType"]);
+    const { id = `feed_object_activities_${props.feedObjectId ? props.feedObjectId : props.feedObject ? props.feedObject.id : ''}`, className, feedObjectId, feedObject, feedObjectType = types_1.SCContributionType.POST, cacheStrategy = utils_1.CacheStrategies.CACHE_FIRST, CommentsObjectProps = {}, CommentComponentProps = { variant: 'outlined' }, feedObjectActivities = [], comments = [], onSetSelectedActivities, activitiesType = feedObject_1.SCFeedObjectActivitiesType.RECENT_COMMENTS } = props, rest = tslib_1.__rest(props, ["id", "className", "feedObjectId", "feedObject", "feedObjectType", "cacheStrategy", "CommentsObjectProps", "CommentComponentProps", "feedObjectActivities", "comments", "onSetSelectedActivities", "activitiesType"]);
     const { ref, inView } = (0, react_intersection_observer_1.useInView)({ triggerOnce: true });
     // STATE
     const [selectedActivities, setSelectedActivities] = (0, react_1.useState)(activitiesType);
@@ -78,7 +34,7 @@ function Activities(inProps) {
         feedObject,
         feedObjectType,
         cacheStrategy,
-        pageSize: 3,
+        pageSize: 2,
         orderBy: selectedActivities === feedObject_1.SCFeedObjectActivitiesType.CONNECTIONS_COMMENTS
             ? comments_1.SCCommentsOrderBy.CONNECTION_DESC
             : selectedActivities === feedObject_1.SCFeedObjectActivitiesType.FIRST_COMMENTS
@@ -86,7 +42,7 @@ function Activities(inProps) {
                 : comments_1.SCCommentsOrderBy.ADDED_AT_DESC
     });
     const objId = commentsObject.feedObject ? commentsObject.feedObject.id : null;
-    const skeletonsCount = Math.min(3, commentsObject.feedObject ? commentsObject.feedObject.comment_count : 3);
+    const skeletonsCount = Math.min(3, commentsObject.feedObject ? commentsObject.feedObject.comment_count : 2);
     const existFeedObjectActivities = feedObjectActivities && feedObjectActivities.length > 0;
     /**
      * Sync activities type if prop change
@@ -116,11 +72,17 @@ function Activities(inProps) {
     function renderRelevantActivities() {
         return react_1.default.createElement(RelevantActivities_1.default, { activities: feedObjectActivities });
     }
+    /**
+     * Load comments
+     */
+    function handleNext() {
+        commentsObject.getNextPage();
+    }
     /**
      * Render comments of feedObject
      */
     function renderComments() {
-        return (react_1.default.createElement(react_1.default.Fragment, null, (commentsObject.feedObject.comment_count > 0 || comments.length > 0) && (react_1.default.createElement(CommentsObject_1.default, Object.assign({ feedObject: commentsObject.feedObject, comments: commentsObject.comments, startComments: comments, next: commentsObject.next, isLoadingNext: commentsObject.isLoadingNext, handleNext: commentsObject.getNextPage, totalLoadedComments: commentsObject.comments.length + comments.length, totalComments: commentsObject.feedObject.comment_count, hideAdvertising: true, cacheStrategy: cacheStrategy }, CommentsObjectProps, { CommentsObjectSkeletonProps: { count: skeletonsCount }, CommentComponentProps: Object.assign(Object.assign({}, CommentComponentProps), { cacheStrategy }) })))));
+        return (react_1.default.createElement(react_1.default.Fragment, null, (commentsObject.feedObject.comment_count > 0 || comments.length > 0) && (react_1.default.createElement(CommentsObject_1.default, Object.assign({ feedObject: commentsObject.feedObject, comments: commentsObject.comments, startComments: comments, next: commentsObject.next, isLoadingNext: commentsObject.isLoadingNext, handleNext: handleNext, totalLoadedComments: commentsObject.comments.length + comments.length, totalComments: commentsObject.feedObject.comment_count, hideAdvertising: true }, CommentsObjectProps, { cacheStrategy: cacheStrategy, CommentsObjectSkeletonProps: { count: skeletonsCount }, CommentComponentProps: Object.assign(Object.assign(Object.assign(Object.assign({}, (CommentsObjectProps.CommentComponentProps ? CommentsObjectProps.CommentComponentProps : {})), { truncateContent: true }), CommentComponentProps), { cacheStrategy }), inPlaceLoadMoreContents: false })))));
     }
     /**
      * Renders root object
@@ -129,9 +91,8 @@ function Activities(inProps) {
         (Boolean(commentsObject.feedObject.comment_count) ||
             (feedObjectActivities && feedObjectActivities.length > 0) ||
             comments.length > 0 ||
-            (feedObject && feedObject.comment_count > 0)) ? (react_1.default.createElement(material_1.Box, Object.assign({ className: classes.activities }, (existFeedObjectActivities ? {} : { style: { minHeight: `${skeletonsCount * 80}px` } })),
+            (feedObject && feedObject.comment_count > 0)) ? (react_1.default.createElement(material_1.Box, Object.assign({ className: classes.activities }, (existFeedObjectActivities ? {} : { style: { minHeight: `${Math.min(skeletonsCount, feedObject.comment_count) * 80}px` } })),
         react_1.default.createElement(ActivitiesMenu_1.default, { selectedActivities: selectedActivities, hideRelevantActivitiesItem: !existFeedObjectActivities, onChange: handleSelectActivitiesType }),
         selectedActivities === feedObject_1.SCFeedObjectActivitiesType.RELEVANCE_ACTIVITIES ? renderRelevantActivities() : renderComments())) : null));
 }
 exports.default = Activities;
-//# sourceMappingURL=Activities.js.map

package/lib/cjs/components/FeedObject/Activities/ActivitiesMenu/ActivitiesMenu.d.ts

@@ -24,5 +24,4 @@ export interface ActivitiesMenuProps {
      */
     [p: string]: any;
 }
-export default function ActivitiesMenu(inProps: ActivitiesMenuProps): JSX.Element;
-//# sourceMappingURL=ActivitiesMenu.d.ts.map
+export default function ActivitiesMenu(props: ActivitiesMenuProps): JSX.Element;