@selfcommunity/react-ui/lib/esm/components/FeedObject/Activities/Activities.js

React UI Components to integrate a Community created with SelfCommunity Platform.

import { __rest } from "tslib";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useState } from 'react';
import { styled } from '@mui/material/styles';
import { Box } from '@mui/material';
import { SCCommentsOrderBy } from '../../../types/comments';
import classNames from 'classnames';
import CommentsObject from '../../CommentsObject';
import ActivitiesMenu from './ActivitiesMenu';
import RelevantActivities from './RelevantActivities';
import { SCFeedObjectActivitiesType } from '../../../types/feedObject';
import { useSCFetchCommentObjects } from '@selfcommunity/react-core';
import { SCContributionType } from '@selfcommunity/types';
import { CacheStrategies } from '@selfcommunity/utils';
import { useInView } from 'react-intersection-observer';
import { PREFIX } from '../constants';
const classes = {
    root: `${PREFIX}-activities-root`,
    activities: `${PREFIX}-activities`
};
const Root = styled(Box, {
    name: PREFIX,
    slot: 'ActivitiesRoot'
})(() => ({}));
export default function Activities(props) {
    // PROPS
    const { id = `feed_object_activities_${props.feedObjectId ? props.feedObjectId : props.feedObject ? props.feedObject.id : ''}`, className, feedObjectId, feedObject, feedObjectType = SCContributionType.POST, cacheStrategy = CacheStrategies.CACHE_FIRST, CommentsObjectProps = {}, CommentComponentProps = { variant: 'outlined' }, feedObjectActivities = [], comments = [], onSetSelectedActivities, activitiesType = SCFeedObjectActivitiesType.RECENT_COMMENTS } = props, rest = __rest(props, ["id", "className", "feedObjectId", "feedObject", "feedObjectType", "cacheStrategy", "CommentsObjectProps", "CommentComponentProps", "feedObjectActivities", "comments", "onSetSelectedActivities", "activitiesType"]);
    const { ref, inView } = useInView({ triggerOnce: true });
    // STATE
    const [selectedActivities, setSelectedActivities] = useState(activitiesType);
    const commentsObject = useSCFetchCommentObjects({
        id: feedObjectId,
        feedObject,
        feedObjectType,
        cacheStrategy,
        pageSize: 1,
        orderBy: selectedActivities === SCFeedObjectActivitiesType.CONNECTIONS_COMMENTS
            ? SCCommentsOrderBy.CONNECTION_DESC
            : selectedActivities === SCFeedObjectActivitiesType.FIRST_COMMENTS
                ? SCCommentsOrderBy.ADDED_AT_ASC
                : 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
     */
    useEffect(() => {
        setSelectedActivities(activitiesType);
    }, [activitiesType]);
    /**
     * Prefetch comments only if obj
     */
    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 _jsx(RelevantActivities, { activities: feedObjectActivities });
    }
    /**
     * Load comments
     */
    function handleNext() {
        commentsObject.getNextPage();
    }
    /**
     * Render comments of feedObject
     */
    function renderComments() {
        return (_jsx(_Fragment, { children: (commentsObject.feedObject.comment_count > 0 || comments.length > 0) && (_jsx(CommentsObject, 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 (_jsx(Root, Object.assign({ id: id, className: classNames(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)) ? (_jsxs(Box, Object.assign({ className: classes.activities }, (existFeedObjectActivities ? {} : { style: { minHeight: `${Math.min(skeletonsCount, feedObject.comment_count) * 80}px` } }), { children: [_jsx(ActivitiesMenu, { selectedActivities: selectedActivities, hideRelevantActivitiesItem: !existFeedObjectActivities, onChange: handleSelectActivitiesType }), selectedActivities === SCFeedObjectActivitiesType.RELEVANCE_ACTIVITIES ? renderRelevantActivities() : renderComments()] }))) : null })));
}