@selfcommunity/react-ui/lib/esm/components/EventInfoWidget/EventInfoWidget.js

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

import { __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Box, Button, CardContent, Icon, Stack, styled, Typography, useThemeProps } from '@mui/material';
import { useSCFetchEvent } from '@selfcommunity/react-core';
import { SCEventPrivacyType, SCEventSubscriptionStatusType } from '@selfcommunity/types';
import PubSub from 'pubsub-js';
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { FormattedMessage } from 'react-intl';
import { SCGroupEventType, SCTopicType } from '../../constants/PubSub';
import EventInfoDetails from '../../shared/EventInfoDetails';
import HiddenPlaceholder from '../../shared/HiddenPlaceholder';
import Widget from '../Widget';
import { PREFIX } from './constants';
import Skeleton from './Skeleton';
const classes = {
    root: `${PREFIX}-root`,
    content: `${PREFIX}-content`,
    titleWrapper: `${PREFIX}-title-wrapper`,
    textWrapper: `${PREFIX}-text-wrapper`,
    showMore: `${PREFIX}-show-more`
};
const Root = styled(Widget, {
    name: PREFIX,
    slot: 'Root',
    overridesResolver: (_props, styles) => styles.root
})(() => ({}));
function isTextLongerThanLimit(text, limit = 125) {
    return text.length > limit;
}
function getTruncatedText(text, limit = 125) {
    if (!text) {
        return '';
    }
    return isTextLongerThanLimit(text, limit) ? text.substring(0, limit).concat('...') : text;
}
export default function EventInfoWidget(inProps) {
    // PROPS
    const props = useThemeProps({
        props: inProps,
        name: PREFIX
    });
    const { event, eventId, summaryExpanded = false } = props, rest = __rest(props, ["event", "eventId", "summaryExpanded"]);
    // STATE
    const [expanded, setExpanded] = useState(summaryExpanded);
    const [showButton, setShowButton] = useState(!summaryExpanded);
    const [loading, setLoading] = useState(true);
    // HOOKS
    const { scEvent, setSCEvent } = useSCFetchEvent({ id: eventId, event });
    // REFS
    const updatesSubscription = useRef(null);
    useEffect(() => {
        setLoading(false);
    }, []);
    useEffect(() => {
        if (!scEvent) {
            return;
        }
        const _showButton = isTextLongerThanLimit(scEvent.description, 220);
        if (_showButton !== !summaryExpanded) {
            setShowButton(_showButton);
        }
    }, [scEvent]);
    /**
     * Handle toggle summary
     */
    const handleToggleSummary = useCallback(() => {
        setExpanded(!expanded);
    }, [expanded]);
    const hasGeolocationOrLink = useMemo(() => Boolean((scEvent === null || scEvent === void 0 ? void 0 : scEvent.geolocation) || (scEvent === null || scEvent === void 0 ? void 0 : scEvent.link) || (scEvent === null || scEvent === void 0 ? void 0 : scEvent.live_stream)), [scEvent]);
    const showInfo = useMemo(() => ((scEvent === null || scEvent === void 0 ? void 0 : scEvent.privacy) === SCEventPrivacyType.PUBLIC && hasGeolocationOrLink) ||
        ([SCEventSubscriptionStatusType.SUBSCRIBED, SCEventSubscriptionStatusType.GOING, SCEventSubscriptionStatusType.NOT_GOING].indexOf(scEvent === null || scEvent === void 0 ? void 0 : scEvent.subscription_status) > -1 &&
            hasGeolocationOrLink), [scEvent]);
    const description = useMemo(() => (expanded ? scEvent === null || scEvent === void 0 ? void 0 : scEvent.description : getTruncatedText(scEvent === null || scEvent === void 0 ? void 0 : scEvent.description, 220)), [expanded, scEvent]);
    /**
     * Subscriber for pubsub callback
     */
    const onChangeGroupHandler = useCallback((_msg, data) => {
        if (data && scEvent.id === data.id) {
            setSCEvent(data);
        }
    }, [scEvent, setSCEvent]);
    /**
     * On mount, subscribe to receive groups updates (only edit)
     */
    useEffect(() => {
        if (scEvent) {
            updatesSubscription.current = PubSub.subscribe(`${SCTopicType.EVENT}.${SCGroupEventType.EDIT}`, onChangeGroupHandler);
        }
        return () => {
            updatesSubscription.current && PubSub.unsubscribe(updatesSubscription.current);
        };
    }, [scEvent]);
    // RENDER
    if (!scEvent && loading) {
        return _jsx(Skeleton, {});
    }
    if (!scEvent) {
        return _jsx(HiddenPlaceholder, {});
    }
    return (_jsx(Root, Object.assign({ className: classes.root }, rest, { children: _jsxs(CardContent, Object.assign({ className: classes.content }, { children: [_jsxs(Stack, Object.assign({ className: classes.titleWrapper }, { children: [_jsx(Icon, Object.assign({ fontSize: "small" }, { children: "info" })), _jsx(Typography, Object.assign({ variant: "h5" }, { children: _jsx(FormattedMessage, { id: "ui.infoEventWidget.title", defaultMessage: "ui.infoEventWidget.title" }) }))] })), _jsx(Box, Object.assign({ className: classes.textWrapper }, { children: _jsxs(Typography, Object.assign({ component: "span", variant: "body1" }, { children: [description, showButton && !expanded && (_jsx(Button, Object.assign({ size: "small", variant: "text", className: classes.showMore, onClick: handleToggleSummary }, { children: _jsx(FormattedMessage, { id: "ui.infoEventWidget.showMore", defaultMessage: "ui.infoEventWidget.showMore" }) })))] })) })), _jsx(EventInfoDetails, { event: scEvent, hasRecurringInfo: true, hasCreatedInfo: true, hasLocationInfo: showInfo })] })) })));
}