@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
98 lines (97 loc) • 6.16 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const styles_1 = require("@mui/material/styles");
const material_1 = require("@mui/material");
const comments_1 = require("../../../types/comments");
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 constants_1 = require("../constants");
const classes = {
root: `${constants_1.PREFIX}-activities-root`,
activities: `${constants_1.PREFIX}-activities`
};
const Root = (0, styles_1.styled)(material_1.Box, {
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.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);
const commentsObject = (0, react_core_1.useSCFetchCommentObjects)({
id: feedObjectId,
feedObject,
feedObjectType,
cacheStrategy,
pageSize: 1,
orderBy: selectedActivities === feedObject_1.SCFeedObjectActivitiesType.CONNECTIONS_COMMENTS
? comments_1.SCCommentsOrderBy.CONNECTION_DESC
: selectedActivities === feedObject_1.SCFeedObjectActivitiesType.FIRST_COMMENTS
? comments_1.SCCommentsOrderBy.ADDED_AT_ASC
: comments_1.SCCommentsOrderBy.ADDED_AT_DESC
});
const objId = commentsObject.feedObject ? commentsObject.feedObject.id : null;
const skeletonsCount = Math.min(2, commentsObject.feedObject ? commentsObject.feedObject.comment_count : 2);
const existFeedObjectActivities = feedObjectActivities && feedObjectActivities.length > 0;
/**
* Sync activities type if prop change
*/
(0, react_1.useEffect)(() => {
setSelectedActivities(activitiesType);
}, [activitiesType]);
/**
* Prefetch comments only if obj
*/
(0, react_1.useEffect)(() => {
if (objId && !commentsObject.comments.length && inView) {
commentsObject.getNextPage();
}
}, [objId, inView]);
/**
* Handle change activities type
* @param type
*/
function handleSelectActivitiesType(type) {
onSetSelectedActivities(type);
setSelectedActivities(type);
}
/**
* Render latest activities of feedObject
*/
function renderRelevantActivities() {
return (0, jsx_runtime_1.jsx)(RelevantActivities_1.default, { activities: feedObjectActivities });
}
/**
* Load comments
*/
function handleNext() {
commentsObject.getNextPage();
}
/**
* Render comments of feedObject
*/
function renderComments() {
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (commentsObject.feedObject.comment_count > 0 || comments.length > 0) && ((0, jsx_runtime_1.jsx)(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
*/
return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className) }, rest, { ref: ref }, { children: commentsObject.feedObject &&
(Boolean(commentsObject.feedObject.comment_count) ||
(feedObjectActivities && feedObjectActivities.length > 0) ||
comments.length > 0 ||
(feedObject && feedObject.comment_count > 0)) ? ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.activities }, (existFeedObjectActivities ? {} : { style: { minHeight: `${Math.min(skeletonsCount, feedObject.comment_count) * 80}px` } }), { children: [(0, jsx_runtime_1.jsx)(ActivitiesMenu_1.default, { selectedActivities: selectedActivities, hideRelevantActivitiesItem: !existFeedObjectActivities, onChange: handleSelectActivitiesType }), selectedActivities === feedObject_1.SCFeedObjectActivitiesType.RELEVANCE_ACTIVITIES ? renderRelevantActivities() : renderComments()] }))) : null })));
}
exports.default = Activities;