@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
61 lines (60 loc) • 3.24 kB
JavaScript
import { __rest } from "tslib";
import { jsx as _jsx } from "react/jsx-runtime";
import { useEffect, useState } from 'react';
import { FormattedMessage } from 'react-intl';
import { List, ListItem } from '@mui/material';
import InfiniteScroll from '../../../../../shared/InfiniteScroll';
import Typography from '@mui/material/Typography';
import { http, Endpoints } from '@selfcommunity/api-services';
import { Logger } from '@selfcommunity/utils';
import { useSCFetchFeedObject } from '@selfcommunity/react-core';
import { SCContributionType } from '@selfcommunity/types';
import { SCOPE_SC_UI } from '../../../../../constants/Errors';
import BaseDialog from '../../../../../shared/BaseDialog';
import CentralProgress from '../../../../../shared/CentralProgress';
import User from '../../../../User';
export default function SharesDialog(props) {
// PROPS
const { id = null, feedObject = null, feedObjectType = feedObject ? feedObject.type : SCContributionType.POST, open = false, onClose = null } = props, rest = __rest(props, ["id", "feedObject", "feedObjectType", "open", "onClose"]);
// STATE
const { obj, setObj } = useSCFetchFeedObject({ id, feedObject, feedObjectType });
const [isLoading, setIsLoading] = useState(Boolean((id && feedObjectType) || feedObject));
const [shares, setShares] = useState([]);
const [next, setNext] = useState(id && feedObjectType
? `${Endpoints.ShareUsersList.url({ type: feedObjectType, id: id })}`
: feedObject && feedObjectType
? `${Endpoints.ShareUsersList.url({ type: feedObjectType, id: feedObject.id })}`
: null);
/**
* On mount, fetches shares
*/
useEffect(() => {
if (obj && next) {
fetchShares();
}
}, [`${obj}`]);
/**
* Fetches shares
*/
function fetchShares() {
setIsLoading(true);
http
.request({
url: next,
method: Endpoints.ShareUsersList.method
})
.then((res) => {
const data = res.data;
setShares([...shares, ...data.results]);
setIsLoading(false);
setNext(data.next !== null ? data.next : null);
})
.catch((error) => {
Logger.error(SCOPE_SC_UI, error);
});
}
/**
* Renders shares dialog
*/
return (_jsx(BaseDialog, Object.assign({ title: _jsx(FormattedMessage, { defaultMessage: "ui.feedObject.sharesDialog.title", id: "ui.feedObject.sharesDialog.title" }), onClose: onClose, open: open }, rest, { children: isLoading ? (_jsx(CentralProgress, { size: 50 })) : (_jsx(InfiniteScroll, Object.assign({ dataLength: shares.length, next: fetchShares, hasMoreNext: next !== null, loaderNext: _jsx(CentralProgress, { size: 30 }), height: 400, endMessage: _jsx(Typography, Object.assign({ variant: "body2", align: "center", fontWeight: "bold" }, { children: _jsx(FormattedMessage, { id: "ui.feedObject.sharesDialog.noOtherLikes", defaultMessage: "ui.feedObject.sharesDialog.noOtherLikes" }) })) }, { children: _jsx(List, { children: shares.slice(0, 4).map((user, index) => (_jsx(ListItem, { children: _jsx(User, { elevation: 0, user: user }, index) }, user.id))) }) }))) })));
}